Execute JavaScript from innerHTML

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

 ... 

<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 :

Expand|Select|Wrap|Line Numbers

 
<?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.

May 16 '12 #1

Subscribe Post Reply

2761

Dormilich

8,658

Expert Mod 8TB

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

Similar topics

execute javascript file in php

by: nerf | last post by:

How can I execute a javascript file(test.js) from within PHP. I'm running oscommerce and want to insert a menu created in javascript by Sothink DHTMLMenu. Thanks in advance

PHP

Javascript to HTML or PHP or Perl converter

by: oleg_orel | last post by:

I need to access web sites using my scripts written in Perl. I use lynx and elinks to access web pages. It works fine, unless the pages has some Javascript code. Most Javascript stuff is working...

Javascript

How to get inner html of page/control with datagrid and pass text back to client as string

by: moondaddy | last post by:

I have a frame set where I have a hidden frame page used to marshal data back and forth. In another frame who's source page needs to stay fixed and not do round trips. However, at times I want do...

ASP.NET

Using VB.Net to execute JavaScript

by: Peter Dickson | last post by:

I am trying to pull data from a website into a database. Part of the website I am getting the data uses javascript to display the data. The only variable being passed to the javascript when it...

Visual Basic .NET

Using ADO from JavaScript in HTML to change a spread sheet

by: UnaCoder | last post by:

Hi, I'm trying to use client side JavaScript from an HTML file to open and make changes to an Excel SpreadSheet using ADO w/ ODBC. What a pain it is to do this. Anyways, I am able to open the...

Javascript

jump to link in page in javascript generated HTML

by: dark.peony | last post by:

Hi, (--1--) I'm trying to find a way to jump to a link (<a href="ref"></a>) in a page that is generated with javascript. The source view of the page only shows the javascript methods. The...

Javascript

inner html is not working

by: rajasekar.karthik | last post by:

In inner html we are using a javascript function i want to now how to call this function. <div style='padding-left:130px;' id='bowling'> </div> <div...

HTML / CSS

How can I execute Javascript from codebehind...

by: Hakan ÖRNEK | last post by:

Hi , I register client scripts like this; -------------------------------------------------------------------------- ----------- Public Sub CreateClientAlert(ByVal Message As String, ByVal...

Visual Basic .NET

Displaying a table with inner HTML

by: Cogito | last post by:

My program builds several tables using inner HTML. All the tables are displayed only when the program terminates. How can I make it display one table at a time and then wait for a click before...

Javascript

Execute JavaScript from server side

by: Peter | last post by:

I have a HoverMenuExtender which contains an asp:PlaceHolder, this place holder has a User Control and this control contrains a Button. The problem I am having is after the button fires the click...

ASP.NET

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA