JQuery why is my content div not updated second time??

Still struggling with jquery

$(document).ready(function(){ 
	$('#testlink').click(function(){
	 // Code goes here
	 alert("testlink");
	 $('#textContent').load("content3.php");
	});
	$('#testlink2').click(function(){
	 // Code goes here
	 alert("testlink2");
	 $('#textContent').load("4.html");
	});

});

Code (markup):

When i first click testlink and then testlink2 #texContent div isn't updated?
when i try testlink2 and then testlink it updates?
example: bldd.nl/jsproblems/index3.html


How do i get this to work with get instead of load??

 

Doing a bit of debugging in Firebug seems to point to some interference by a script in your "content3.php" page.

What I did was test your $('#textContent').length after having clicked the second link. No problem, I can still access the div (ie. length = 1). But after having clicked the first link, $('#textContent') is empty (ie. it's null).

Sorry if this is not a complete solution, but I guess it's a clue.

 

hmm, i see what you mean.

Still haven't found a solution, but i do notice when i out-comment the mootools.js in content3.php it doesn't give me an error. So i guess you can't have a javascript in your ajax src file with load?

Anyone any ideas??

 

Maybe you should pass third parameter to load function (XMLHttpRequest) and check for its status. I have similar situation as yours, but in my code there were asynchronous load of content and I make it synchronous. The problem was solved.

 

You might also try using jQuery in $.noConflict mode - if you really need to use mootools on your PHP page...

Though i don't think there is anything you can't do on the resulting PHP with mootools that you can't do faster and easier with jQuery.

One question - do you really need to return text/HTML? Is there anyway you can modify your server to just return JSON data and then simply use jQuery to put it back into the DOM?

I almost always use the full $.ajax call in jquery -- just because you can see what you are doing more easily, and make adjustments (you have control) - where the shortcuts hide too much (for my taste)

function linkClicked()
{
    $.ajax({
            type:"POST",
            url:"/path/to/content3.php",
            dataType:"json",
            success:ok,
            error:err
        });
}
function ok(rsp)
{
    // rsp is a JSON object from your server - jQuery automatically runs an EVAL on it
   // so you don't have to - you can just operate on it as a JavaScript Object
   $('#textContent').text(rsp.data);
}

Code (markup):

just output something like this for your response from the server...

{data:"what i want in the textContent box from the server",...any other object properties you need here }

Hope that helps!

 

hi kburb23,

tx for the reply

I am trying your suggestion (still learning jquery and the other js frameworks)
bldd.nl/jsproblems/index7.html
Unfortunatly, it gives me an error.

The reason i want to use mootools in content3.php, was the pagination js i found based on mootools. I am also trying to get thickbox.js (used in 4.html) working in an ajax layer.

I just need to get the javascript to work which belongs to the included file.