Home/ Questions/Q 522243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:20:04+00:00

Ok, the point is having a bookmarklet load an external js that creates jquery,

  • 0

Ok, the point is having a bookmarklet load an external js that creates jquery, jquery-ui and a css file on the current web-page, with everything being done cross-domain. For some reason by the time the jquery code runs, dialog() function which is included in jquery-ui does not exist. My guess is that jquery is executing the code before the external scripts load.

Please help!

 function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("http://localhost/js/jquery-1.3.2.min.js", "js") //dynamically load and add this .js file
loadjscssfile("http://localhost/js/jquery-ui-1.7.2.custom.min.js", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("http://localhost/css/redmond/jquery-ui-1.7.2.custom.css", "css") //dynamically load and add this .css file

$(document).ready(function() {
    var title = document.title;
    var location = document.location;
    var documentInfo = "url="+location+"&title="+title;


    div = $("<div id=dialog name=dialog>").html("<img src='http://localhost/ajax-loader.gif' alt='loader' style='padding-left:15px;'/>");

    $("body").prepend(div);
    $("#dialog").dialog();


    var script = $.ajax({url: "http://localhost/parse.php", data: documentInfo, async: false}).responseText;
    $("#dialog").html(script);


});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re already lucky that your script doesn’t crash while calling $ function in $(document) 🙂

    Here is an example.

    test.js:

    function sleep(milliseconds)
{
    var end = new Date().getTime() + milliseconds;

    while (new Date().getTime() < end);

    document.write('external script executed<br/>');
}

sleep(3000);

    test.html

    <html>
<head>
    <title>test</title>
    <script type="text/javascript">
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", "test.js");
        document.getElementsByTagName("head")[0].appendChild(fileref)

        document.write('page script executed<br/>');
    </script>
</head>
<body>
</body>
</html>

    test.html loads test.js before writing to the document. If you expect the result to be:

    external script executed

    page script executed

    … then you’re wrong.

    When you append a <script> element to the <head> of your page, the appendChild() function returns immediatly after the element is added, it doesn’t wait for your script to be fully loaded. In the example above the output will be:

    page script executed

    external script executed

    That’s the reason why I said that you’re lucky to be able to use jQuery at a time you wan’t be sure it’s fully loaded.

    A workaround to this problem would be to append your $(document).ready(...); as a script to the <head> of your document. You could expect that a normal browser – if you see what I mean – would load and execute the scripts in the order you added them to your page.

        var pageScript = document.createElement('script');
    pageScript.setAttribute("type", "text/javascript");
    var pageScriptSource = document.createTextNode("document.write('page script executed<br/>');");
    pageScript.appendChild(pageScriptSource);
    document.getElementsByTagName("head")[0].appendChild(pageScript);

    Tested with FF and IE. Works in FF…

    It’s not a complete solution, but I don’t have time (and don’t want) to find a hack for IE 😉

    • 0