Dynamic Ajax Content Refresh Error in IE

[Dark Wraith]

Good evening, and thank you for offering these forums for assistance.

I have been trying to implement the Dynamic Ajax Content script on a blog I administer. This will save me having to republish the template several times a day because of new content I have to insert, but I cannot get past a problem. The script runs fine when I first load the index page that it's in: the external htm file is pulled in perfectly. But when I hit the refresh button in Internet Explorer, I get a rather generic error message, and even the DIV that's supposed to be the container for the file (which is really nothing more than some HTML and text) doesn't show up when the full page finally loads. Below is the code snippet as I have implemented it:

<script type="text/javascript">
ajaxpage(rootdomain+'/quotenow.htm', 'quoth') //load "quotenow.htm" into "quoth" DIV
</script>

<div id="quoth">
</div>

The script itself in the header section is identical to that on the Dynamic Drive page. Note that this is the implementation that simply automatically loads an htm file without any action by the end user.

Interestingly, the same problem was showing up in Firefox, too, until I noticed that I should be using the rootdomain variable since my Webpage is called both with and without the "www" before the domain name.

So what's going wrong? Is it that part of the initializing script where it checks to see if the page has already been loaded?

If you could help me with this, I would be grateful. Also, I am wondering if this script can be used to call more than one file. In other words, could I load content into, say, sequential DIVs by writing the script above more than once, inserting the appropriate filename and target DIV in each? This is not such an important matter, since I could simply put everything I need to load into one htm.

Again, thank you in advance.

[ddadmin]

Hi;
can you post a link to the problem page? That's probably the quickest way for me to see the problem. Only thing I can see so far is to make sure the DIV is defined first before calling the ajax function, so:

 <div id="quoth"> 
</div>
 
<script type="text/javascript">
ajaxpage(rootdomain+'/quotenow.htm', 'quoth') //load "quotenow.htm" into "quoth" DIV
</script>

[Dark Wraith]

Good morning, Dynamic Drive Administrator.

I was concerned about not posting the site with my initial question. You can find it at http://dark-wraith.com.

The problem is that this is a blog, so when you see the source code, you are seeing the result after pseudo-XML tags have been populated from a server at one of Google's facilities called Blogger. Fortunately, the CSS is fairly obvious, as is the side column where I was planning to use the script, which by the way isn't there right now because of the trouble it was causing. However, you'll be able to see that I was planning to put the script right at the beginning of the sidebar frame and then call it immediately for the first DIV (the "quoth" DIV, which is merely a quote of the day, which would be ideally suited for a simple AJAX upload of content to the DIV).

That "quoth" DIV, by the way, is defined in the CSS, which I shall immediately admit needs to be cleaned up, what with some old parents and their children that are no longer used.

I am hopeful that you can sort through the populated end-user code to see the basic structure, which is actually fairly straight-forward: nothing but one DIV after another, some of which contain calls to Blogger files, and some of which are content (which is exactly why I want this AJAX script to work, so I can get that content out of the template, itself).

Once again, I thank you for your help.

[Dark Wraith]

Good evening, Dynamic Drive Administrator.

As an addendum to the supplemental and original information I posted previously, I must amend my statement about the extent of the problem: it is occurring both in Internet Explorer and in Firefox: the called page loads properly the first time, but on REFRESH, the file cannot be found, and an error results in the loading of the page in which the content call was made. It also appears that the DIV statement in which the file is supposed to load becomes defective because certain features of it (a bottom border, specifically) aren't showing up in the Web page. This seems to indicate that even the container DIV isn't being recognized as it is defined in the CSS.

I have tried several variations on the called file, making it a very simple htm, then trying it with its own CSS (just the components of the main page CSS that would be necessary within the relevant DIV container), but none of these attempts has worked.

Is it something about the rootdomain that actually changes when a REFRESH is executed? Would that make the variable rootdomain+ look in the wrong place? I am at a loss.


Again, your assistance is most appreciated.

[ddadmin]

Hi:
I've checked out your page's source, though without an actual example of the script being used, it's hard for me to try and duplicate your error. Is it possible for you to create a test page with the ajax script on (and that tries to include an external file unsuccessfully) I can check out? I also assume both IE and Firefox gives you an error when the page is refreshed, but only after the page is refreshed...

[Dark Wraith]

Good morning, Dynamic Drive Administrator.

What I shall do is put the script into the Web page, itself, for a couple of hours this afternoon. Although it will cause an error message for those reloading the blog, it doesn't seem to be one of those catastophic errors that create a cascade of errors behind it. This is probably one of those errors that's going to have to be seen in the context of the scripts, XML calls, and CSS that are particular to the page, so you'll have to see it as a "live fire" exercise, as it were.

The script will be inserted at 3:15 p.m. EST and I shall leave it there until 11:00 p.m. EST this evening.


Again, and as always, I am grateful for your help.
------------------------
Afternoon Update:

I have inserted the code into the Webpage, so it is available for inspection. You will find that, when the page loads for the first time, it loads properly, with the content flowing perfectly into the DIV. However, whether using Internet Explorer or Firefox, hitting REFRESH causes an error, and the content does not flow into the DIV.

Now, here's something I just noticed: if I wait awhile (perhaps 15 minutes or so) and then hit the REFRESH button, the page loads properly once again! At least that's what appears to have just happened. Now, that's a twist I wasn't expecting at all.

I shall leave it in your able hands to figure out what I can't seem to see going on.

[Dark Wraith]

Good morning.

I have decided to leave the code in the Web page for the time being. I am entirely mystified because, as I noted above, the error occurs in Internet Explorer and Firefox only when the browser REFRESH is used very soon after the original page load. I don't have the timing down, but it seems that the error happens with page refreshes within five to ten minutes. Because I have a current notice warning readers that this could occur, I can leave the script in despite the potential for the error. Within a few days, I must resolve the matter, of course.

Any suggestions you can offer will be welcome.

[ddadmin]

There are two potential problems I see on your page, one of which I've already mentioned above.

1) In your source, the DIV you're using to contain the ajax content needs to proceed the calling of the script. In fact, to be safe, move the ajax call to the end of your page:

 
<div id="sidebar">
<div id="quoth">
</div>
" 
"
//////End of page
<script type="text/javascript">
ajaxpage(rootdomain+'/quotenow.htm', 'quoth') //load "quotenow.htm" into "quoth" DIV
</script>

2) If after trying the above it still doesn't fix the problem, try cleaning up the source of your external file a bit: http://dark-wraith.com/quotenow.htm Specifically, remove the CSS on the page, and call it as an external CSS file as discussed under "Load page and external CSS/JS link" at the bottom of this page: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Please let me know how it goes,

[Dark Wraith]

Good evening, Dynamic Drive Administrator.

Thank you for the assistance. I shall make the changes tomorrow morning. I suspect that your first suggestion is the one that will work. That CSS in the quotenow.htm was an afterthought: I had tried it with that CSS after a simple, "flat" little htm file had caused the error. The necessary CSS is in the main page CSS, anyway. Interestingly, the error happened exactly the same whether that CSS was in there or not. Surprisingly, the problem was there without being any better or worse even when I called a pure ASCII text file (quotenow.txt). This is actually kind of interesting for future reference because it looks like your script works even when calling plain text files (rather than htm, js, or css files).

I have another script that has to be at the end of the page, too. I am unfamiliar with the reason for this architecture, but I'll bet putting the AJAX script down there is going to do the trick. I shall let you know in the morning. And if that works, then I'm going to try to use the script in a chain to call content for sequential DIVs along the sidebar, thereby completely removing content from the index page.

Should all of this work, I shall save you a plate of Thanksgiving turkey from tomorrow's holiday meal.

Thank you, as always.

[Dark Wraith]

Good evening, one last time.

Your finding concerning what was wrong with my implementation of the AJAX dynamic content script was on the mark: I had not put the script at the very bottom of the code of the main page, and this was causing it to operate improperly. Once I had put it where it was supposed to go, it worked just fine.

Here are the observations I now have for anyone who's interested in using the script.

First, once the primary javascript is put into the HEAD section of the main page, it can be executed to call htm files over and over again, sending each to its own DIV container.

Second, there are two limitations I have found. The first is that, like all javascripts, it slows down the load of the main page into which the dynamic content is to be loaded. This slowdown increases markedly as the number of calls increases. I am currently calling six htm files, sending them to more or less successive DIV containers, and the load time has increased to the point that it is almost (and I emphasize almost) unacceptable. The second limitation is that I cannot call htm files that have their own javascripts inside them. One DIV container in my blog has a wonderful Dynamic Drive script, but when I try to pull that content in as dynamic content htm, the script fails to execute. I'm not sure if there's a way around this limitation, and it's frustrating because that was one of the most important reasons for implementing AJAX: by separating that script and its contents, which I must update at least once a day, from the main template, I wouldn't have to be constantly republishing the main blog code all the time, a perilous task given that the publishing of the blog template has to go through a gruesomely long server grind that all too frequently "loses" part of the main page code during the publishing (upload) process.

I know that js scripts should be loaded separately, but this particular script (as is the case with all Dynamic Drive scripts) is just open code, not a js file that can be called. I shall try to experiment with it to see if there's a way to get it to come in via AJAX and still function properly.

Beyond my few beefs, which are entirely particular to the ambitions I have for AJAX, I have to once again compliment Dynamic Drive for providing timely and useful code for Web page developers. There is no other source of javascripts that I have found where the scripts work so reliably.

Again, I thank you.