Loading embedded scripts through jQuery UI Dialog?

Question

I need to have a jQuery UI dialog box that pops up and shows a basic form, which also includes an external javascript file.

The modal pops up, but none of the script contents load. Not sure why. If I go directly to the page the modal is loading, 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;
            });

        });
    });

Pointy · Accepted Answer · 2012-06-25 18:01:24Z

1

The scripts are not running because of the way you're calling .load(). The library will not run embedded scripts when you use a selector after the URL. By that I mean the addition of ' #region-content' to the end of the "href" value.

Why? I don't completely know; I suspect it has something to do with the fact that jQuery doesn't know whether the embedded <script> bodies rely on scripts in the <head> (or elsewhere) to work.

answered Jun 25, 2012 at 18:01

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KoU_warch · Accepted Answer · 2012-06-25 18:14:49Z

1

As stated before, load wont load the scripts (read the Script Execution section). However it is not necesary to extend the dialog, you can use .delegate(), .on() or even a very to use plugin called liveplugin to manage the dynamic content loaded into the dialog.

answered Jun 25, 2012 at 18:14

KoU_warch

2,1501 gold badge25 silver badges46 bronze badges

Comments

Marcodor · Accepted Answer · 2012-06-25 18:04:11Z

0

The best variant is to write your custom jquery ui widget, extending jquery ui dialog with your functionality.

answered Jun 25, 2012 at 18:04

Marcodor

5,9331 gold badge27 silver badges26 bronze badges

Collectives™ on Stack Overflow

Loading embedded scripts through jQuery UI Dialog?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related