Refresh DIV from php-file loaded via ajax/jQuery?

Hi everyone,

I’m pretty new to JavaScript and jQuery but worked my way through be “Novice to Ninja” Book… however, I am obviously not a Ninja, yet.

I have my site all set up with a horizontal accordion menu and a content area into which I load a DIV via jQuery from an external php-file.
Let’s say I have the content of one category loaded and I offer two links to switch between subcategories. Now of course I could simply have the content in different DIVs - both loaded and only one at a time visible and toggle. But the markup is always the same, only the text in different. So I would prefer not to repeat the markup and instead define the text through a php-variable and an if-else-construction. To achieve a result, I would need to reload (or rather reparse) the already loaded php-file with the new condition when clicking on the subcategory.

Is there a way to “unload” the ajax-loaded file or reload it? I tried simply loading it again and also removing the DIV before that. But it didn’t work. Also now not solely the DIV is loaded but the whole page reloaded. Neither

e.preventDefault();

nor

return false;

would do it.

I have been mostly working with php and prefer it in these cases also in terms of progressive enhancement. But maybe I have to go for a totally new approach. I would be glad for any help.


/*  This is loading the default subcategory when clicking on the main category-button */
$('#contentcat1').html('').load('content.php?sid=1 #cat1');

/*  The category offers two links for subcategories */
$('#linksub1').click(function(){
			e.preventDefault();
			$('#cat1').remove();
			$('#contentcat1').html('').load('content.php?sid=1 #cat1');
		});
$('#linksub2').click(function(){
			e.preventDefault();
			$('#cat1').remove();
			$('#contentcat1').html('').load('content.php?sid=2 #cat1');
		});


//Depending on the definition of $sid the correct text is parsed into the markup

$sub_cat1_2_title_de = "Title B";
$sub_cat1_2_text_de = "Text B";
$sub_cat1_1_title_de = "Title A";
$sub_cat1_1_text_de = "Text A";

if ($sid=="2"){
		$sub_cat1_title = $sub_cat1_2_title_de;
		$sub_cat1_text = $sub_cat1_2_text_de;
	} else {
	        $sid = "1";
	        $sub_cat1_title = $sub_cat1_1_title_de;
	        $sub_cat1_text = $sub_cat1_1_text_de;
	}

I hope you understand what I am trying to do here…
Thanks :).

Obviously there was missing an “e”:


$('#linksub1').click(function(e){
            e.preventDefault(); 

But that didn’t change the problem. As far as I can tell, I am not able to select items that have been loaded via ajax. If I include the DIV via php and do the same selection it works. Is this a know problem? I can’t imagine, really…

The PHP-include is a work-around but I would be glad to know, if that is a general problem or not.

Anyone? Please!

OK. I guess I missed the live(); function. Hope it’s going to work now :).

Thanks anyway.

EDIT: Yupp, works now :slight_smile: