Geek Answers Handbook

Loading embedded scripts through jQuery UI Dialog?

I need to open the jQuery UI dialog box and show the base form, which also includes the external javascript file.

Modal pop-ups, but none of the contents of the script download. I do not know why. If I go directly to the modal page, it works fine.

Modal Content:

<link rel="stylesheet" href="http://www.bankrate.com/free-content/css/bankrate-fcc-calculators.css" type="text/css"/> <input id="mrtgCal" type ="text" value="1,Arial,600" style="display:none" /> <script language="Javascript" src="http://js.bankrate.com/free-calculators/free-simple-mortgage-calculator-widget.js" type="text/javascript"></script> <script type="text/javascript">mrtgCalcinit();</script>

Modal call:

 $(function(){ $('.modal-popup a, .email-button a').each(function() { var $link = $(this); var $dialog = $('<div></div>') .load($link.attr('href') + ' #region-content') .dialog({ autoOpen: false, width: 600, draggable: false, resizable: false, modal: true, show: "fade", hide: "fade", closeText: 'X' }); $link.click(function(){ $dialog.dialog('open'); return false; }); }); });
+4
source share
3 answers

Scripts do not run due to the way you call .load() . The library will not run inline scripts when you use the selector after the URL. By this I mean adding ' #region-content' to the end of the value "href".

Why? I do not quite know; I suspect this has something to do with the fact that jQuery does not know whether to use the built-in <script> tags for scripting in <head> (or elsewhere).

+1
source

As stated above, load does not load scripts (read the Script Execution section). However, it is not necessary to expand the dialog, you can use .delegate() , .on() or even really use a plugin called liveplugin to control the dynamic content loaded into the dialog.

+1
source

The best option is to write your custom jquery ui widget, expanding the jquery ui dialog with your functionality.

0
source

More articles:


All Articles