Firefox not updating the DOM (I think)

[dcostalis]

I have a site that I am currently working on, with the development located at:
http://whathuhstudios.com/westside_dev/index2.php

The problem I am having is on the "find aid now" page. If you click "find aid now" a search filter comes up, and when a category is clicked, it runs another ajax function that filters the providers. In IE, it works like a charm. It's fast and easy.

Firefox however runs into all kinds of problems, and instead updates the innerHTML in the "body" div instead of the "resultscontain er" div that it is told to. It's much easier seen than explained.

If anyone has any insight into this, I would gladly pay you in $1,000 worth of Skittles.

This is loaded into <div id = "body">

<div style = "text-align:center;">
        <p>Select the type of service you desire from the list of categories</p>
        <p> 
         <form name="formid" id = "formid">
          <select name="service" size="10" multiple="multiple" onchange="javascript:prepare(); sndReq(checked_list('service',1), 'providerlist.php', 'resultscontainer');">
            <option>Child Care</option>
            <option.........etc......../option>
            <option>Youth Services</option>
          </select>
          </form>
        </p>
</div>
<div id = "resultsbox" style = "text-align:center;">
    <div id = "resultscontainer">
 
    </div>
</div>

This is the relevant javascript that is called:

function sndReq(request, ajax_file, targetid, ext) {
        if (http.readyState) 
            if (http.readyState != 4) return;
            var requesturi = "ajax/" + ajax_file + request;          
        http.open('get', requesturi, true);
        http.onreadystatechange = function(){ handleResponse(targetid) };
        http.send("");
} 
 
function handleResponse(targetid) {
    if(http.readyState == 1 ) {
        document.getElementById(targetid).innerHTML = "<img src = 'images/progress.gif' title = 'loading' alt = '[loading]' / > <br/> Sending Request";   
    }
    if(http.readyState == 3 || http.readyState == 2) {
        document.getElementById(targetid).innerHTML = "Receiving Data From Server";   
    }
 
    if(http.readyState == 4) {
                  if (http.status == 200) {
                    var response = http.responseText;
                     document.getElementById(targetid).innerHTML = response;     
                    targetid = "";
                } else {
                    alert(http.status);        
                }
            } 
    }

[drhowarddrfine]

You have a lot of html errors.

[dcostalis]

You have a lot of html errors.

Umm.... thanks for that enlightening post....

The html isn't perfect or validated, but its pretty clean. If this is somehow relevant, please elaborate.

[acoder]

What is the format of the response? I assume it is just HTML? You may need to override the mime-type, see top of this page.