I am a newbie in javascript/ajax and I need some help.
I have 2 dropdown lists that the second one(id=school) depends on the first one(id=uni). On change of the 1st, a javascript function is called and via an innerHTML, the 2nd ddlist is updated with the right options.
Furthermore, my ddlists are decorated using some js and css. But, when the innerHMTL is called, the styling is lost since the javascript function in not called. My code is given below:
index.php :
PHP Code:
...
<script type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
For a start, 'findschool.php' should only output the <select>...</select> content. By adding the tags that load all of your stylesheets and JavaScripts, you're probably causing conflicts in several places.
To check that the code works properly, try loading it in your browser with something like:
Ok, I removed the css and javascripts from findschool.php.
The change of the 2nd ddlist depending on the option of the 1st one works fine! The problem is that, the javascripts and css that should be executed in order that the 2nd ddlist "coming from the innerHTML" have the right style, are not executed and I don't know how to make them run(either doing something in index.php or in findschool.php).
Reply With Quote
Bookmarks