AJAX routine needs to be triggered automatically instead of via onChange event [JavaScript]

Prev: Subtle difference between boolean value and boolean comparison?
Next: +++ NFL Jerseys On Sale at www.ajerseys.com

From: jr on 4 Aug 2010 17:39

On Aug 4, 6:39 am, Denis McMahon <denis.m.f.mcma...(a)googlemail.com>
wrote:
> 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.
You are right it gets the response but doesn't check the status but
since only one user is using it at present
I can't imagine why it wouldn't be status ready. Maybe I should add
it if I add sessions?
I can definitely see why you should trap for errors and check the
status. I may add it on the next wave of conversion.
> 2) What sort of element do document.getElementById("search_zonenm") and
> 'document.getElementById("search_zoneid")' refer to?
It refers to the value list returned by sql in the getZoneNms.php &
getbus.php pages.

> Do they have innerHTML properties?
Yes it is text between the input tags.
>
> 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
It seems to work with the .innerHTML as well but it makes sense to
change the value property. Maybe it would conflict with some browsers
or some other javascript. The issue was unexpectly resolved.
What happened is, I checked in Firebug and found an error.Because I
though it was working I didn't think to check there before.
Then I set an alert box to get the value of "get_zonenms.php?bu="+bu
+"&zonenm="+zonenm" It was missing the values. I think they got
populated through the GET in the page change and a function to list
the values. I thought that script was working and it wasn't.
I noticed a <div> tag that also had the id of the search_zonenm.
Taking that out fixed the problem. It was confused as to which id to
use.
Thanks,

Rgds, Janis

From: jr on 4 Aug 2010 17:56

From: jr on 4 Aug 2010 19:10

On Aug 4, 2:48 pm, Tim Streater <timstrea...(a)waitrose.com> wrote:
> In article
> <1e35217b-a5f7-4128-88d2-bd5bc7d50...(a)y32g2000prc.googlegroups.com>,
>
> jr <jlro...(a)yahoo.com> wrote:
> > On Aug 4, 6:39 am, Denis McMahon <denis.m.f.mcma...(a)googlemail.com>
> > wrote:
> > > 1) You are using async ajax xhr but not checking the state of the xhr or
> > > the return status of the request.
> > You are right it gets the response but doesn't check the status but
> > since only one user is using it at present
> > I can't imagine why it wouldn't be status ready. Maybe I should add
> > it if I add sessions?
>
> You seem to be throwing code to this problem at random. You should read
> up about ajax and discover that onreadystatechange will fire for a
> number of state changes during the process.
>
> So you need to add:
>
> if (xmlhttp.readyState==4 && xmlhttp.status==200)
>
> into your function.
>
> --
> Tim
>
> "That excessive bail ought not to be required, nor excessive fines imposed,
> nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

I will read about it, to tell the truth, I'm not sure how it got
fixed, but it does seem to be adding text to the innerHTML where
perhaps I want the value as Dennis mentioned so I'm going to try that
but right now I'm afraid to touch anything until I understand it more.

From: Denis McMahon on 4 Aug 2010 19:15

On 04/08/10 22:39, jr wrote:
> On Aug 4, 6:39 am, Denis McMahon <denis.m.f.mcma...(a)googlemail.com>
> wrote:
>> 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.

> You are right it gets the response but doesn't check the status but
> since only one user is using it at present
> I can't imagine why it wouldn't be status ready. Maybe I should add
> it if I add sessions?
> I can definitely see why you should trap for errors and check the
> status. I may add it on the next wave of conversion.

It doesn't matter how many users are using it. You need to monitor the
xhr state in javascript to determine when it receives data back from the
server, and you need to check the status of the response to ensure that
the server has responded as you expected.

>> 2) What sort of element do document.getElementById("search_zonenm") and
>> 'document.getElementById("search_zoneid")' refer to?
> It refers to the value list returned by sql in the getZoneNms.php &
> getbus.php pages.

When I ask "what type of element?" I am referring to the html element.

What element has the attribute 'id="search_zoneid"' and what element has
the attribute 'id="search_zonenm"'?

If you are returning a list of values for a select pulldown, I'm not
sure if you can just poke the option list into the page, you may need to
add each option to the options collection of the select element instead.

>> Do they have innerHTML properties?
> Yes it is text between the input tags.

An element can only have "innerHTML" if it has an opening and closing tag.

The "body" element has an opening and a closing tag. The "select"
element has an opening and a closing tag. The input element does not
have a closing tag. Thus, the input element can not have innerHTML.

>> 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

> It seems to work with the .innerHTML as well but it makes sense to
> change the value property.

It will *ONLY* make sense to change the value property if you understand
why you are changing the value property. Simply because I said that's
what I would do for an input form field doesn't automatically make it
right if your input field is a different type!

> Maybe it would conflict with some browsers
> or some other javascript. The issue was unexpectly resolved.
> What happened is, I checked in Firebug and found an error.Because I
> though it was working I didn't think to check there before.
> Then I set an alert box to get the value of "get_zonenms.php?bu="+bu
> +"&zonenm="+zonenm" It was missing the values.

I'm not surprised, because your "fill" functions weren't waiting for the
response from the server before setting the innerHTML of whatever
elements they changed.

> I think they got
> populated through the GET in the page change and a function to list
> the values. I thought that script was working and it wasn't.
> I noticed a <div> tag that also had the id of the search_zonenm.
> Taking that out fixed the problem. It was confused as to which id to
> use.

I have no idea how they got populated.

Rgds

Denis McMahon

From: Denis McMahon on 4 Aug 2010 19:21

On 04/08/10 22:56, jr wrote:
> On Aug 4, 6:39 am, Denis McMahon <denis.m.f.mcma...(a)googlemail.com>
> wrote:
>> 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

> HOw do you store the responseText in a <div> or is it necessary? I'm
> not sure, but it seemed like I was getting messages directly in the
> field value. Rgds, Janis

Once you have received the response, you can set the div's innerHTML
property to the text.

However, I still don't know where on the form you are trying to put the
response, what the format of the response is, and whether it is meant to
be a selection for the user to pick from, a single value, or simply
informative.

Rgds

Denis McMahon

First | Prev |
Pages: 1 2
Prev: Subtle difference between boolean value and boolean comparison?
Next: +++ NFL Jerseys On Sale at www.ajerseys.com