Dynamic Ajax Content Refresh Error in IE

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.

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:

Code:

---

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

---

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.

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.

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...

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.

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.

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:

Code:

---


<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,

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.

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.

Hi. Glad you got it working at least. :) To answer your two concerns:

Quote:

---

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 is inevitable, as what you're doing is basically requesting the pages to be embed first from the client side to the server side, then served back to the client. If all you're doing is embedding external pages to the current as soon as the page loads (instead of dynamically based on user action), then Ajax isn't the best way to go about it, but rather something like SSI (server side includes) or PHP (include()). But I have to assume your pages don't support neither, so you're looking for a client side script for the task.

Quote:

---

The second limitation is that I cannot call htm files that have their own javascripts inside them. 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.

---

Well, any DHTML script theoritcally can be put inside a external .js file and work as if it's inline on the page. There are certain scripts that modify the page in a way that's not operable if contained inside a DIV, but for the most part, it should work. What's the script you're trying to call?

Good morning, Dynamic Drive Administrator. I am delighted that you are following up on my follow-up.

On the first matter, concerning the loading time for the page, you are right: this is inevitable, and it's really more a matter of the end-users catching up to the modern demands of Websites they visit. Although we cannot simply dismiss the millions of people who have slower connections based upon what remains at its heart a very old technology in telephony, we have to keep moving ahead in reliance on greater and greater general public access to faster means of connecting to the Web.

On the second point, I am using the Dynamic Drive "Fading Ticker Tape Script," which I modified so that, instead of fading, it "snaps" from one screen view to the next to the next and so on. In all, I embed about 35 snap views before it returns to the beginning. All of my efforts to pull in those 35 lines via an XML file have failed, primarily because (I suspect), I'd be executing a calling script within the Fading Ticker Tape Script, and succesfully running one javascript within another javascript is something I've never accomplished, not even once. (And I shall concede that years ago they should have euthenized us old FORTRAN programmers so we wouldn't have to suffer in the modern era of programming.)

Anyway, that Fading Ticker Tape script is just a gem: it loads quickly, even with dozens of items that include graphics, links, and straight text; and it's stable on every browser you could imagine. The problem, as I noted, is that pulling it into even a simple DIV container (which is all I need for it) via that AJAX Dynamic Content script keeps it from running. It just hangs at the line that reads "Loading Headlines" right before the script begins. That means I'm still stuck with having to leave the code in the main Web page and update it every day right there for the new items that are to be put in. Getting it into its own little htm file would have allowed me to update the content within the Fading Ticker Tape script without having to open that behemoth main Web page all the time.

If you have a suggestion, I shall do whatever I can to implement it. Obviously, this one is considerably more difficult than my last set of questions, which had to do with my not paying strict attention to the instructions to begin with. Should you have a thought on how to make the Fading Ticker Tape script execute within a file that would be called by the AJAX Dynamic Content script, please let me know.

Otherwise, I must thank you one last time for all the help you have so patiently provided.

Hmmm if you could elaborate on what you mean by:

Quote:

---

which I modified so that, instead of fading, it "snaps" from one screen view to the next to the next and so on

---

that would be very useful information before I look at whether the fader can work with the ajax script. Better yet, if you have the full source code to the modified script on a blank page, you can just post that URL as well.

Good evening, Dynamic Drive Administrator.

The script as modified can be opened with this link. This is a text file. The DIV container has this script with a header image above it, and that's all there is in the container.

The modifications do nothing more than hold the screen color at one value (instead of starting out at one value and fading to another), and make each successive headline "snap" in rather than fade in.

The part from
//Headlines

to

//****End News Feed****

is what has to be replaced every day, and it's only the latter part of each successive line that gets replaced. (I do this with a Word macro that calls an Excel file that puts the current elements into their places and turns the result into a text file. It's sort of like a cheap version of using the Excel file as an XML file, but that's all done within my own computer, which creates a text file to replace that part between those two annotations above.)

Anyway, I greatly appreciate the extended help.