www.webdeveloper.com
Results 1 to 3 of 3

Thread: Execute javascript from inner HTML

  1. #1
    Join Date
    May 2012
    Posts
    2

    Execute javascript from inner HTML

    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);
            }
                    
        }
    </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 :

    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

    ?>
    Any help would be valuable. Thanks in advance.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,148
    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:

    http://www.yoursite.com/findschool.php?uni=1

    If it outputs just the <select>...</select> code, then the problem lies in the page where the form resides.

  3. #3
    Join Date
    May 2012
    Posts
    2
    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).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles