populating a drop down with Ajax? IE problems.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • bdbeames
    New Member
    • Jun 2007
    • 27

    populating a drop down with Ajax? IE problems.

    I have a page with google maps up and running. When a user clicks on a location from the map I would like to populate a drop down with data from the database related to that location. I have it up and working wonderful. Well that was what I thought until I tried it is IE. All that I get is an empty drop down. I know the problem is related to filling the element with the xmlHttp.respons eText, but no matter how many solution I have tried as suggested by google I still have no luck.

    main php page
    [php]
    <div style="width:33 0px; height:600px; float:left;">
    <div>
    <form id="pestForm" action="fruit.p hp?option=repor t" method="post">
    <fieldset style="width:28 0px;">
    <legend>Pest</legend>
    <div id="error"><?ph p echo $_SESSION[error]; ?></div>
    <p>
    <label for="pest">Pest </label>
    <select style="width:17 0px;" id="pest" name="pest" >
    <option value="">Select Pest</option>
    </select>
    </p>
    <p>
    <label for="biodate">B iofix Date</label>
    <input type="text" id="biodate" name="biodate" value="<? echo '01/01/' . date('Y'); ?>" size="10" maxlength="10" />
    <input type="button" style="border-width: 0px; height: 17px; width: 19px; background-image: url('/img/calendar1.gif') ;
    </p>
    <p>
    <label for="enddate">E nd Date</label>
    <input type="text" id="enddate" name="enddate" value="<? echo date("m/d/Y"); ?>" size="10" maxlength="10" />
    <input type="button" style="border-width: 0px; height: 17px; width: 19px; background-image: url('/img/calendar1.gif') ;
    </p>
    <div class="buttonbo x">
    <input type="submit" name="pSubmit" value="Submit" onclick="if (pestCheck() == false) return false;" />
    <input type="reset" />
    <input type="button" onclick="locati on.href='index. php'" value="Back" />
    </div>
    </fieldset>
    </form>
    </div>
    </div>
    [/php]


    javascript used when a location is clicked
    Code:
    // This function is called each time a station marker is added
    // it formats the station's tooltip and adds event listeners for click, hover, etc.
    function formatMarker(station) {
       var num = station.stn_num;
       var name = station.stn_name;
       var div_width = (7.9 * name.length) + 48;
       if(div_width < 110) div_width = 110;
       station.tooltip = "<div id=\"tooltip\" style=\"width:" + div_width + "px\">Num:"+num+'<br/>Name: ' + name + '</div>';
    
       // Add listener for marker click events
       // if a station icon is clicked, its corresponding id is displayed
       GEvent.addListener(station, "click", function() {
             setPest();
       });
    
       // Add listener for marker hover events
       // if the user hovers over a station icon, information about the station is displayed
       GEvent.addListener(station,"mouseover", function() {
             showTooltip(station);
       });
       GEvent.addListener(station,"mouseout", function() {
             globaltooltip.style.visibility="hidden";
       });
       return station;
    }
    
    function setPest() {
       var xmlHttp = false;
       try {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
          try {
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
             xmlHttp = false;
          }
       }
    
       if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
          try {
             xmlHttp = new XMLHttpRequest();
          } catch (e) {
             xmlHttp = false;
          }
       }
    
       if (!xmlHttp && windos.createRequest) {
          try {
             xmlHttp = window.createRequest();
          } catch (e) {
             xmlHttp = false;
          }
       }
    
       //xmlHttp.overrideMimeType('text/xml');
    
       var url = "includes/ajax.php";
    
       xmlHttp.onreadystatechange=function() {
          if(xmlHttp.readyState==4) {
             //alert(xmlHttp.resonseText);
                var spanElement = document.getElementById('pest');
                spanElement.innerHTML = '';
                try {
                   spanElement.innerHTML = xmlHttp.responseText;
                } catch (e) {
                   var wrappingElement = document.createElement('div');
                   wrappingElement.innerHTML = xmlHttp.responseText;
                   spanElement.appendChild(wrappingElement);
                }
          }
       }
    
       xmlHttp.open("POST",url,true);
       xmlHttp.send(null);
    }
    php code that queries the database includes/ajax.php
    [php]
    <?php
    $query = "SELECT pest_id, name FROM pests;";
    $result = pg_query($query );

    header("Content-type: text/xml");
    $pest .= "<option value=''>Select Pest</option>\n";
    while($info = pg_fetch_row($r esult)) {
    $name = htmlentities(tr im($info[1]));
    $pest .= "<option value='$info[0]' >$name</option>\n";
    }

    echo $pest;
    exit;
    ?>

    [/php]

    You help is welcome.

    Here is the link if you want to try to see my problem. The error is only seen in IE
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    The link isn't working, so can you show how you call formatMarker()?

    Comment

    Working...