CODEWITHSUNDEEP
jquery-plugins
user209565
user209565

Reputation:

jquery.load() function not calling the jquery in embedded file

I have 2 html files : test1 and test2

test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="lib/jquery-1.3.2.min.js"/></script>
<script language="javascript" type="text/javascript">

$(document).ready(function(){


   $('#content').empty().load('test2.html');

});


</script>


</head>

<body>
<div id="content"></div>

</body>
</html>

test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript" type="text/javascript" src="lib/jquery-1.3.2.min.js"/></script>
<script language="javascript" type="text/javascript">

$(document).ready(function(){


  alert(202);

});

</script>


</head>

<body>
test
</body>
</html>

When I run test1 it only shows "test" and not the alert.So it cannot take in the embedded jquery. So how can I make it take? Please help.

Upvotes: 0

Views: 627

Answers (2)

Russ Cam
Russ Cam

Reputation: 125488

You need to put the script into the <body> on the page that you are loading.

Aleternatively, you might consider using the callback of the load() function to show the alert

$(document).ready(function(){

   $('#content').empty().load('test2.html', function() { alert(202); });

});

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532465

The load function always filters out everything from the referenced HTML except the body element on load. Try moving your script into the body element and see if that helps.

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like "url #some > selector". Default selector "body>*" always applies. If the URL contains a space it should be escape()d. See the examples for more information.

Note that you can apply a selector on load that does more extensive filtering as well.

Upvotes: 2

Related Questions