Dynamic Ajax Content and JQuery Script.

[GSimon]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: I need to use JQuery on an HTML page to toggle the Div on the page. That HTML page is being loaded onto another page using the Dynamic Ajax Content script. I am hoping to find a way to use JQuery with Ajax, as I understand the two aren't really all that compatible.

The HTML page with the JQuery code is here (working script): http://www.torontoclassfind.com/details/selectyourroom.html

The HTML page I am loading the other page onto is here (script not working): http://www.torontoclassfind.com/startpage.html

The menu list of building names will ultimately be links that will change the ajax page in the bottom left div. But for now I just have the one page being loaded into the lower left Div by default.

Any input on this would be appreciated :)!

Edit: Question has been answered and the content on the links posted have changed (just a note for future viewers of this thread who click the links and don't 'get' what my problem was).

[jscheuer1]

Not only do jQuery and AJAX get along, jQuery does AJAX, and in a much more robust manner than the Dynamic Ajax Content script. jQuery also has other ways of dealing with imported content from other scripts like Dynamic Ajax Content that are more cumbersome to setup using ordinary javascript alone.

A problem with any AJAX imported content that has scripts on it is that you are not going to get the onload or document ready events that you get when it's a standalone page. And often scripts on the imported page are not imported with it. If you use one of jQuery's AJAX functions you can specify a success function to run. It varies as to how this is best setup, but generally you would put the jQuery code you're using on the 'top' page and the document ready event for the external page becomes or becomes part of the success function of the jQuery AJAX method you're using.

There's another way for something as simple as what you're doing. On the 'top' page, add the highlighted as shown:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type='text/javascript'>

$('#firstfloor').live('click', function() {
$("#hello").toggle(this.checked);
});

$(function(){

$('#MenuList1').click(function() {
$('#BuildingsList1').show();
$('#BuildingsList2').hide();
$('#Buildings . . .

Using jQuery's live method you can assign behavior(s) to an element or elements that haven't arrived yet.

For more information on .live(), see:

http://api.jquery.com/live/

[GSimon]

Thanks John! That did the trick.

I was avoiding the idea of including the JQuery on the top page because (aside from thinking it wouldn't work for some reason) I am trying to export as much coding onto the Ajax pages as possible, and figured including it in the top page might get to cluttered. However the line of code I'm using is relatively short and I should be able to re-use the same code for multiple pages with the same script, so it's not an issue as I thought it might of been.

I'll look into the .live element also, am in the process of learning JQuery currently so hopefully I can wrap my head around some of the more obscure elements (to me at least) soon.

Sent you a tip