www.webdeveloper.com
Results 1 to 9 of 9

Thread: drop down population with ajax firefox not working i.e.ok

  1. #1
    Join Date
    May 2006
    Posts
    35

    Red face drop down population with ajax firefox not working i.e.ok

    The following code has been simplified to highlight the problem assume that response contains a string and passes the first if statement

    Code:
     if(response!="" || response != false) {
    	   alert("ok here rsponse = "+response);
             // UPDATE select box sel2 content
    		sel = document.cities.sel2;
    		 alert("ok here sel = "+sel);
    		
    			sel.options[0] = new Option("me","too");
    		
    	
             		document.getElementById("ajaxTest").innerHTML ="response";
          }
    in firefox the sel variable doesnt work but in i.e. it does..im a flash guy normally so am getting a grip on ajax hopefully. I'm wondering if I should use some kind of library or framework for the java script- ajax but for this would like the raw code for understanding.

  2. #2
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,403
    sorry, too little code to see the problem clearly. if i had a document, with a form named "cities" with a form element called "sel2" and used that dom to access it, it would work.

    id suggest looking at the error console in FF. when code doesnt work, there is a high chance the problem will appear in FF's error console.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  3. #3
    Join Date
    May 2006
    Posts
    35

    the source

    the getElementbyId is undefined for some reason, but its there ?

    ...
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript">
    <!--
    function createRequestObject() {
    var req;

    if(window.XMLHttpRequest){
    // Firefox, Safari, Opera...
    req = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
    // Internet Explorer 5+
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    // There is an error creating the object,
    // just as an old browser is being used.
    alert('Problem creating the XMLHttpRequest object');
    }
    return req;
    }

    // Make the XMLHttpRequest object
    var http = createRequestObject();


    function sendRequest(act) {
    //alert("fired "+act);
    //alert("send request");
    // Open PHP script for requests
    http.abort();
    http.open('post', 'modules/doit.php');
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.send('country='+act);
    document.getElementById("ajaxCountry").innerHTML=act;
    // document.getElementById("ajaxTest").innerHTML=act;
    http.onreadystatechange = handleResponse;
    }
    function setCity(act){

    document.getElementById("ajaxCity").innerHTML=act;
    }

    function handleResponse() {
    if(http.readyState == 4 && http.status == 200){
    //alert("ajax loaded "+http.responseText);
    // Text returned FROM the PHP script
    var response = http.responseText;
    // var response ="text~value|text~value|text~value|text~value|";

    if(response!="" || response != false) {
    alert("ok here rsponse = "+response);
    // UPDATE select box sel2 content
    sel = getElementById['cities'].sel2;
    //clear old content
    alert("ok here sel = "+sel);
    /* while (sel.options.length)
    {
    sel.remove(0);
    }*/
    //split the incoming string to create array arrOpt which contians the pairs of content

    sel.options[0] = new Option("me","too");

    /*var arrOpt = response.split("|");
    alert("ok here arrOpt= "+arrOpt);
    for(var i = 0; i< arrOpt.length-1;i++){

    var arrVal = arrOpt[i].split("~");
    sel.options[sel.options.length] = new Option(arrVal [0],arrVal[1]);
    }*/
    document.getElementById("ajaxTest").innerHTML ="response";
    }
    else{
    alert("response was equal to nowt ="+response);
    }
    }
    }

    //-->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>

    <body>
    Please select a country from the drop down box below.<br><br><form id="places" action="/landed.at/" method="post" name="form01"><select size="10" name="sel1" onchange="javascript:sendRequest(sel1.value)"><option value="1">Afghanistan</option><option value="2">Albania</option><option value="3">Algeria</option><option value="4">American Samoa</option><option value="5">Andorra</option><option value="6">Angola</option><option value="7">Anguilla</option><option value="8">Antarctica</option><option value="9">Antigua and Barbuda</option><option value="10">Argentina</option><option value="11">Armenia</option><option value="12">Aruba</option><option value="13">Ashmore and Cartier</option><option value="272">Zaire</option><option value="273">Zambia</option><option value="274">Zimbabwe</option><option value="275">Palestinian Territory, Occupied</option></select></form><div id='ajaxTest'>ggg</div>

    <form id="cities" name="form2" method="post" action="">
    <select name="sel2" onclick="javascript:setCity(sel2.value)">
    </select>
    </form>
    <br /><br />
    </body>
    </html>
    </td>
    </tr>
    <tr>
    <td colspan="3">
    <div align="left">
    <table width="100%" border="0" cellspacing="0" cellpadding="5">

    <tr>
    <td width="700">There are no items to display</td>

    <td valign="top"> <div class="moduletable">
    </div>
    </td>
    </tr>
    </table>
    </div>

    <br />
    <div align="center" class="header_right">
    (C) 2007 landed.at</div>

    <div align="center">
    </div></td>
    </tr>
    <tr>
    <td class="header_left" colspan="3"><a href="http://www.tri-x-directory.com/">Tri-X-Directory</a>
    <script type="text/javascript"><!--
    google_ad_client = "pub-5653652306821260";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90_as";
    google_ad_type = "text_image";
    google_ad_channel = "";
    //--></script>

    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <script language="javascript">
    var uri = 'http://impgb.tradedoubler.com/imp/img/507633/1173511?' + new String (Math.random()).substring (2, 11);
    document.write('<a href="http://clkuk.tradedoubler.com/click?p=4506&a=1173511&g=507633" target="_blank"><img src="'+uri+'" border=0></a>');
    </script>
    <div class="syndicate">

    <div align="center">
    <a href="index2.php?option=com_rss&amp;feed=RSS0.91&amp;no_html=1">
    <img src="http://localhost/landed.at/images/M_images/rss091.gif" alt="RSS 0.91" align="middle" name="RSS_091" border="0" /></a>
    </div>

    <div align="center">
    <a href="index2.php?option=com_rss&amp;feed=RSS1.0&amp;no_html=1">

    <img src="http://localhost/landed.at/images/M_images/rss10.gif" alt="RSS 1.0" align="middle" name="RSS_10" border="0" /></a>
    </div>

    <div align="center">
    <a href="index2.php?option=com_rss&amp;feed=RSS2.0&amp;no_html=1">
    <img src="http://localhost/landed.at/images/M_images/rss20.gif" alt="RSS 2.0" align="middle" name="RSS_20" border="0" /></a>
    </div>

    <div align="center">
    <a href="index2.php?option=com_rss&amp;feed=ATOM0.3&amp;no_html=1">
    <img src="http://localhost/landed.at/images/M_images/atom03.gif" alt="ATOM 0.3" align="middle" name="ATOM_03" border="0" /></a>

    </div>

    <div align="center">
    <a href="index2.php?option=com_rss&amp;feed=OPML&amp;no_html=1">
    <img src="http://localhost/landed.at/images/M_images/opml.png" alt="OPML" align="middle" name="OPML" border="0" /></a>
    </div>
    </div></td>
    </tr></table>
    </td></tr>
    </table>

    <script type="text/javascript">
    _uacct = "UA-543330-4";
    urchinTracker();
    </script></body>
    </html> [/CODE]

  4. #4
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,403
    hrm, im not tracking this problem. do you have the PHP page that you are posting your information to? im not getting to your error becuase i dont have access to that particular page.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  5. #5
    Join Date
    May 2006
    Posts
    35

    im not sure how it helps but...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    <!--
    function createRequestObject() {
       var req;
    
       if(window.XMLHttpRequest){
          // Firefox, Safari, Opera...
          req = new XMLHttpRequest();
       } else if(window.ActiveXObject) {
          // Internet Explorer 5+
          req = new ActiveXObject("Microsoft.XMLHTTP");
       } else {
          // There is an error creating the object,
          // just as an old browser is being used.
          alert('Problem creating the XMLHttpRequest object');
       }
       return req;
    }
    
    // Make the XMLHttpRequest object
    var http = createRequestObject();
    
    
    function sendRequest(act) {
    //alert("fired "+act);
    //alert("send request");
       // Open PHP script for requests
      http.abort();
       http.open('post', 'modules/doit.php');
       http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
       http.send('country='+act);
       document.getElementById("ajaxCountry").innerHTML=act;
      // document.getElementById("ajaxTest").innerHTML=act;
       http.onreadystatechange = handleResponse;
    }
    function setCity(act){
    	var P = document.getElementById('ajaxCity').value;
     document.getElementById("ajaxCity").innerHTML=act;
    }
    
    function handleResponse() {
       if(http.readyState == 4 && http.status == 200){
    	//alert("ajax loaded "+http.responseText);
          // Text returned FROM the PHP script
          var response = http.responseText;
    	// var response ="text~value|text~value|text~value|text~value|";
         
    	  if(response!="" || response != false) {
    	   alert("ok here rsponse = "+response);
             // UPDATE select box sel2 content
    		 var Q = document.getElementById('cities').value;
    		sel = getElementById['cities'].sel2;
    		 //clear old content
    		 alert("ok here sel = "+sel);
    		 /* while (sel.options.length) 
    		  	{
    			sel.remove(0);
    			}*/
    		 //split the incoming string to create array arrOpt which contians the pairs of content
    			
    			sel.options[0] = new Option("me","too");
    		
    			/*var arrOpt = response.split("|");
    			   alert("ok here arrOpt= "+arrOpt);
    			for(var i = 0; i< arrOpt.length-1;i++){
    			
      				var arrVal = arrOpt[i].split("~");
      				sel.options[sel.options.length] = new Option(arrVal [0],arrVal[1]);
    			}*/
    			 var R = document.getElementById('ajaxTest').value;
             		document.getElementById("ajaxTest").innerHTML ="response";
          }
    	  else{
    	   alert("response was equal to nowt ="+response);
    	  }
       }
    }
    
    //-->
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <?
    $query = "SELECT CountryId, Country FROM countries";
    	$database->setQuery( $query );
    	$rows = $database->loadObjectList();
    	echo "Please select a country from the drop down box below.<br><br>";
    	echo "<form id=\"places\" action=\"".$_SERVER["REQUEST_URI"]."\" method=\"post\" name=\"form01\"><select size=\"10\" name=\"sel1\" onchange=\"javascript:sendRequest(sel1.value)\">";
    	for ($i=0;$i<sizeof($rows);$i++){
    	$row = $rows[$i];
    	echo "<option value=\"".$row->CountryId."\">". $row->Country."</option>";
    	}
    	echo "</select></form>";
    		
    ?>
    <div id='ajaxTest'>ggg</div>
    <form id="cities" name="form2" method="post" action="">
      <select name="sel2" onclick="setCity(sel2.value)">
      </select>
    </form>
    <br /><br />
    </body>
    </html>

  6. #6
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,403
    it doesnt since that has PHP in it that i cant access. i may be able to troubleshoot a live page.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  7. #7
    Join Date
    May 2006
    Posts
    35

    Cool its just javascript error on html.

    I didn't think it helped, there is no live page its running localhost. But from the source which the php creates it should be possible to copy and paste the html and work from that ? ah! replace the database driven stuff with hard coded values and then we dont need a database

    This should be elementary since its a javascript error on plain html. Im going to start to work on a heard coded model and strip out the other stuff like I suggested above. I posted originaly in the hope that this was a common gotcha I never post and didnt originally want people to go through my code in that depth.

    thanks

  8. #8
    Join Date
    May 2006
    Posts
    35

    the html which isnt seen

    Code:
    <form id="places" action="/landed.at/" method="post" name="form01"><select size="10" name="sel1" onchange="javascript:sendRequest(sel1.value)"><option value="1">Afghanistan</option><option value="2">Albania</option><option value="3">Algeria</option><option value="4">American Samoa</option><option value="255">United States Minor Outlying Islands</option><option value="256">Uruguay</option><option value="257">Uzbekistan</option><option value="258">Vanuatu</option><option value="259">Venezuela</option><option value="260">Vietnam</option><option value="261">Virgin Islands</option><option value="262">Virgin Islands (UK)</option><option value="263">Virgin Islands (US)</option><option value="264">Wake Island</option><option value="265">Wallis and Futuna</option><option value="266">West Bank</option><option value="267">Western Sahara</option><option value="268">Western Samoa</option><option value="269">World</option><option value="270">Yemen</option><option value="271">Yugoslavia</option><option value="272">Zaire</option><option value="273">Zambia</option><option value="274">Zimbabwe</option><option value="275">Palestinian Territory, Occupied</option></select></form><div id='ajaxTest'></div>
    
    <form id="cities" name="form2" method="post" action="">
      <select name="sel2" onclick="setCity(sel2.value)">
      </select>
    </form>
    its this last sel which is coming up as undefined, maybe its to do with it being as part of a cms ?

  9. #9
    Join Date
    May 2006
    Posts
    35

    live link

    I have made it live now here, http://www.landed.at

    It has a new error now due to differences in the hosting pattern and database that I need to sort out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles