AJAX responseText and innerHTML

[Darkstar]

Let me start with the fact that I know responsetext is not a DOM object.

I got the following from a thread made earlier today, I was hoping it would solve all my problems by changing responseText into a DOM object, it didn't work or I didn't use it right.
[code]function htmlDom_html2dom(html){
  var obj = null;
  if(html.length > 0){
    obj = document.createElement('div');
    obj.innerHTML = html;
  }
  return obj.firstChild;
}[/code]

i used it in the following:
[code]  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      wootCache=htmlDom_html2dom(xmlHttp.responseText);
        document.getElementById('woottable').innerHTML = wootCache.getElementById('table');
      }
    }[/code]
and my browser returns
[quote]Error: wootCache.getElementById is not a function
Source File: ajax.js
Line: 49[/quote]

all I want is to not have to call a php page 3 times 3 different ways to get 3 different bits of information when I should be able to separate the page into 3 sections with HTML tags and parse it.  any thoughts?  I've hit a wall considering I never picked up JS too well, I prefer server-side scripting.

please help!

[irken]

Try doing an alert on obj.firstChild in your htmlDom function.. does it return blank? If it does, then the property getElementById is going to error.

Error: wootCache.getElementById is not a function

It looks as if it's returning a blank object.

[Darkstar]

i got an alert that says [object HTMLDivElement]

[irken]

Ok. Well, then there's something to work with atleast.

What exactly are you trying to archieve? What does the HTMLDivElement object contain? Kind of weird because HTMLDivElement inherits functions from HTMLElement, which contains the getElementById function, yet it errors saying it doesn't.

[Darkstar]

I have a php script that fetches information from a website, parses it, and saves it to a file.  If the page is accessed within the next 90 seconds it will use the information cached in the text file to generate the page, otherwise it'll fetch the site again, parse and save.  Originally I was using a simple meta refresh to reload the page and run the script again.  Reloading the page slowed it down a bit and also would stop refreshing if it encountered an error such as the destination page being unreachable.

I figured by using AJAX I could not only load a portion of the page, making it faster, but also have it keep from stopping upon encountering an error.  Since the JS timer will still be running, it can recover just by calling the AJAX function again.  The script returns the information in 4 div tags.  The first is the title, the second is part of the body, the third is the last time the cache was updated, the last is the new timeout value for the timer.

if i don't parse the HTML returned by the AJAX then I'll have to call either 4 different pages or the same page 4 times with different GET variables just to get all the information i want.

I hope that was clear enough

[roopurt18]

Darkstar, if you don't currently use it, get Firefox with the Firebug plug-in.  I'm still fairly new to Javascript and always found it a pain to figure out which properties and methods were supported by my javascript variables.  Firebug is a very useful plug-in with a great javascript debugger.  It's made my javascript development so much easier.

(EDIT)  There are a couple noteworthy items about that function and the original thread has been updated to reflect them.

[Darkstar]

ah, that's a great bit of info.  I'll try that, thanks.  If you can think of anything to fix my script as well I would be grateful.  I'll keep messing with it in the meantime.

[Darkstar]

Thanks for the tip on firebug!  it really helped, it listed everything in your obj variable and i realized i could use it to return specific parts of the html, such as childNodes.  I gave it an extra parameter and seeing as i know exactly how many fields I'm calling and what order they're in i can use a simple call of the modified htmlDom_html2dom();

here's my modification:
[code]function htmlDom_html2dom(html,idNumber){
  var obj = null;
  if(html.length > 0){
    obj = document.createElement('div');
    obj.innerHTML = html;
  }
  return obj.childNodes[idNumber].innerHTML;
}[/code]

[roopurt18]

Just don't forget to periodically check your work in IE.  A lot of times I'll do something using firebug that works great in FF and then won't work for crap in IE.  Then I have to modify it until it works in both.  So far I've been able to do it without testing against a specific browser though.

Also, I pull out a lot less hair now that I have firebug.  If you don't have it, there's another great plug-in called Web Developer or something to that effect.  Adds another toolbar with all sorts of handy features.

[Darkstar]

good call. IE seems to process the JS differently.  I hate IE.  It didn't process the page title as a part of the responseText and on top of that it jumps the gun trying to replace HTML items before they've finished loading.  I had to make the page title another div and add a delay for the first loading of the index.  At least it seems to work on both browsers now.

[Darkstar]

as it turns out, IE has another flaw when it comes to AJAX.  it refuses to fetch the actual content on the fetched page but will instead use the last cache of it.  I searched google for a minute or two and came up with the following:
[code]setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");[/code]

i just inserted it into:
[code]  xmlHttp.open("GET",urlFetch,true);
  xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
  xmlHttp.send(null);[/code]

and voila!  no more cache

[irken]

[quote author=Darkstar link=topic=124453.msg516199#msg516199 date=1170089360]
as it turns out, IE has another flaw when it comes to AJAX.  it refuses to fetch the actual content on the fetched page but will instead use the last cache of it.  I searched google for a minute or two and came up with the following:
[code]setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");[/code]

i just inserted it into:
[code]  xmlHttp.open("GET",urlFetch,true);
  xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
  xmlHttp.send(null);[/code]

and voila!  no more cache
[/quote]

That's not an actual flaw. IE will cache all GET requests, AJAX or no ajax. If you use POST instead (even if you don't have anything that requires POST), the page should not get cached.

[roopurt18]

I arbitrarily decided to use POST for all of my requests; looks like I finally beat the 50/50 odds and saved myself a small headache.

Thanks to both of you though, for the extra information.

[Darkstar]

heh, well if it's not a flaw then it's simply a pain in the ass

[Darkstar]

would any of you happen to know how to force images to update?  if the image that's fetched via the script changes, my script will download the new one and save it with the same name as the old one.  is there a way to force it to refresh the image cache?

[roopurt18]

add a query string with the time to the image url

[Darkstar]

yea, i actually took care of it.  i also realized if you use the same query string it caches that as well.  so i can use the same query string until it's time to download a new picture from the original server and have it cache it until the new one is downloaded.  thanks for the help.