CODEWITHSUNDEEP
javascriptjquerysimplemodal
user965614
user965614

Reputation: 41

Error "Object function 'modal' has no method" with dynamically loaded script files

From script within body I dynamically load jquery and SimpleModal into page header. I use callback to be sure jQuery is fully loaded before making calls into it--this works. However when I dynamically load the SimpleModal script file, I can't subsequently call its methods. It appears when the SimpleModal script lazy loads it is unable to reference the current document object. Any help would be greatly appreciated.

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    jQuery = window.jQuery.noConflict(true);

    main();
}

/******** Main function ********/
function main() {
    jQuery(document).ready(function ($) {
        var domain = 'http://qo.microssoftware.com';

        /******* Load SimpleModal *******/
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
        domain + "/js/simplemodal.js");
        script_tag.onload = modalLoadHandler;
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

    });
}

function modalLoadHandler() {
    /******* Open Modal *******/
    $.modal("<div><h1>SimpleModal</h1></div>", {});
}

Upvotes: 1

Views: 719

Answers (3)

LetterEh
LetterEh

Reputation: 26696

This is where you would want to create an async-closure based around the onload event of the script.

If you must support ancient IE, you can also hook into the onreadystatechange event, the same way you would do it in AJAX requests (in pure JS). The more-modern browsers won't fire this event.

So turn the onload into a callback, which fires known methods from the file. You can get around errors by also attaching to the onerror of the script's loading.

Upvotes: 0

jtheman
jtheman

Reputation: 7491

Try:

<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $.modal("<div><h1>SimpleModal</h1></div>");
});
</script>

OR, if you want to call the modal using your main() function:

<script type="text/javascript" src="http://qo.microssoftware.com/js/simplemodal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    function main() {
        $.modal("<div><h1>SimpleModal</h1></div>");
    }
});
</script>

You don't need to put the js in the header... Actually some programmers always put all their JS just before the ending BODY-tag.

Upvotes: 1

Squirkle
Squirkle

Reputation: 933

I would suggest that this is unnecessary, to begin with. The simplemodal script is very compact. Give more consideration to how to optimize script loading in general (gzip, or if you must go ajax, AMD dependency loading with RequireJS or the like) without the unnecessary complication of this kind of ajax method.

The script loaders that use this type of method (like the Facebook SDK or Google Maps) will search the window (global) element for a callback to call once the script is initialized. Basically, you would have to modify the simplemodal code and then wrap your dependent code in a callback. I hardly see how that could be necessary in this case.

Upvotes: 0

Related Questions