AJAX routine needs to be triggered automatically instead of via onChange event
in [JavaScript]
|
Prev: Subtle difference between boolean value and boolean comparison?
Next: +++ NFL Jerseys On Sale at www.ajerseys.com
From: jr on 3 Aug 2010 20:07 I have 3 fields bu, zonenm and zoneid, the bu is populated by a sql query, the other two are dynamically populated by related drop down lists using AJAX. The scripts for the next pull down is triggered by the onChange event in the input tag for the one below it. The scripts work but there is one small issue. The zonenm works because the onChange() event triggers it from the bu input tag. The zoneid sticks until you change the drop down because of the onChange ig appears to the user there are no zoneid's for that zonenm. That is becuase the zoneid should automatically populate for the zoneid in the search box when there is a related value in the zonenm. The onChange event in the input line for the zonenm is wrong because it doesn't need to wait, so my question is how to trigger it automatically once the zonenm is populated? thanks, function fillZoneNm() { var bu = document.forms[0].search_bu.value; if ( window.XMLHttpRequest ) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { document.getElementById("search_zonenm").innerHTML=xmlhttp.responseText; } xmlhttp.open("GET","get_bus.php?bu="+bu,true); //xmlhttp.open("GET","get_bus.php?bu=" + bu,true); xmlhttp.send(); } function fillZoneId() { var bu = document.forms[0].search_bu.value; alert(bu); var zonenm = document.forms[0].search_zonenm.value; alert(zonenm) if ( window.XMLHttpRequest ) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { document.getElementById("search_zoneid").innerHTML=xmlhttp.responseText; } xmlhttp.open("GET","get_zonenms.php?bu="+bu +"&zonenm="+zonenm,true); xmlhttp.send(); }
From: jr on 3 Aug 2010 23:13 On Aug 3, 5:07 pm, jr <jlro...(a)yahoo.com> wrote: > I have 3 fields bu, zonenm and zoneid, the bu is populated by a sql > query, the other two are dynamically populated by related drop down > lists using AJAX. The scripts for the next pull down is triggered by > the onChange event in the input tag for the one below it. The scripts > work but there is one small issue. The zonenm works because the > onChange() event triggers it from the bu input tag. The zoneid sticks > until you change the drop down because of the onChange ig appears to > the user there are no zoneid's for that zonenm. That is becuase the > zoneid should automatically populate for the zoneid in the search box > when there is a related value in the zonenm. The onChange event in > the input line for the zonenm is wrong because it doesn't need to > wait, so my question is how to trigger it automatically once the > zonenm is populated? > thanks, > > function fillZoneNm() { > var bu = document.forms[0].search_bu.value; > > if ( window.XMLHttpRequest ) {// code for IE7+, > Firefox, Chrome, Opera, Safari > xmlhttp=new XMLHttpRequest(); > }else{ // code for IE6, IE5 > xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); > } > xmlhttp.onreadystatechange=function() { > > document.getElementById("search_zonenm").innerHTML=xmlhttp.responseText; > } > xmlhttp.open("GET","get_bus.php?bu="+bu,true); > //xmlhttp.open("GET","get_bus.php?bu=" + bu,true); > xmlhttp.send(); > > } > > function fillZoneId() { > var bu = document.forms[0].search_bu.value; > alert(bu); > var zonenm = document.forms[0].search_zonenm.value; > alert(zonenm) > if ( window.XMLHttpRequest ) {// code for IE7+, > Firefox, Chrome, Opera, Safari > xmlhttp=new XMLHttpRequest(); > }else{ // code for IE6, IE5 > xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); > } > xmlhttp.onreadystatechange=function() { > > document.getElementById("search_zoneid").innerHTML=xmlhttp.responseText; > } > xmlhttp.open("GET","get_zonenms.php?bu="+bu > +"&zonenm="+zonenm,true); > xmlhttp.send(); > > } I have 2 related drop down lists populated by AJAX. The problem is the 2nd one needs to be automatic after the first one is populated. AS it is right now the 2nd one sticks. The 2nd one doesn't have to be selected it just has to be displayed to the user after the first list populates. AS it stands now it shows the old list from the last search until you change the top one then it drops down with the right list but the user doesn't know what happened. It is held up because I'm using onChange to call it. So I just need to have it automatically drop down when the first one drops down at the same time. Right now there are two onChange() events called in both of the input tags. I just need the second one to drop down right after the first one does. I need some ideas, thanks.
From: Captain Paralytic on 4 Aug 2010 05:28 On 4 Aug, 04:13, jr <jlro...(a)yahoo.com> wrote: > On Aug 3, 5:07 pm, jr <jlro...(a)yahoo.com> wrote: > I need some ideas, thanks. You could hire someone to do it, how's that for an idea. I would suggest reading and learning how to program, but I know there's no point.
From: jr on 4 Aug 2010 08:42 On Aug 4, 2:28 am, Captain Paralytic <paul_laut...(a)yahoo.com> wrote: > On 4 Aug, 04:13, jr <jlro...(a)yahoo.com> wrote: > > > On Aug 3, 5:07 pm, jr <jlro...(a)yahoo.com> wrote: > > I need some ideas, thanks. > > You could hire someone to do it, how's that for an idea. > > I would suggest reading and learning how to program, but I know > there's no point. I agree this question might be too difficult for a post. I didn't notice it until now. I did try calling the two events together from one function on the first input tag with the onChange event. function fillBoth(){ fillZoneNm(); fillZoneId(); } But what happened is the zoneid, the last drop down lost the relation to the first drop down but something doesn't seem right. They seem to need to move independently of each other.
From: Denis McMahon on 4 Aug 2010 09:39
On 04/08/10 01:07, jr wrote: > function fillZoneNm() { > var bu = document.forms[0].search_bu.value; > > if ( window.XMLHttpRequest ) {// code for IE7+, > Firefox, Chrome, Opera, Safari > xmlhttp=new XMLHttpRequest(); > }else{ // code for IE6, IE5 > xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); > } > xmlhttp.onreadystatechange=function() { > > document.getElementById("search_zonenm").innerHTML=xmlhttp.responseText; > } > xmlhttp.open("GET","get_bus.php?bu="+bu,true); > //xmlhttp.open("GET","get_bus.php?bu=" + bu,true); > xmlhttp.send(); > } > > function fillZoneId() { > var bu = document.forms[0].search_bu.value; > alert(bu); > var zonenm = document.forms[0].search_zonenm.value; > alert(zonenm) > if ( window.XMLHttpRequest ) {// code for IE7+, > Firefox, Chrome, Opera, Safari > xmlhttp=new XMLHttpRequest(); > }else{ // code for IE6, IE5 > xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); > } > xmlhttp.onreadystatechange=function() { > > document.getElementById("search_zoneid").innerHTML=xmlhttp.responseText; > } > xmlhttp.open("GET","get_zonenms.php?bu="+bu > +"&zonenm="+zonenm,true); > xmlhttp.send(); > > } I can see two major problems with this: 1) You are using async ajax xhr but not checking the state of the xhr or the return status of the request. 2) What sort of element do document.getElementById("search_zonenm") and 'document.getElementById("search_zoneid")' refer to? Do they have innerHTML properties? If I wanted to update the value of a form field using the text received back from an xhr, I'd be setting the .value property of the form field to the .responseText, not the .innerHTML Rgds Denis McMahon |