PDA

View Full Version : Trigger an onchange event on page load?



rtown
01-25-2011, 10:36 PM
Hello,

I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data.

The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown.

How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection?

Here is the JS:

<script type="text/javascript">
function showCustomer(str)
{var xmlhttp;
if (str=="")
{document.getElementById("txtHint").innerHTML="";
return;}
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()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();}
</script>

And the onchange line:


<SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)""> Etc... Please ignore the double sets of quotes. :thumbsup:

venegal
01-25-2011, 10:48 PM
You could just trigger it manually as soon as the page is loaded:

document.customers.onchange();

You'd have to try it, though I usually use jQuery for event handling. But it looks like it would work.

rtown
01-25-2011, 10:55 PM
You could just trigger it manually as soon as the page is loaded:

document.customers.onchange();

You'd have to try it, though I usually use jQuery for event handling. But it looks like it would work.

Thanks. Where would I place this code? :o

venegal
01-25-2011, 11:14 PM
window.onload = function () {
// here
};

Make sure not to make another window.onload if you already got one in there, though.

rtown
01-25-2011, 11:23 PM
window.onload = function () {
// here
};

Make sure not to make another window.onload if you already got one in there, though.

Im still not 100% clear on where to place this... ive tried the following which does not work.. maybe you have some insight. Im sorry I am not well versed in javascript.


<script type="text/javascript">
function showCustomer(str)
{var xmlhttp;
if (str=="")
{document.getElementById("txtHint").innerHTML="";
return;}
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()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();}

window.onload = function () {
document.customers.onchange();
};
</script>

venegal
01-26-2011, 12:15 AM
The placement looks ok. Can you show this on a live site, so I can check out why it's not working?

rtown
01-26-2011, 12:33 AM
The placement looks ok. Can you show this on a live site, so I can check out why it's not working?

Unfortunately its an internal web application, so thats not possible...

If you have any ideas please let me know... I hope I can find a solution.

rtown
01-26-2011, 12:55 AM
I thought i would post that this code below does indeed create an alert onload... so that is working but the full function is not triggering the onchange.

Any ideas?


<script type="text/javascript">
function showCustomer(str)
{var xmlhttp;
if (str=="")
{document.getElementById("txtHint").innerHTML="";
return;}
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()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();}
alert('This is what an alert message looks like.');
</script>

<script type="text/javascript">
window.onload = showCustomer();
</script>

venegal
01-26-2011, 09:03 AM
Of course there will be an alert. Your alert is outside of any function, it will just run no matter what.

And if you call showCustomer that way (without parameter), it's also obvious that it won't do anything (except making sure that txtHint is empty, which it probably already is).

Even if it's some internal application, you can just set up a demo site by copying the HTML source you get from the browser to its own file. Just make sure all the necessary scripts are in there and put it on a server.

That said, it looks like I got a bit confused, because there was only the select in your HTML snippet, and not the wrapping form.

Instead of

document.customers.onchange();
it should really be

document.your_form_name.customers.onchange();
or

document.getElementsByName('customers')[0].onchange();

Philip M
01-26-2011, 09:12 AM
function showCustomer(str)

window.onload = showCustomer();

if no parameter is passed str is undefined.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

rtown
01-26-2011, 03:52 PM
Of course there will be an alert. Your alert is outside of any function, it will just run no matter what.

And if you call showCustomer that way (without parameter), it's also obvious that it won't do anything (except making sure that txtHint is empty, which it probably already is).

Even if it's some internal application, you can just set up a demo site by copying the HTML source you get from the browser to its own file. Just make sure all the necessary scripts are in there and put it on a server.

That said, it looks like I got a bit confused, because there was only the select in your HTML snippet, and not the wrapping form.

Instead of

document.customers.onchange();
it should really be

document.your_form_name.customers.onchange();
or

document.getElementsByName('customers')[0].onchange();

I actually dont have access to any external asp hosting... so I cant throw it up for you unfortunately. It seems none of these examples work though. Maybe there is something we are missing here.

EDIT: Here is the link to the original script! http://www.w3schools.com/Ajax/ajax_database.asp you cant do it on this page, but if the dropdown status is saved and the page reloaded, the customer data does not appear until the dropdown is changed again... hopefully this will help?

rtown
01-26-2011, 03:54 PM
function showCustomer(str)

window.onload = showCustomer();

if no parameter is passed str is undefined.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Can you elaborate on this? Sorry I am not very good in javascript.. What is the string that is being passed in the first place? What should I be passing?

rtown
01-26-2011, 04:18 PM
Here is a better way to see what I am trying to fix.. here is the script:

http://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_database

Add SELECTED to one of the options, then hit the "edit and click me button"... you can see that the option is now selected, but the information is not presented unless you go back to the dropdown and select something else.

venegal
01-26-2011, 05:42 PM
I actually dont have access to any external asp hosting... so I cant throw it up for you unfortunately. It seems none of these examples work though. Maybe there is something we are missing here.


It's just about the HTML, so any kind of hosting would do.



EDIT: Here is the link to the original script! http://www.w3schools.com/Ajax/ajax_database.asp you cant do it on this page, but if the dropdown status is saved and the page reloaded, the customer data does not appear until the dropdown is changed again... hopefully this will help?

I don't know what to tell you. My last suggestion works perfectly. Just put this code into that tryit box you linked to and see for yourself:


<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('customers')[0].onchange();
};
</script>
</head>
<body>

<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS " selected="selected">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br />
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>


All I changed from the original is what I suggested in my last post, and I made one of the options preselected, so you actually see that it works.

rtown
01-26-2011, 06:19 PM
It's just about the HTML, so any kind of hosting would do.



I don't know what to tell you. My last suggestion works perfectly. Just put this code into that tryit box you linked to and see for yourself:


<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('customers')[0].onchange();
};
</script>
</head>
<body>

<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS " selected="selected">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br />
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>


All I changed from the original is what I suggested in my last post, and I made one of the options preselected, so you actually see that it works.

Yes! This works! I must not have had things together properly. I just copy and pasted the whole script you changed and used it... works just as I needed.

Thats a relief. Thank you for spending the time here! :D:D