jquery load with inline javascript

Question

I am using jquery load to get a div on a different page and insert it into my page. somthing like this:

$('#mydiv').load("/Pages/grid2.aspx" + " #otherpagediv");

In the div on the other page, there is javascript in the div. The javascript is not coming across, only the html content. Is there a way to get everything in the specified div?

Answer 1

This works:

$.get( '/Pages/grid2.aspx', function ( data ) {
    $( '#mydiv' ).html( $( '<div></div>' ).html( data ).find( '#otherpagediv' ).clone() );
});

Live demo: http://jsfiddle.net/FRbnD/4/show/light/

To understand the demo, view the source code of both pages that comprise it:
Source code of the demo: http://jsfiddle.net/FRbnD/4/
Source code of the "other page": http://jsfiddle.net/MWkSj/1/

The idea is to retrieve the other page via a $.get request, and then find the #otherpagediv and clone it . You then append the clone to the #mydiv . If you insert a clone to the DOM and if that clone contains a SCRIPT element, that script will be executed.

Answer 2

From documentation :

Note: When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded.

If .load() is however called with a selector expression appended to the URL, the scripts are stripped out prior to the DOM being updated, which is why they are never executed.

Answer 3

JavaScript should also come along the response. You have to make sure that /Pages/grid2.aspx should send the required response from server side. Also the url which you have passed to load method has a space in it. I think you should correct that and try it.

$('#mydiv').load("/Pages/grid2.aspx" + "#otherpagediv");

Answer 4

http://www.coursesweb.net/ajax/execute-javascript-code-ajax-response_t

You might find this page helpful, I have used the script, it uses eval()

// this function create an Array that contains the JS code of every <script> 
// then apply the eval() to execute the code in every script collected
 function parseScript(strcode) {
 var scripts = new Array();         // Array which will store the script's code

// Strip out tags
 while(strcode.indexOf("<script") > -1 || strcode.indexOf("</script") > -1) {
 var s = strcode.indexOf("<script");
 var s_e = strcode.indexOf(">", s);
 var e = strcode.indexOf("</script", s);
 var e_e = strcode.indexOf(">", e);

 // Add to scripts array
 scripts.push(strcode.substring(s_e+1, e));
 // Strip from strcode
 strcode = strcode.substring(0, s) + strcode.substring(e_e+1);
}

// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
 try {
   eval(scripts[i]);
 }
  catch(ex) {
    // do what you want here when a script fails
  }
 }
}