CODEWITHSUNDEEP
phpjavascripthtmlajax
Ai Pragma
Ai Pragma

Reputation: 23

Works in Firefox & Opera, but not in IE8

1) This issue involves just one html webpage, lets call it "ajax.html".

2) I have AJAX functions in this webpage that work in both Firefox and IE8.

3) I now attempt generating just the option values of a dropdown list of dates using my ajax functions, and it works in Firefox & Opera, but not IE8.

4) The surrounding html code for the dropdown looks like this:

<select name="entry_7_single" id="entry_7" onChange="Ajax_PhpResultsWithVar('./secure/db/SummaryCls.php','entry_8','dateval',this.value)"></select>

The onchange call refers to an ajax function that successfully (both Firefox & IE8) populates a textarea (entry_8) with a description of an event associated with the date selected in this dropdown.

5) An onload call initiates the ajax function to generate the dropdown list values:

<body class="ss-base-body" onLoad="OnLoadWebPage()">

6) The js script that calls the ajax function is as follows:

function OnLoadWebPage()
{
    Ajax_PhpResults('./secure/db/GenDateListCls.php','entry_7');
}

7) Since it works in Firefox, but not IE8, I throw the output of the ajax function into a Firefox large textbox and I get the following:

<option selected value="8 JUN 2010">8 JUN 2010</option>
<option value="9 JUN 2010">9 JUN 2010</option>
<option value="10 JUN 2010">10 JUN 2010</option>
<option value="11 JUN 2010">11 JUN 2010</option>

8 ) There are over a hundred generated but you get the gist of what the ajax function generates. Next I will list the PHP function that outputs the above dropdown values:

<?php
include_once 'SPSQLite.class.php';
include_once 'misc_funcs.php';

class GenDateListCls
{
    var $dbName;
    var $sqlite;

    function GenDateListCls()
    {
        $this->dbName = 'accrsc.db';
        $this->ConstructEventDates();
    }

    function ConstructEventDates()
    {
        $this->sqlite = new SPSQLite($this->dbName);
        $todayarr = getdate();
        $today = $todayarr[mday] . " " . substr($todayarr[month],0,3) . " " . $todayarr[year];
        $ICalDate = ChangeToICalDate($today);
        $dateQuery = "SELECT dtstart from events where substr(dtstart,1,8) >= '" . $ICalDate . "';";
        $this->sqlite->query($dateQuery);
        $datesResult = $this->sqlite->returnRows();

        foreach (array_reverse($datesResult) as $indx => $row)
        {
            $normDate = NormalizeICalDate(substr($row[dtstart],0,8));
            if ($indx==0)
            { 
?>
<option selected value=<?php echo('"' . $normDate . '"'); ?>><?php echo $normDate; ?></option>
<?php
            }
            else
            {
?>
<option value=<?php echo('"' . $normDate . '"'); ?>><?php echo $normDate; ?></option>
<?php
            }
        }
        $this->sqlite->close();
    }
}
$dateList = new GenDateListCls();
?>

9 ) Here are the ajax functions, I created and used (of course, some portions are modified from examples off the web): 


function Ajax_XMLHttpRequest_Factory()
{   
   var ajxRequest;

   try
   {
      // Opera 8.0+, Firefox, Safari
      ajxRequest = new XMLHttpRequest();
   } 
   catch (e)
   {
      // Internet Explorer Browsers
      try
      {
         ajxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) 
      {
         try
         {
            ajxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } 
         catch (e)
         {
            // Something went wrong
            alert("Unable to create an XMLHttpRequest with this current browser.");
            return false;
         }
      }
   }

   return ajxRequest;
}

function Ajax_PhpResults(fname,elementID){

    var ajaxRequest = Ajax_XMLHttpRequest_Factory();

    // Create a callback function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById(elementID);
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
    }

    ajaxRequest.open("GET", fname, true);
    ajaxRequest.send(); 
}

function Ajax_PhpResultsWithVar(fname,elementID,varpassed,value){

    var ajaxRequest = Ajax_XMLHttpRequest_Factory();

    // Create a callback function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById(elementID);
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
    }

    ajaxRequest.open("GET", fname+"?"+varpassed+"="+value, true);
    ajaxRequest.send(); 
}

function Ajax_RunPhpOnly(fname){

    var ajaxRequest = Ajax_XMLHttpRequest_Factory();
    ajaxRequest.open("GET", fname, true);
    ajaxRequest.send(null); 
}

I appreciate any assistance on this matter.

My Background: To let you all know, I am a complete newbie to PHP, Ajax, & javascript, and learning it all on my own, no classes. My background is in Linux, Windows, C++, Java, VB,VBA,MS XML, & some html.

Upvotes: 0

Views: 646

Answers (1)

tau
tau

Reputation: 6749

Try not using innerHTML. IE historically does not allow you to innerHTML everywhere you would think possible. Instead try slower, clunkier DOM methods .appendChild(). For example, have the PHP return JSON or XML with the value/text pairs you need, then when you AJAX it do something like this:

PHP output (aka your http.responseText):

{value:"20100608",text:"date 1"},
{value:"20100609",text:"date 2"},
{value:"20100610",text:"date 3"},
{value:"20100611",text:"date 4"},
{value:"20100612",text:"date 5"}

JavaScript:

http.onreadystatechange = function(){
    if(http.readyState == 4){
        eval("var data = [" + http.responseText + "]");
        for(var i=0;i<data.length;i++)
            var t = document.createElement("option");
            t.value = data[i].value;
            t.innerHTML = data[i].text;
            document.getElementById("entry_7").appendChild(t);
        }
    }
}

I am not sure why you are experiencing the problem you are, but I am guessing it has to do with the innerHTML of a select element in IE. Try my above method and I'm pretty sure it'll work.

I hope this helps in some way.

Upvotes: 1

Related Questions