jQuery/Ajax reload problem...

[hookedupphat]

Hi, i'm really hoping someone can help me, I'm new to jquery so i'd really appreciate it. (I've tried searching google and the forum, but i'm not sure what to search for)

Basically I have a calendar with a link to go to the next or previous day. What i have below works once, but once the ajax page


<script language="javascript">
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='images/ajax.gif' alt='loading...' />";

// load() functions
var loadUrl = "includes/cal.php";
$("#load").click(function(){
$("#cal_content").html(ajax_load).load(loadUrl, { 'option': ["tom"] } );

});

});
</script>

<div id="cal_content">

<a href="#" id="load">Next</a>

</div>

// includes/cal.php

<div id="cal_content">

<? if($_POST['option']...blah blah blah ?>

<a href="#" id="load">Next</a>

</div>




Obviously there's a lot more code in these files I did not include, but that's what you need to know. It is loading cal.php into the dom just fine, but once it's in there, it doesn't work. I've tried using class instead of id values, but it does the same thing.

Can anyone help me please?

[tomws]

Are you debugging with Firefox and Firebug? You should be. That will help you catch a lot of problems and will show if you have a javascript problem.

If I understand your code correctly, you may be building some spaghetti code in the HTML. It looks like you're setting the #cal_content inner html to include another #cal_content div on each click. If using IDs, that could mess things up. You said you've tried classes, but is that for the anchor or the div (or both)? Your statement that "once it's in there, it doesn't work" makes me think your code is dying with an unseen javascript error.

Either way, if you're going to use .html(), your remote (ajax) function probably shouldn't return the exact same div wrapper - only the contents for the div you already have in place.