Javascript code works in form.twig but doesn't work in modal.twig

[emrecaga]

Hi,

I have project_info.twig, project-info-form.twig and project-modal.twig files similar like user or group files. I added some javascript code in {% block page_scripts %} part in my project_info.twig file. This code works fine in project-info-form.twig but doesn't work for project-modal.twig. I mean the code works in form page but doesn't work in the opening modal form.

I understand that i have to put this code into another place where both files can see but i couldn't find it. I tried to make a new js page and put it into initialize.php but in my javascript code i use twig variables like for and if. That's why these variables doesn't work in js file.

[alexweissman]

Making a new .js file is the correct approach. If you need to inject some server-side information, you can use Twig in your page template to set values for Javascript variables:

<script>
{% if (post.category == "protoss") %}
    var deployReavers = true;
{% else %}
    var deployReavers = false;
</script>

Then you can use the Javascript variable deployReavers in your .js file. Just make sure this code comes before you load the external files.

[emrecaga]

Thanks for the answer.

I made a new widget-project.js file and showed this file in initialize.php. My javascript code still works fine in project-info-form.twig but doesn't work for project-modal.twig.

To understand the problem, i didn't use my more complicated javacript code with for and if variables. I used datepicker javascript code. This code works in form page but doesn't work in the opening modal form. What can be the problem?

[alexweissman]

Do you have to initialize your datepicker with extra Javascript code? If so, it's not going to work if it tries to initialize before the element actually exists.

Remember, a lot of things are happening asynchronously in the Javascript world. So, you need to use either promises or events to make sure that things happen in the right order - you can no longer rely on code always executing in the order it appears. Take a look at the userForm function in widget-users.js:

// Fetch and render the form
    $.ajax({  
      type: "GET",  
      url: url,
      data: data,
      cache: false
    })
    .fail(function(result) {
        // Display errors on failure
        $('#userfrosting-alerts').flashAlerts().done(function() {
        });
    })
    .done(function(result) {
        // Append the form as a modal dialog to the body
        $( "body" ).append(result);
        $('#' + box_id).modal('show');

        // Initialize select2's
        $('#' + box_id + ' .select2').select2();

        // Initialize bootstrap switches
        var switches = $('#' + box_id + ' .bootstrapswitch');
        switches.data('on-label', '<i class="fa fa-check"></i>');
        switches.data('off-label', '<i class="fa fa-times"></i>');
        switches.bootstrapSwitch();
        switches.bootstrapSwitch('setSizeClass', 'switch-mini' );

        // Initialize primary group buttons
        $(".bootstrapradio").bootstrapradio();

                ...

Notice how we initialize all our form widgets inside the callback of .done(). This ensures that the widgets won't try to run until we are sure the form has been loaded and inserted into the rest of the page.

[alexweissman]

Ok, let us know if you're still having trouble with this!