Firefox 3 and AJAX Form Updating

Hi guys, Right now I'm having a problem with a form that I use with AJAX to populate from a db.

So the thing is this:

I created a side form in a webpage, that uses AJAX to sort out office centers adding drop downs on the go to narrow the search. I IE7 works like a charm, and in FF2 also, the problem arised when FF updated to the version 3.0+ suddently the code stopped working.

It's not that It stopped working, in fact the drop dwons created by AJAX do show in the webpage... but when you send the form... the drop downs seem that never where in the form.

When I check the source code I doesn't show the new dropdowns anywhere in the code, but when Inspect the form element using firebug, IT does appear... I'm confused... before FF3 the code worked... I don't konw if it's a bug, or some bad coding practice that FF decided to stop interpreting it, anyway my boss is Pro IE so with this issu FF Is letting me down hehe

Do you know how could this thing be resolved, I'm not seeing other similar issues.

You can check the pages here:
http://test.abcn.com/locationResults.php

It's the drop down on the right that says "region"
//This is the JS AJAX code
 
var xmlHttp;
var scopeSel;
var regionSel;
 
function checkLocations(region, scope)
{	
		xmlHttp=GetXmlHttpObject();
		
		 if (xmlHttp==null)
		  {
		  	alert ("Browser does not support HTTP Request");
		  	return;
		  } 
		 var url="modules/selectLocation/checkZones.php?region=" + region + "&scope=" + scope;
		 scopeSel = scope;
		 regionSel = region; 
		 
		 if (region != "null")
		 {		 
			  if (scope == "cities" || scope == "states" || scope == "countries")
			 {
				xmlHttp.onreadystatechange=stateChanged;
			 	xmlHttp.open("GET",url,true);
			 	xmlHttp.send(null);
		 	 }		 	 
	 	 }
		 
}
 
function stateChanged() 
{ 
	if (xmlHttp.readyState==1)
	{
		if (scopeSel == "countries")
		{
			document.getElementById("selectCity").innerHTML =  "";
			document.getElementById("selectCity").style.display = "none";
			document.getElementById("selectState").innerHTML =  "";
			document.getElementById("selectState").style.display = "none";
		 	document.getElementById("selectCountry").innerHTML =  "<div id='selectFormElement'>\n<fieldset>\n<legend>Country</legend><span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px;'>Loading Countries, Please Wait...</span></fieldset></div>";
	 	}	
	 	if (scopeSel == "states")
		{
			if (regionSel == "US" || regionSel == "CA")
			{
				document.getElementById("selectCity").innerHTML =  "";
				document.getElementById("selectCity").style.display = "none";
				document.getElementById("selectState").style.display = "block";
				document.getElementById("selectState").innerHTML =  "<div id='selectFormElement'>\n<fieldset>\n<legend>State</legend><span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px;'>Loading States, Please Wait...</span></fieldset></div>";
			}
			else
			{
				document.getElementById("selectCity").innerHTML =  "";
				document.getElementById("selectState").innerHTML =  "";
				document.getElementById("selectState").style.display = "none";
				document.getElementById("selectCity").style.display = "block";
				document.getElementById("selectCity").innerHTML =  "<div id='selectFormElement'>\n<fieldset>\n<legend>City</legend><span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px;'>Loading Cities, Please Wait...</span></fieldset></div>";	
				scopeSel = "citiesCountry";
			}
	 	}
	 	if (scopeSel == "cities")
		{
			document.getElementById("selectCity").style.display = "block";
			document.getElementById("selectCity").innerHTML =  "<div id='selectFormElement'>\n<fieldset>\n<legend>City</legend><span style='font-family: Arial, Helvetica, sans-serif; font-size: 10px;'>Loading Cities, Please Wait...</span></fieldset></div>";
	 	}
	}
	
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{
		xmlDoc=xmlHttp.responseText;
		if (scopeSel == "countries")
		{
		 	document.getElementById("selectCountry").innerHTML =  xmlDoc;
	 	}
	 	if (scopeSel == "states")
	 	{
		 	document.getElementById("selectState").innerHTML =  xmlDoc;
	 	}
	 	if (scopeSel == "cities")
	 	{
		 	if (xmlDoc != "not Found")
		 	{	
		 		document.getElementById("selectCity").innerHTML =  xmlDoc;
	 		}
	 		else
	 		{
		 		document.getElementById("selectCity").innerHTML =  "";
	 		}
	 	}
	 	if (scopeSel == "citiesCountry")
	 	{
		 	if (xmlDoc != "not Found")
		 	{	
			 	document.getElementById("selectState").innerHTML =  "";
		 		document.getElementById("selectCity").innerHTML =  xmlDoc;
	 		}
	 		else
	 		{
		 		document.getElementById("selectState").innerHTML =  "";
		 		document.getElementById("selectCity").innerHTML =  "";
	 		}
	 	}
	}
} 
 
function GetXmlHttpObject()
 { 
 var objXMLHttp=null;
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest();
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 return objXMLHttp;
 }

Open in new window

bluememonAsked:
Who is Participating?
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
How are you trying to view the html for the elements that are added by AJAX?  Remember it is generated code so just "viewing source" won't show it.  You need something that will show the "generated" source.
I see the html for those elements.  I have some questions though (and there was too much html to easily answer these myself).  Why 2 form tags?  Both have the same action.  One seems to have hidden elements but no values.  The other is actually useless.  The selects that you see on the page are not either form.  I am honestly a little surprised this is working at all.  I haven't looked at script but it must be reading the page elements and "making" the form when the Go button is pressed (which isn't really going to be treated as a form submit since it also isn't in form tags).
Get the Web Developer extension and use it View Generated Source option to see what I mean in FF3.  If the generated source in IE is different (i.e. the form elements are IN form tags) then that could help identify a problem on the page (the code that is "filling" the form).  I don't really know if this is an issue since I didn't bother looking at the page in IE or seeing its generated source.
Let me know if you have a question about any of this.  The layout of the html that is generated (i.e. the form elements NOT in form tags) is a key to why you aren't getting the "submit" to work.  IE just might be really forgiving if it gets the same "generated" html.  If you can clarify the form tags and how you want this to work I will be able to answer details on how to fix this, etc.
bol
0
 
DanWalterCommented:
Blue:
I am running FF 3.0.6 and it works just fine for me - I get a region dropdown, then a country based on that, then a list of cities.

Do you have cache problems, maybe????

Dan
0
 
bluememonAuthor Commented:
Yes, It does show...

The promblem here resides that when you check the source html of the page, It doesn't show the drop downs just the first one even when youre seeing the other drop downs (country, city, etc.) and when you send the form, the other drop downs are not sent...

IE sends them fine.

Memo.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
bluememonAuthor Commented:
Here's the thing->

the Form consists on 4 possible dropdown fields
  • Region
  • Country
  • State
  • City
each enclosed in it's own Div, all divs inside the form tags.

When the form is initiated all divs are empty except for the Region field wtch is the starting dropdown.

as each dropdown y choosen, the ajax function checks the database and then populates the next dropdown and stores then on it's own div.

If you go all the way to the city dropdown, you see it on the window and you chan choose in them, but when you submit the form, only the region dropdown information is sent the other dropdown information is ignored.
further more when you display all drops and check the source code you cant't see the dropdown html on it... but you can oviously see them in the main window.

That's the problem I'm having The AJAX it's working but firefox it's not sending all the form, It's not writing it, in FF2 it worked, and in IE7 have always worked, I haven't change the code so I suppose It has something to do with how FF3 checks the code or updates the html.

Hope this explains the problem better.

Memo.
0
 
bluememonAuthor Commented:
Thanks a lot, the developer extension helped me out a lot! indeed the source generated automatically closes the form tag even though in the code it vas open and inside all the form elements. thanks a lot to point me out that.!!
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I am glad I could help.  That extension is a great tool.  I also recommend Firebug if you want something helpful for developers.  It is especially nice for script debugging.
Thanks for the grade, the points and the fun question.
bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.