Forum Moderators: open
<script language = "javascript">
var XMLHttpRequestObject = false;if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}function getMenu(divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", document.getElementById("parent").value);XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}XMLHttpRequestObject.send(null);
}
}
</script></head>
<body>
<form name="routercfg">
<select id="parent" onChange="getMenu('models')">
<?php include "./php/brands.php";?></select>
<div id="models">
<select id="model" onChange="getMenu('config')">
<option>Select Router Model</option>
</select>
</div><div id="config">
<select id="config">
<option>Select Router Config</option>
</select>
</div>
</form>
</body>
</html>
example option line from parent div
<option value="./php/cisco.php">Cisco</option>
example option line from models div
<option value="./php/config.php?model=1721C">
The first select "parent" the onChange does trigger and load the models div correctly however the onChange in "models" does not seem to trigger when making a change. I have watched it in firebug and it confirms this. Since the first onChange event works properly it would seem the javascript portion of things is working properly, but I cant seem to figure out why it wont trigger the second time.
Anyone have any ideas?
<div id="config">
<select id="config">
Ah, you seem to have two IDs the same.
Are you testing the 2nd dropdown immediately after the page has loaded? Or after the contents has been written with JavaScript? Just wondering whether may be only the OPTION elements should be written with JS, not the entire SELECT, since you have an event assigned to the SELECT ...?
Are you testing the 2nd dropdown immediately after the page has loaded? Or after the contents has been written with JavaScript? Just wondering whether may be only the OPTION elements should be written with JS, not the entire SELECT, since you have an event assigned to the SELECT ...?
After the the contents have been written. Not sure if I understand the second part of the question so I will answer with what I think you are asking. The php pages that are called from the onChange only write the options. This is the same way I am doing it with the first one so I dont think that is part of the issue. If I misunderstood what you were asking in the second part just let me know.
according to w3c's description of intrinsic events [w3.org]:
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus.
i haven't tried this myself, but perhaps you could use the document.formname.fieldname.focus() javascript method to set focus on the select field before changing it and then move the focus to another field afterwards to trigger the onChange event.
XMLHttpRequestObject.open("GET", [b][i]document.getElementById("parent").value[/i][/b]); Try this
Changes in bold<html>
<head>
<script [b]type="text/javascript"[/b]>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getMenu(divID,[b]srcEl[/b]) {
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", [b]srcEl.value[/b]);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<form name="routercfg">
<select id="parent" onChange="getMenu('models',[b]this[/b])">
<?php include "./php/brands.php";?>
</select>
<div id="models">
<select id="model" onChange="getMenu('config',[b]this[/b])">
<option>Select Router Model</option>
</select>
</div>
<div id="[b]configs[/b]">
<select id="config">
<option>Select Router Config</option>
</select>
</div>
</form>
</body>
</html>
Man, I can't beleve you guys overlooked this
man, i don't do code dumps.
DrunkEric: After the the contents have been written. Not sure if I understand the second part of the question so I will answer with what I think you are asking. The php pages that are called from the onChange only write the options. This is the same way I am doing it with the first one so I dont think that is part of the issue. If I misunderstood what you were asking in the second part just let me know.
Ok, yes I agree, only the OPTION elements should be written. However, on glancing at your code you seem to be passing the divID and then changing the innerHTML of this obj, but this includes the SELECT as well?
And this also seems to be an inconsistency in mehh's code above. 'models' refers to a DIV, whereas 'config' refers to a SELECT? Both are passed to the getMenu() function.
penders: You got me looking in the right direction. It was kind of a stupid mistake that I was overlooking. The reason it wouldnt trigger the event is because it didnt know about it. When it switched out the select, the new one that was loaded from the outside php script did not have the onChange event in the select. So since it wasnt in the code it didnt know to trigger it
Thanks everyone for your help.
