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 :
findschool.php :
Any help would be valuable. Thanks in advance.
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 :
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);
}
}
</script>
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/style.css" />
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery-ui.css" />
<script type="text/javascript" src="../jquery_selectes/scripts/jquery.js"></script>
<script type="text/javascript" src="../jquery/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery_selects/assets/prettify.js"></script>
<script type="text/javascript" src="../jquery_selects/scripts/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$("select#school").multiselect({
selectedList: 0
});
});
</script>
<script type="text/javascript">
$(function(){
$("select#uni").multiselect({
multiple: false,
header: "Επιλέξτε",
noneSelectedText: "Επιλέξτε",
selectedList: 0
});
});
</script>
...
<body>
...
<div class="announcement_borderless" style="border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;">
<p>
<select title="Basic example" name="example-basic" size="5" style="font-size:12px; width:250px" id="uni" onChange="getSchool('findschool.php?uni='+this.value)">
<option value="1">ΕΜΠ</option>
<option value="2">ΑΠΔ</option>
<option value="3">Γ</option>
<option value="4">Δ</option>
<option value="5">Ε</option>
<option value="6">Ζ</option>
<option value="7">Η</option>
<option value="8">Θ</option>
<option value="9">Η</option>
<option value="10">Ι</option>
<option value="11">Κ</option>
<option value="12">Λ</option>
</select>
</p>
<?php
include $_SERVER['DOCUMENT_ROOT']."jquery_selects/createschool.php";
?>
<div id="schooldiv">
<select id="school" multiple="multiple" name="example-basic" size="5" style="font-size:12px; width:250px" >
<option value="option1">Nefeli</option>
<option value="option2">Pavlos</option>
<option value="option3">Orestis</option>
<option value="option4">Maria</option>
<option value="option5">Panagiotis</option>
<option value="option6">Fotini</option>
<option value="option7">Kostas</option>
</select>
</div>
</div>
...
</body>
...
findschool.php :
Code:
<?php
?>
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/style.css" />
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery-ui.css" />
<script type="text/javascript" src="../jquery_selectes/scripts/jquery.js"></script>
<script type="text/javascript" src="../jquery/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery_selects/assets/prettify.js"></script>
<script type="text/javascript" src="../jquery_selects/scripts/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$("select#school").multiselect({
selectedList: 0
});
});
</script>
<select id="school" multiple="multiple" name="example-basic" size="5" style="font-size:12px; width:250px" >
<option value="option1">eleni</option>
<option value="option2">katerina</option>
<option value="option3">eutuxia</option>
</select>
<?php
?>
Comment