Dynamic Ajax Content

[pcbobsledder]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: I have a page where I am using the Dynamic Ajax menu like the page above does. However, I am having trouble getting a script to load when I click on the link.

Here is the page by itself looking the way it should. (notice the rounded corners around the colored boxes)

http://www.bobteamusa.com/you.html

Here is the Dynamic Page that calls the previous page

http://www.bobteamusa.com/50in50.html (click on "How to SPARK it up")
it shows the same page without the rounded corners. I've gone over the instructions a number of times.

the page calls up a JS named niftycube.js. I've tried the loadobjs('niftycube.js') but it didn't seem to work. I've tried a number of different combinations but nothing is working so far. Any help is greatly appreciated.
Thanks.

[jscheuer1]

There are no rounded corners on the base page that I can see in IE 6, FF 1.5.0.6, or Opera 9.01.

If you can get it working for the base page, you should be able to get it working in the AJAX page by setting up a polling function to determine when the new content has been added to the 'top' page and then running your rounded corners script's onload function. If there is css involved, that must be on the top page or added using loadobjs() as must the script.

[jscheuer1]

Also, there are other ways to do rounded corners that do not use javascript, only css and images.

[pcbobsledder]

hehe, I've been messing around with it a bit and I think you looked at the page while I was doing that.

The base page works fine now. But I still can't get it to work right in content page. I'm using the loadobjs but its just not working.

Also, I do realize there are a dozen ways to make rounded corners, but I can't seem to pull myself away from trying to figure this out. Its actually been quite a learning experience.


-Edit-
Update: I've successfully implemented a CSS with the loadobjs, but for some reasoon the script insn't loading. Do I have to make any special changes to the script, or to the base page?

[jscheuer1]

What you need to do is run this after the new content is added:

Nifty("div#nav20,div#nav21,div#nav22,div#nav23,div#nav24,div#nav25,div#nav26,div#nav27,div#nav28,div#nav29");

The way I've been using that has worked is to set up a polling function that tests for the existence of a unique id in the added content. I've found that to avoid a situation where the same content is added repeatedly, thereby 'fooling the poll', that this id must be removed prior to loading the new content, if it exist on the page. Add this function to a script block on your page:

function pollContent(id, state){
if (!document.getElementById)
return;
if (state&&state=='loading'&&document.getElementById(id)){
if (id=='nav29')
Nifty("div#nav20,div#nav21,div#nav22,div#nav23,div#nav24,div#nav25,div#nav26,div#nav27,div#nav28,div#nav29");
return;
}
else if (state&&state=='loading'&&!document.getElementById(id)){
setTimeout("pollContent('"+id+"', 'loading')", 60);
return;
}
else if (document.getElementById(id))
document.getElementById(id).id='';
}

And, where you have:

<a href="javascript:ajaxpage('you.html', 'rightcolumn'); loadobjs('layout.css', 'niftyCorners.css', 'NiftyLayout.css', 'niftycube.js', 'niftyLayout.js');" class="style11">How to SPARK it up!</a>

Change it to this:

<a href="javascript:pollContent('nav29');ajaxpage('you.html', 'rightcolumn'); loadobjs('layout.css', 'niftyCorners.css', 'NiftyLayout.css', 'niftycube.js', 'niftyLayout.js');pollContent('nav29', 'loading');" class="style11">How to SPARK it up!</a>

Notice that there are two calls to pollContent added in the above, one at the beginning of the javascript: href and one at the end. As explained, the first removes the polled for content's unique id if it exists and the second runs the code you have selected (red in the pollContent function) that is tailored to that content (the green test). You can use as many tests and actions in this part of the function as you need for other content but, this is all you need for the matter at hand.

[pcbobsledder]

WOW!! Above and beyond the call of duty. Thank you so much for that. It worked, as I'm sure you already knew.

I thought I was getting close, but I never would have come up with that. My skills are definitely not at that level yet. I guess I got in a little over my head, thanks for bailing me out.