Using external script inside load callback with dialog?

Question

I hope I can explain this properly. I am creating a JQuery dialogue box where the content is loaded from an HTML file. This dialogue box contains a form with which I need to perform additional JS functions. The problem I am running into, is that none of the HTML/selectors exist in the DOM until I click #image_edit so my JQuery upload script is not working.
As you can see, I am invoking the upload function on the .load callback, but it doesn't work. Is there a better/proper way to do this?

EDIT : After moving the .dialog and remote functions inside the load() callback, everything is working as expected.

uploadInterface.js

(function($) {
    $(function(//removed, was not needed//) {
    //upload functions//
    });
})(window.jQuery);

uploadSetup.js

(function($) {
    $(function(//removed, was not needed//) {
    //upload functions//
    });
})(window.jQuery);

dialogue.js

$(function(){
    $('#image_edit').click(function() {
        $(".upload_div").load('../dialogues/content.html #upload_window', function() {

            $.getScript("js/uploadInterface.js"); //added remote script here//
            $.getScript("js/uploadSetup.js"); //added remote script here//

        }).fadeTo("slow", 1).dialog({
            title: "Upload an image",
            width: "320px",
            position: { my: 'top', at: 'top+150' },
            resizable: false,
            draggable: false,
            modal: true,
            show: "fadeIn",
            hide: "fadeOut",
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
                $(".ui-dialog-titlebar-close span", widget)
                .removeClass("ui-icon-closethick")
                .addClass("ui-icon-close-custom");
            }
        });
    });
});

What would go inside the uploadSetup function? Why can't you have regular functions with selectors and events. Even if the elements do not exist, the functions will work once they are in the DOM later after the load — Sam Battat
– Sam Battat, Commented Oct 9, 2014 at 23:00
I want to keep them separate for manageability, and so I can use them separately throughout the site. — EternalHour
– EternalHour, Commented Oct 9, 2014 at 23:13
and those scripts are being included in the html file that you load? with script tag, right? — Sam Battat
– Sam Battat, Commented Oct 9, 2014 at 23:28

Sam Battat · Accepted Answer · 2014-10-09 23:32:08Z

1

To load scripts in jQuery you should use $.getScript() So in your load callback function you would have a $.getScript() to get the script then execute whatever functions you want.

$(".upload_div").load('../dialogues/content.html #upload_window', function() {
    $.getScript( "uploadInterface.js" )
})...
...
...

answered Oct 9, 2014 at 23:32

Sam Battat

5,7651 gold badge22 silver badges29 bronze badges

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

Comments

charlietfl · Accepted Answer · 2014-10-09 23:06:02Z

1

You have not provided a load() callback.

Walk through the closing braces in your code and you will see that there is only one argument passed to load() and that you are passing a second argument to dialog().

The load() method ends as soon as your chain starts .fadeTo()

This second argument of dialog is what you have misinterpreted as the callback for load()

edited Oct 9, 2014 at 23:06

answered Oct 9, 2014 at 23:00

charlietfl

172k14 gold badges125 silver badges154 bronze badges

6 Comments

EternalHour Over a year ago

I see what you're saying.

EternalHour Over a year ago

I fixed that part, but the dialogue script still doesn't recognize the upload functions.

EternalHour Over a year ago

Seems to be a scope issue?

charlietfl Over a year ago

if upload script #1 is your function declaration it's all wrong. Not sure what's going on there.

EternalHour Over a year ago

I clarified the question.

|

Collectives™ on Stack Overflow

Using external script inside load callback with dialog?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related