Log in

View Full Version : Javascript in ajax loaded page


legend.raju
07-21-2010, 10:22 AM
Hey, my site's setup is like this
<html>
<div> content </div>
<a id="a1"> a </a>
<script>
get("a1").onclick = load "response" to content div innerHTML;
get("a2").onclick = load "a diff response" to content div innerHTML;
</script>
</html>

The file that is loaded is in a sub folder ./contents/sample/index.php
now in that "sample/index.php" I included something like this
<a id="a1">click here</a>

This is not working ..!
Im using the jquery.load() function to call the ajax page. As far as my knowledge, by loading ajaxed content to innerHTML, css and javascript should work if defined in the main index file and not in the file being fetched.
jscheuer1
07-21-2010, 03:58 PM
Use jQuery's live() (http://api.jquery.com/live/) to assign events to content that might show up later.

Also make sure that when importing content you are not ending up with more than one element with a given id on the page.
legend.raju
07-21-2010, 07:08 PM
Solved it .....
I was using jQuery load()

the bug was here in the function declaration

i declared like this

window.onload = function(){

get("link").click = loadAjax;
function loadAjax(menu){
$.load()// to get content
}
}

so the file that is loaded was not able to access the function .. So put that out of the onload event handler.
then it worked...

Have one more doubt.
this worked when using jQuery
the ajax loaded page :
<a id="aa" onclick="abc()">aaa</a>
<script>
function abc(){
alert("came here");
}
</script>

and this did not work
in the main page
<script>
window.onload = function(){
$('a').click(clickHandler);
}
function clickHandler() {
$.load(url);
}
</script>

and in the ajaxloaded page
<a>xxx</a>