Dynamic Ajax Content: Object Expected error

[dmwhipp]

1) Script Title: Dynamic Ajax Content

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

3) Describe problem: I'm receiving an Object Expected error. Here is the test page: http://www.summerfoodflorida.org/test.html

I believe this is due to two issues:

I'm not sure how to code the page so the external pages have CSS styling. The script page (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) has an example when using a regular link, but I'm using the drop down menu where the file loads by simply selecting it.

I changed the following coding on the test page from this:

function loadobjs(){
to this:

function loadobjs('/styleframe.css'){



The other issue might be that the external page I'm calling contains a Google batchgeo map using iFrame. Here is the external page I wish to load:
http://www.summerfoodflorida.org/test1.html

Any help with this would be greatly appreciated.

Thanks,
Deborah

[jscheuer1]

#1 is a no-no, it breaks the entire script. Return it to the original.

Frankly my feeling is that the loadobjs() function in this script is a bit of a red herring. It only really saves loading time initially if what it loads is large. But that increases the chance that what it loads won't be ready in time.

If you want that stylesheet on the page, just use an ordinary stylesheet link:


<link rel="stylesheet" href="/styleframe.css" type="text/css">

put it after:


<link rel="stylesheet" type="text/css" href="/style.css">

It's so small that it won't hurt anything even if it's never used.

However, it's rule:


body { background-color:#fff; font-family:arial,verdana,sans-serif; font-size:13px; }

will affect the 'top' page (test.html) and would have done so regardless of how it was loaded, be that manually as I'm recommending, or via loadobjs() if used properly.

What's the purpose of that style? Are you trying to influence test1.html or batchgeo.com/map/summerfood2010_orange?

You cannot do the latter. The former should follow the existing styles on the 'top' page (test.html). If these are not sufficient, styles for it should be for the elements in it. But I see the only elements in it are the iframe and a two p's and a small. These should be automatically styled to match any styles for these on the 'top' page. You can use inline style on test1.html, or use the container child selector on the 'top' page, ex:


#contentarea p {
color: red;
}

By the way, since it's an AJAX import, ideally it's entire contents should be only:


<div><p><iframe src="http://batchgeo.com/map/summerfood2010_orange" frameborder="0" width="100%" height="550" style="border:1px solid #aaa;border-radius:10px;"></iframe></p><p><small>View <a href="http://batchgeo.com/map/summerfood2010_orange" target="_blank">ORANGE COUNTY Summer Food Pgrm – OPEN SITES 2010</a> in a full screen map</small></p></div>

If you give that div an id, you may use it as the parent in the child selector.

But you're probably OK with what you have, and can skip entirely the loadobjs() function and skip entirely adding that stylesheet link manually.

Just remember to return the script code to the original.



Now on to #2. Since, as far as I can tell, there's no javascript on test1.html, it should/could be fine. The map iframe should load up. It will take whatever time it takes though. Try it and see.