Load scripts in bootstrap modal when receiving a page fragment

Question

I am currently getting a snippet of the page and loading into bootstrap modal.

This section of the page includes jQuery needed to download Google Maps, but when the modal loads the content, all the scripts become fragmented so subsequently, the maps do not load.

Even if I directly paste the scripts inside the modal body class, they are still lost.

Is there a workaround for this?

What we are currently using to launch the modality is:

<a href="/stores .topclass" data-target="#StoresModal" data-toggle="modal">Launch demo modal</a> 

I can provide additional code when used, if necessary, to respond accurately.

=== Edit: providing more code on request ...

Thus, we include a connection link that launches a boot modal. The link that launches the modal can be seen above, and here is the rest of the code regarding the modal .

What we want to download in a modal format is just a fragment of the page in /stores , all the code downloaded at this URL can be seen here . However, on this page we really want to load everything inside the .modal-container on line 192, but as needed, the scripts are outside the div in the same file, we don’t fix this when we try to load in modal mode. So before, our modal trigger looked like this: -

 <a href="/stores .modal-container" data-target="#StoresModal" data-toggle="modal">Launch demo modal</a> 

This led us to try to simply wrap the entire content of the file inside the div and call it content as a fragment of the page in a modal format, so that we can pull out the necessary scripts needed to load #map_canvas, but, alas, all scripts are removed from the modal. ..

Hopefully this will provide more explanation for what we are trying to achieve.

=== Edit 2: We really fixed it with a workaround, but it was a huge job, so post an answer as soon as I can ...

Answer 1

I use the following code to load a view on boostrap modal:

  $('[data-toggle="modal"]').click(function(e) { e.preventDefault(); var url = $(this).attr('href'); if (url.indexOf('#') == 0) { $(url).modal('open'); } else { $.get(url, function(data) { $(data).modal(); }).success(function() { $('input:text:visible:first').focus(); }); } }); 

With the following trigger:

 <a href="new" role="button" data-backdrop="static" data-keyboard="false" class="btn btn-success" rel="tooltip" data-placement="top" title="text here" data-toggle="modal" alt="text here"><i class="icon-plus icon-white"></i> </a> 

Using this method, you will ensure that all of your scripts are loaded when the modality is displayed. This is only this work that I found to correctly show my modal.

Everything that I need to show in my form ( new.html ) will display perfectly.

So I suggest that you put all your release code on Google Map on the page corresponding to /stores .

Edit You run:

 <a href="/stores" class="topclass" data-target="#StoresModal" data-toggle="modal">Launch demo modal</a> 

Instead:

 <a href="/stores .topclass" data-target="#StoresModal" data-toggle="modal">Launch demo modal</a>` 

Edit2

The problem that I see is that you, modal inclusion, do not receive JS files because they are not included in your inclusion section. I'm not a PHP expert, but here is an option you can try:

Option 1 (not very clean)

You can add the <script>Google Map required JS File</script> inside the <div class="modal-container"></div> , but you will get a duplicate tag for the same JS file.

Option 2 (maybe, maybe?)

Create a new file and add the <div class="modal-container"></div> section with your required JS files.

Replace line 192 by entering your new file and call your modal by passing in your current storage object to display your information in modal format.

Let me know if this helps.

Answer 2

Has your StackOverflow code changed?

 <a href="/stores .topclass" data-target="#StoresModal" data-toggle="modal">Launch demo modal</a> 

Do you have a class name inside href? This may be part of the problem.