Dynamic Ajax Content Help

[Quiksilver]

Hi,

I am currently using the script mentioned above ( http://www.dynamicdrive.com/dynamici...jaxcontent.htm )

And I am using this syntax to load my content

<script type="text/javascript">
ajaxpage(rootdomain+'/v3/bin/current.php','right')
loadobjs(rootdomain+'/v3/main.css')
</script>
<div id="right"></div>

Obviously the CSS is not loading and IE reports an error as "object expected"

I guess I am missing a semi-colon somewhere I guess or the above code is just plain wrong. Can someone please assist me with this?

Thanks!

[jscheuer1]

You can try:

<script type="text/javascript">
ajaxpage(rootdomain+'/v3/bin/current.php','right');
loadobjs(rootdomain+'/v3/main.css');
</script>

But I think you may need:

<script type="text/javascript">
onload=function(){ajaxpage(rootdomain+'/v3/bin/current.php','right');
loadobjs(rootdomain+'/v3/main.css');
}
</script>

Even that won't work, or will cause other problems, if there are other onload events in the body tag or scripts on the page. A quick check of the script appears to have none of these but, I may have missed something. Also, I have no idea if you are running other scripts on your page. There are workarounds if onload conflict is at issue. Please provide a link to you page.

This may work as well:

<div id="right"></div>
<script type="text/javascript">
ajaxpage(rootdomain+'/v3/bin/current.php','right');
loadobjs(rootdomain+'/v3/main.css');
</script>

[Quiksilver]

Thanks for the info however it is not applying CSS to the included page only unfortunately. It is applying it to the entire page

[Twey]

It will do that. The only way around it is to edit the stylesheet and put "#right" before each selector.

[jscheuer1]

It will do that. The only way around it is to edit the stylesheet and put "#right" before each selector.

Twey is absolutely correct about this. And, once you have done that, there is no reason you cannot hard code the stylesheet to the 'top' page and dispense with loadobjs() altogether. For finer tuning (having the styles only apply to certain ajax loaded content), you would need to provide a class or id for all objects on the desired content pages and edit your selectors and ajax markup accordingly. What the loadobjs() function does is add the call for the script or stylesheet to the head of the 'top' page. The result is little different than if the stylesheet was hard coded onto the 'top' page. There are some minor variations in this as it is applied to scripts but, they are minor. With stylesheets, it is virtually the same as having the stylesheet linked to the 'top' page to begin with.

The script's author explains in another post that this facility was added to these AJAX scripts as a convenience, not as anything for complex effects. For that, one still needs to rely upon good old fashioned ingenuity and Twey's idea is a very good one here.