AJAX routine needs to be triggered automatically instead of viaonChange event

J

jr

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();

}
 
J

jr

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 forIE7+,
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 forIE7+,
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();

        }
Click to expand...

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

Captain Paralytic

I need some ideas, thanks.
Click to expand...

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

jr

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.
Click to expand...

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

Denis McMahon

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();

}
Click to expand...

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
 
J

jr

function fillZoneNm() {
           var bu = document.forms[0].search_bu.value;
Click to expand...
                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(){
Click to expand...
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();
}
Click to expand...
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() {
Click to expand...
document.getElementById("search_zoneid").innerHTML=xmlhttp.responseText;
           }
                xmlhttp.open("GET","get_zonenms.php?bu="+bu
+"&zonenm="+zonenm,true);
           xmlhttp.send();
Click to expand...
        }
Click to expand...

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.
Click to expand...
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?
Click to expand...
It refers to the value list returned by sql in the getZoneNms.php &
getbus.php pages.
Do they have innerHTML properties?
Click to expand...
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
Click to expand...
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
 
T

Tim Streater

jr said:
On Aug 4, 6:39 am, Denis McMahon <[email protected]>
wrote:
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?
Click to expand...

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

jr

function fillZoneNm() {
           var bu = document.forms[0].search_bu.value;
Click to expand...
                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(){
Click to expand...
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();
}
Click to expand...
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() {
Click to expand...
document.getElementById("search_zoneid").innerHTML=xmlhttp.responseText;
           }
                xmlhttp.open("GET","get_zonenms.php?bu="+bu
+"&zonenm="+zonenm,true);
           xmlhttp.send();
Click to expand...
        }
Click to expand...

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
Click to expand...
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
 
J

jr

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
Click to expand...

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

Denis McMahon

function fillZoneNm() {
var bu = document.forms[0].search_bu.value;
Click to expand...
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() {
Click to expand...
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();
}
Click to expand...
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();
Click to expand...

}
Click to expand...

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.
Click to expand...
Click to expand...
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.
Click to expand...

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.
It refers to the value list returned by sql in the getZoneNms.php &
getbus.php pages.
Click to expand...

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.
Yes it is text between the input tags.
Click to expand...

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.
It seems to work with the .innerHTML as well but it makes sense to
change the value property.
Click to expand...

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.
Click to expand...

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.
Click to expand...

I have no idea how they got populated.

Rgds

Denis McMahon
 
D

Denis McMahon

function fillZoneNm() {
var bu = document.forms[0].search_bu.value;
Click to expand...
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() {
Click to expand...
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();
}
Click to expand...
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();
Click to expand...

}
Click to expand...

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
Click to expand...
Click to expand...
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
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

AJAX function doesn't return responseText in the right place 6
AJAX function doesn't fire from button input form 23
newbie AJAX dropdown execute ONCE 3
trying to do AJAX 4
need help with generic ajax get function 6
JS ajax request 15
newbie Javascript checked is null or not an object 6
how to display textbox entered value and with related values intextare using javascr 1

Members online

Total: 31 (members: 1, guests: 30)
Robots: 498

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top