[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Firefox 3 and AJAX Form Updating

Posted on 2009-02-10
7
Medium Priority
?
337 Views
Last Modified: 2013-12-08
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

0
Comment
Question by:bluememon
  • 3
  • 2
6 Comments
 

Expert Comment

by:DanWalter
ID: 23603980
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
 

Author Comment

by:bluememon
ID: 23604890
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
 

Author Comment

by:bluememon
ID: 23605008
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 23751963
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
 

Author Closing Comment

by:bluememon
ID: 31545205
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 23759024
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question