如何将Onchange放在Ajax返回的html select上

Question

I have a problem putting Onchange() on a ajax returned html on my form.

Basically I have clients listed in a select.

<select name="company" id="company">                                                            
   <?php 
       $sqlget1 = "SELECT * FROM clients WHERE 1=1 ORDER BY company ASC;";
       $resget1 = mysql_query($sqlget1);
       while($row1 = mysql_fetch_array($resget1)) {                                                            
   ?>                                                            
       <option value="<?php echo $row1['id']; ?>"><?php echo $row1['company']; ?></option>                                                                                                                        
   <?php
       }
   ?>
</select>

And when some one selects a client, im using Ajax to fetch projects that are assigned to that client.

$('#company').change(function() {                        
    var selectedProject = $("#company option:selected").val();
    $.ajax({
        type: "POST",
        url: "get_projects.php",
        data: { projects : selectedProject } 
    }).done(function(data){
        $("#response").html(data);
    });
});

It gets returned back to

<div id="response"></div>

The code for get_projects.php is

<?php
include('inc.php');
if(isset($_POST["projects"])) {      
    $projects = $_POST["projects"];    
    $sqlget2 = "SELECT * FROM projects WHERE cid=\"$projects\" ORDER BY pname ASC;";        
    $resget2 = mysql_query($sqlget2);
    echo '<select name="project" id="project" class="select2 form-control">';
    echo '<option value="">-- Select a project --</option>';
    while($row2 = mysql_fetch_array($resget2)) {                                                            
?>                                                            
       <option value="<?php echo $row2['id']; ?>" pstatus="<?php echo $row2['pstatus']; ?>" ptype="<?php echo $row2['ptype']; ?>"><?php echo $row2['pname']; ?></option>                                                                                                                        
<?php
    }
    echo '</select>';
 }
?>

Now when i use on change function on the returned html from ajax it is not working.

I tried to see the source code and found out that it is not there atall. It only shows the <div id="response"></div>

But i can see the result on the form but cant see the source in the source code.

Hence i thought that's why the Onchange() is not working for <select name="project" id="project" class="select2 form-control"> because it is not showing.

Answer 1

When you use ajax, you add a piece of html later to the DOM (browsers view), because you use .change the onchange is only added to the '#company' elements wich already exist in the browser.

You need to bind the onchange after you appended the html. for example:

$('#company').change(function() {        
    onCompanyChange()                
});

function onCompanyChange(){
    var selectedProject = $("#company option:selected").val();
    $.ajax({
        type: "POST",
        url: "get_projects.php",
        data: { projects : selectedProject } 
    }).done(function(data){
        $("#response").html(data);
        $('#company').change(function() {        
            onCompanyChange()                
        });
    });
}

OR

You can also use an on change, on change does work with elements added later to to the dom. so this code works with elements wich already exists and new added elements with for example ajax

$("#company").on("change",function(){
    console.log("change");
});

Answer 2

I see, the data which is return from Ajax is object
You should parse it to get the raw content an set into DIV

Answer 3

When you are dynamically adding mark up to the page the javascript doesn't know about the controls you have added through php.

Try finding the newly added control like this:

var select = document.getElementById('project');

Then you should be able to fire your on change method

Answer 4

Not tested, but it should work

<?php
include('inc.php');
if(isset($_POST["projects"]))
{
$projects = $_POST["projects"];    
$varOut = "";
$sqlget2 = "SELECT * FROM projects WHERE cid=\"$projects\" ORDER BY pname ASC;";        
$resget2 = mysql_query($sqlget2);
$varOut .= '<select name="project" id="project" class="select2 form-control">';
$varOut.= '<option value="">-- Select a project --</option>';
while($row2 = mysql_fetch_array($resget2))
{                                                            
    $varOut.= "<option value=" . $row2['id'] . " pstatus=". $row2['pstatus']. ">ptype=".$row2['ptype']."><".$row2['pname']."></option>";                                                                                                                       
}
$varOut.= '</select>';
}
echo $varOut;
?>

Answer 5

I've finally solved the issue.

Basicall i just pasted the Onclick() script for '#projects' inside the get_projects.php file.

So now every time when it comes from ajax it also brings the javascript as well.

Answer 6

Try below code. Hope this works fine.

$(document).ready(function() {
    $(document).on('change', '#company', function() {
        var selectedProject = $("#company option:selected").val();
        $.ajax({
            type: "POST",
            url: "get_projects.php",
            data: { projects : selectedProject } 
        }).done(function(data){
        $("#response").html(data);
        });
    });
});