Appending Jquery in HTML dynamically

Question

I am new to jquery. I am trying to append Jquery in an HTML page in java. To include jquery.js file I have written following code:

scriptTag += "var script = document.createElement('script');" + 
"script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; " +
"script.type = 'text/javascript'; " +
"document.getElementsByTagName('head')[0].appendChild(script);" +

and then I appended following js+jquery code with it

"var script2 = document.createElement('script'); window.onload = function() {" +
"$(document).ready(function() {" +
"$(\"#identity\").hide();});};" +
"script2.type = 'text/javascript'; " +
"document.getElementsByTagName('head')[0].appendChild(script2);";

So basically I am trying to write this :

var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
script.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(script);
var script2 = document.createElement('script');
 window.onload = function() {
   $(document).ready(function() {
      $("#identity").hide();
   });
  };
script2.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script2);

What I want to do is that I want my function after window load. Somehow, writing $(document).ready(function() { alone does'nt work. I get an error that $ is not defined (looks like jquery.js is not ready yet).

To avoid this problem I have used window.onload = function() {. But now I am getting error: $(document).ready is not a function. I am really confused here on how to write this thing. Is this the correct approach? Any help/guidance is highly appreciated.

[Edit]

Please note that the following code (without jquery) works fine:

window.onload = function() {
document.getElementById('identity').style.visibility='hidden';
};

[Edit]

Actually I am making a web proxy, where I download page and serve them with custom look and field. The pages does not contain any jquery files nor can I include or write HTML. I can only add my Js dynamically using java etc.

That's not how script loading works in general; you need to look at $.getScript() in jQuery and put that into a file to include by URL. Adding scripts in Javascript is a bit delicate, and jQuery doesn't make it any easier. — Jared Farrish
– Jared Farrish, Commented Jul 2, 2012 at 10:28
@Alexander: No it is not. Can you please point it out in code? — Umer Hayat
– Umer Hayat, Commented Jul 2, 2012 at 10:34

BalaKrishnan웃 · Accepted Answer · 2012-07-02 10:49:22Z

1

Here is some code that shows how to load a script file dynamically and also delay calling of $(document).ready until that file is loaded:

http://jqfaq.com/how-to-load-java-script-files-dynamically/

answered Jul 2, 2012 at 10:49

BalaKrishnan웃

4,5758 gold badges34 silver badges51 bronze badges

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

2 Comments

Umer Hayat Over a year ago

I think that this example assumes that the a jquery.js file is already included in the page. But in my case, It is not included. I can only include it dynamically by first downloading page at server and then serving it.

Umer Hayat Over a year ago

So, In my case i am adding first jquery.js file.

nilgun · Accepted Answer · 2012-07-02 11:58:19Z

The code you use to load jquery.min.js file is called asycnhroniously. Probably this file has not been loaded at the moment you try to execute jquery function. Therefore you should make sure that the file is loaded using a callback function.

In the following link you can find an example on how to this: http://blog.logiclabz.com/javascript/dynamically-loading-javascript-file-with-callback-event-handlers.aspx

Also here is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>index</title>
    <script type="text/javascript">

        function loadScript(sScriptSrc, callbackfunction) {
            //gets document head element
            var oHead = document.getElementsByTagName('head')[0];
            if (oHead) {
                //creates a new script tag
                var oScript = document.createElement('script');

                //adds src and type attribute to script tag
                oScript.setAttribute('src', sScriptSrc);
                oScript.setAttribute('type', 'text/javascript');

                //calling a function after the js is loaded (IE)
                var loadFunction = function() {
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        callbackfunction();
                    }
                };
                oScript.onreadystatechange = loadFunction;

                //calling a function after the js is loaded (Firefox)
                oScript.onload = callbackfunction;

                //append the script tag to document head element
                oHead.appendChild(oScript);
            }
        }

        var SuccessCallback = function() {
            $("#identity").hide();
        }

        window.onload = function() {

            loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', SuccessCallback)

        };
    </script>
</head>
<body>

    <span id="identity"> This text will be hidden after SuccessCallback </span>

</body>

You should use this code in your scriptTag variable and then you can use eval() function to evaluate the script in this variable. Also you can load the second javascript file in the callback function using jquery's getscript function

Collectives™ on Stack Overflow

Appending Jquery in HTML dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related