JQuery Append javascript

Question

I try to create modular application, so each page have contains own html and javascript code. I supposed to load all code dynamically like:

var s = document.createElement("script");
s.type = "text/javascript";
s.src='function oncl() { alert("click");}';
$(".selector").append(s);

$( ".selector" ).
append('<input type="button" onclick="ocl();" />
<form action="../test/test_upload4.php"  
method="POST" enctype="multipart/form-data"  name="getnamefile">
<input type="file" id="uploadfile" name="uploadfile">
<input type="submit" id="Submit" name= "Submit" value="Upload"></form>');

But it doesn't work -Error: ocl is not defined. What can be the reason? If I understand correct in each webpage is an object that contains all javascript functions - so why not possible add or remove function to/from ?

why do you need this kind of hackery? you are using jQuery and onclick in html? — Uku Loskit
– Uku Loskit, Commented Jun 22, 2011 at 13:56
The web application that I am developing is complicate. It like CRM. It contains near 100 pages. So I need to separate to independent pages - to work in paralell. It seems convenient if each module has own javascript and html — user810430
– user810430, Commented Jun 22, 2011 at 13:57
You can set the event handler after you append the markup using jquery click or bind method. — ShankarSangoli
– ShankarSangoli, Commented Jun 22, 2011 at 13:58

YODA · Accepted Answer · 2011-06-22 14:21:49Z

If you'd like to load js file dynamically, you can try as the following:

Here is the HTML page code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <script type="text/javascript">
        function dynamicLoad() {
            var s = document.createElement("script");
            s.type="text/javascript";
            s.language="javascript";
            // Here goes your 
            s.src ="dynamic.js";
            document.getElementsByTagName("head")[0].appendChild(s);
            s.onreadystatechange = function() {
                //window.alert(s.readyState);
            }
            s.onload= function() {
                if (s.readyState == "complete") {
 // You must create your DOM element after the js file has been loaded
                    var btn = document.createElement("input");
                    btn.type="button";
                    btn.value="Click Me";
                    btn.onclick = test;
                    document.getElementsByTagName("body")[0].appendChild(btn);
                }
            }
        }
    </script>
    </head>
    <body onload="dynamicLoad()">
        <!-- a href="javascript:void(0)" onclick="test()">Click Me</a -->
    </body>
    </html>

Here is the js file:

function test() {
    window.alert("HELLO");
}

I tested the code under IE 9. Just FYI

SLaks · Accepted Answer · 2011-06-22 13:57:59Z

2

The src property of the <script> tag specifies the URL of an external Javascript file, not the text of the script.

If you want to execute code in an arbitrary string, you can call the eval function.
However, don't.

answered Jun 22, 2011 at 13:57

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

JMax · Accepted Answer · 2011-06-22 13:59:53Z

1

In your code, you declare a function called oncl and you try to call ocl (with a missing n).

Regards,

Max

answered Jun 22, 2011 at 13:59

JMax

26.7k12 gold badges74 silver badges89 bronze badges

1 Comment

JMax Over a year ago

Have a look at SLaks answer (and take into account the comments of the other contributors, maybe you could find another way to do what you are trying to)

Asad Rasheed · Accepted Answer · 2011-06-22 13:59:54Z

1

in addition to the above answer you have not defined any "ocl" function there is "oncl".

answered Jun 22, 2011 at 13:59

Asad Rasheed

5185 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery Append javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related