By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,240 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Execute JavaScript from innerHTML

P: 1
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 :
Expand|Select|Wrap|Line Numbers
  1. ... 
  2. <script type="text/javascript"> 
  3. function getXMLHTTP() { //fuction to return the xml http object 
  4.         var xmlhttp=false;     
  5.         try{ 
  6.             xmlhttp=new XMLHttpRequest(); 
  7.         } 
  8.         catch(e)    {         
  9.             try{             
  10.                 xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
  11.             } 
  12.             catch(e){ 
  13.                 try{ 
  14.                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  15.                 } 
  16.                 catch(e1){ 
  17.                     xmlhttp=false; 
  18.                 } 
  19.             } 
  20.         } 
  21.  
  22.         return xmlhttp; 
  23.     } 
  24.  
  25.  
  26.  
  27.     function getSchool(strURL) {         
  28.  
  29.         var req = getXMLHTTP(); 
  30.  
  31.         if (req) { 
  32.  
  33.             req.onreadystatechange = function() { 
  34.                 if (req.readyState == 4) { 
  35.                     // only if "OK" 
  36.  
  37.                     if (req.status == 200) {                         
  38.                         document.getElementById('schooldiv').innerHTML=req.responseText; 
  39.                     } else { 
  40.                         alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
  41.                     } 
  42.                 }                 
  43.             }             
  44.             req.open("GET", strURL, true); 
  45.             req.send(null); 
  46.         } 
  47.  
  48.     } 
  49. </script> 
  50.  
  51. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery.multiselect.css" /> 
  52. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/style.css" /> 
  53. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/prettify.css" /> 
  54. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery-ui.css" /> 
  55. <script type="text/javascript" src="../jquery_selectes/scripts/jquery.js"></script> 
  56. <script type="text/javascript" src="../jquery/scripts/jquery-ui.min.js"></script> 
  57. <script type="text/javascript" src="../jquery_selects/assets/prettify.js"></script> 
  58. <script type="text/javascript" src="../jquery_selects/scripts/jquery.multiselect.js"></script> 
  59. <script type="text/javascript"> 
  60. $(function(){ 
  61.     $("select#school").multiselect({ 
  62.         selectedList: 0 
  63.     }); 
  64. }); 
  65. </script> 
  66. <script type="text/javascript"> 
  67. $(function(){ 
  68.  
  69.     $("select#uni").multiselect({ 
  70.         multiple: false, 
  71.         header: "Επιλέξτε", 
  72.         noneSelectedText: "Επιλέξτε", 
  73.         selectedList: 0 
  74.     }); 
  75.  
  76. }); 
  77. </script> 
  78. ... 
  79. <body> 
  80. ... 
  81. <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;"> 
  82.  
  83.        <p> 
  84.       <select title="Basic example" name="example-basic" size="5"  style="font-size:12px; width:250px" id="uni" onChange="getSchool('findschool.php?uni='+this.value)"> 
  85.     <option value="1">ΕΜΠ</option> 
  86.     <option value="2">ΑΠΔ</option> 
  87.     <option value="3">Γ</option> 
  88.     <option value="4">Δ</option> 
  89.     <option value="5">Ε</option> 
  90.     <option value="6">Ζ</option> 
  91.     <option value="7">Η</option> 
  92.     <option value="8">Θ</option> 
  93.     <option value="9">Η</option> 
  94.     <option value="10">Ι</option> 
  95.     <option value="11">Κ</option> 
  96.     <option value="12">Λ</option> 
  97.     </select> 
  98.     </p> 
  99.     <?php 
  100.     include $_SERVER['DOCUMENT_ROOT']."jquery_selects/createschool.php"; 
  101.     ?> 
  102.     <div id="schooldiv"> 
  103.  
  104.     <select id="school" multiple="multiple" name="example-basic" size="5" style="font-size:12px; width:250px" > 
  105.         <option value="option1">Nefeli</option> 
  106.         <option value="option2">Pavlos</option> 
  107.         <option value="option3">Orestis</option> 
  108.         <option value="option4">Maria</option> 
  109.         <option value="option5">Panagiotis</option> 
  110.         <option value="option6">Fotini</option> 
  111.         <option value="option7">Kostas</option> 
  112.         </select> 
  113.  
  114.     </div> 
  115.     </div> 
  116. ... 
  117. </body> 
  118. ...

findschool.php :

Expand|Select|Wrap|Line Numbers
  1. <?php 
  2.  
  3. ?> 
  4. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery.multiselect.css" /> 
  5. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/style.css" /> 
  6. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/prettify.css" /> 
  7. <link rel="stylesheet" type="text/css" href="../jquery_selects/assets/jquery-ui.css" /> 
  8. <script type="text/javascript" src="../jquery_selectes/scripts/jquery.js"></script> 
  9. <script type="text/javascript" src="../jquery/scripts/jquery-ui.min.js"></script> 
  10. <script type="text/javascript" src="../jquery_selects/assets/prettify.js"></script> 
  11. <script type="text/javascript" src="../jquery_selects/scripts/jquery.multiselect.js"></script> 
  12. <script type="text/javascript"> 
  13. $(function(){ 
  14.     $("select#school").multiselect({ 
  15.         selectedList: 0 
  16.     }); 
  17. }); 
  18. </script> 
  19.  
  20.  
  21. <select id="school" multiple="multiple" name="example-basic" size="5" style="font-size:12px; width:250px" > 
  22.         <option value="option1">eleni</option> 
  23.         <option value="option2">katerina</option> 
  24.         <option value="option3">eutuxia</option> 
  25.         </select> 
  26.         <?php 
  27.  
  28. ?>
  29.  
Any help would be valuable. Thanks in advance.
May 16 '12 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
why not just replace the options instead of the full select? this way you donít delete the handlers set on the select.
May 17 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.