Content doesn't reload into div in IE

[kyern]

I asked this in the ajax forum but it doesn't look like any questions have been answered in there in quite a while.

I have a really odd problem. I have a script that works in Firefox but doesn't in IE. There are no errors in firebug.

All it does is make a request to a page to see if there are any new items, if the value is greater than the one stored then it makes a new request for the content. I am running out of ideas on what I can do to make this work in IE.

Thank You!

David

        var whiteboard_total = 0;
        
        function makeRequest(url) {
            var http_request = false;

            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                http_request = new XMLHttpRequest();
                if (http_request.overrideMimeType) {
                    http_request.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) { // IE
                try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }

            if (!http_request) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            http_request.onreadystatechange = function() { checkTotal(http_request); };
            http_request.open('GET', url, true);
            http_request.send("");
        }
        
        function checkTotal(http_request) {
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    if (whiteboard_total >= 0) {
                        temp_total = parseInt(http_request.responseText);
                        if (temp_total > whiteboard_total) {
                            whiteboard_total = temp_total;
                            var random_num = (Math.round((Math.random()*1000)+1))
                            var url = "whiteboard_output.asp?division=[%division%]&random=" + random_num
                            getContent(url);
                        }else{
                            whiteboard_total = temp_total;
                        }
                    }
                    setTimeout("makeRequest('whiteboard_total.asp?division=[%division%]')", 5000);
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
        
        function getContent(url) {
            var http_request = false;

            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                http_request = new XMLHttpRequest();
                if (http_request.overrideMimeType) {
                    http_request.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) { // IE
                try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }

            if (!http_request) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            http_request.onreadystatechange = function() { updateContents(http_request); };
            http_request.open('GET', url, true);
            http_request.send(null);
        }
        
        function updateContents(http_request) {
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    document.getElementById("content").innerHTML = http_request.responseText;
                    self.focus();
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
        window.onload = function() { makeRequest('whiteboard_total.asp?division=[%division%]'); };

 

[theniteowl]

You have not stated what the problem is other than it is not working in IE.
Do you get errors? At what point does it fail?
Is it getting to a point of executing the external page to check for new values or failing before that?

It could just be a matter of your browser detection failing. You can test to see if the external page is called or not to know if the call worked or not and you can alert out the returned values to see if you are getting the response you expect.

First step is to define the symptoms, then to isolate the cause, then find the solution.


At my age I still learn something new every day, but I forget two others.

 

[kyern]

Mainly the problem is that after the page loads the first time, it should check the value and if the value is higher, meaning that there are more entries that need to be loaded, then it should replace the content of the div. The same Javascript is used to load the page the first time. In both Firefox and IE it does this successfully. After the interval it checks the value, I can test for this on both and it is working. Now in Firefox when the value is higher in replaces the div, but in IE the div is not being replaced.

I guess I may just have to scrap the whole thing and resort to a refresh, I hate doing that though. I really only wanted to reload when there is a new entry.

Any insight would be fantastic.

David

 

[kaht]

Are you using the same xmlhttprequest object for each request to the server? In IE you have to use the .abort() method to set the object back to it's initial state before you can run another open and send on it.

In firefox, you don't have to do this - it will still run, although you'll still see a lot of errors in the javascript console.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[theniteowl]

kaht, I use a script that makes repeated calls to an ASP page to write data into the database and have not run into problems not issuing .abort(). See my code below.

My app is IE specific so I do no browser testing, etc.
Is the implementation of my code correct or am I skirting possible failure in the future?
Is it that using the line:

oXMLHTTP.open( "POST", sURL, true );

is compensating for not using .abort() to refresh the object?
And while on the subject, should there be some sort of close command?

Not to hijack the thread, I just think that if my implementation works it may point to a solution for kyern.
I know little about AJAX and have only modified this code from a sample script elsewhere and so it may not be well formed and I would not know.

My functions:

var oXMLHTTP = new ActiveXObject( "Microsoft.XMLHTTP" );

function updateDB() {
  // Prepare the XMLHTTP object for a HTTP POST to our validation ASP page
  var sURL = '/scripts/adm_update.asp?T=' + cType + '&cid=' + cID + '&N=' + cName + '&A=' + cActive + '&W=' + cWhich;
  oXMLHTTP.open( "POST", sURL, true );
	
  // Define an event handler for processing
  oXMLHTTP.onreadystatechange = managestatechange;
	
  // Execute the request
  try {
    oXMLHTTP.send();
  }
  catch (e) {
    alert("Could not update database at this time.");
  }
}

function managestatechange() {
  switch (oXMLHTTP.readyState) {
    case 2, 3:
      // Display a progress indicator of some kind, informing the
      // user that you are checking to see if the UserID exists
      document.all.item("divProgress").style.display = "block";
    break;
    case 4:
      if (oXMLHTTP.responseText == "success") {
        updateArray();
        hideProgressBar();
      }
      else
        alert('An error has occured.\r\nYour data may not have been saved.');
      break;
  }
}

At my age I still learn something new every day, but I forget two others.

 

[theniteowl]

kyern, can you simplify your script so that rather than doing two lookups it does one lookup that returns new results only if new data is available? It would simplify your script.

Alert out the response from the server to see if you are actually getting back the data you expect (in IE) if the data has changed. If you know the data is coming back correct then you know the problem is with replacing the div content. If you do not get the data back then your div code may be fine and it is the second call back to the DB that is the problem.

At my age I still learn something new every day, but I forget two others.

 

[kaht]

I started making a custom ajax object to use for my ajax applications this past week, and that was one of the problems I ran into. When my code was similar to this:

var a = new AjaxObject(url, functionReference);
a.run();
//do some other stuff
a.setUrl(someDifferentUrl);
a.run();

I'd post the code for my AjaxObject, but it's not complete yet. I'll post it here eventually. But anyway, it would work fine in FF 2.0.0.1, but would crash in IE7. So, I had to put a check in at the beginning of the run method that was something like this:

this.run = new function () {
   if (xmlhttpObj.readyState != 0) {
      xmlhttpObj.abort();
   }
   xmlhttoObj.open(blahblahblah)
   etc.....
}

It didn't matter if the first request had completed or not, IE would not do anything until I reset my xmlhttprequest object. I've always used the cookie-cutter AJAX function that you see pasted everywhere on the internet, but just this week I started reading a bit more into it. It's funny that the good detailed information is pretty hard to find, yet there's 100s of 1000s of pages out there with the same copied and pasted function to make an AJAX program.

For example, one issue I ran into with using the same xmlhttprequest object for multiple transactions is when you're making a utility similar to google request - onkeyup of a text field makes a call to the database to find matches as the user is typing. Using the same xmlhttprequest object for all those hits to the server causes huge overlap, because most people type faster than the object could complete it's request. So, by the time the object gets down to it's readystatechange handler, the next keyup stroke is creating a new request (and aborting the old one with the code I posted above), so it was causing lots of problems with overlap. The solution? Make synchronous requests instead of asynchronous requests. This was no problem, it's fairly well documented: xmlhttpObj.open("GET", url, [!]false[/!]) does the trick. But there's just one problem - firefox doesn't trigger the onreadystatechange handler when you're in synchronous mode. So once the request is completed, my update function wasn't running. It took me hours to find this documented on the web somewhere. It seems like it's a common thing that would be mentioned anywhere a website talks about synchronous requests, but that was certainly not the case for me......

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]