2017-01-15 12 views
0

私はmysqlデータベースからデータをほとんど読み込まないためにjQueryのデータテーブルに取り組んでいます。jQueryデータテーブルを使用してonChangeイベントを使用してHTML選択タグオプション値から値を取得するにはどうすればよいですか?

<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>User Id</th> 
      <th>Address</th> 
      <th>Package Name</th> 
      <th>Status</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
</table> 

PHPページから、私は怒鳴るようにデータをロードしています:ここで

はhtmlコードがある

// skipping more code... 

$nestedData[] = " 
<select class='form-control changeStatus' name='status'> 
    <option value=''>--Select--</option> 
    <option value='1|$client_id' $statusMsg1>Active</option> 
    <option value='2|$client_id' $statusMsg2>Blocked</option> 
</select>"; 

今ロードされたデータは次のようになります:

enter image description here

今度はAjaxリクエストをhtml selectedオプションの値が変更されたときに呼びたいと思います。それはAjax要求を鳴らしコードで正常に呼び出しています。

jQueryのデータテーブルのためのjQueryのコードと私のAjaxリクエスト:

$(document).ready(function() { 

    var dataTable = $('#employee-grid').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax":{ 
      url :"server_processing.php", // json datasource 
      type: "post", // method , by default get 
      error: function(){ // error handling 
       $(".employee-grid-error").html(""); 
       $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); 
       $("#employee-grid_processing").css("display","none"); 

      } 
     } 
    }); 

    $("#employee-grid").on('change', function() { 
     var status = $('.changeStatus').val(); 
     alert(status); 
     $.ajax({ 
      url : "<?php echo SITE_URL . 'toplevel/update-data'; ?>", 
      data : { 
       'statusChange' : status 
      }, 
      type : 'POST', 
     }); 
    }); 

}); 

が、私は、それは例えばのために

最初のオプション値を渡していますたびに、オプションを選択しますこのselectedオプションタグは、これらの値を持っている:

<option value='1|11' $statusMsg1>Active</option> 
<option value='2|11' $statusMsg2>Blocked</option> 

それは常に1|11値を渡しています!それは私の選択されたオプション値を渡す必要があります。それが起こっている理由:(

注意を私は理解していない:私はjQueryのデータテーブルを使用してカスタムのjQueryコードは異なる方法で使用されるべきだと思う、私はそれを解決した

+0

複数の行があります。 PHPから印刷されているのか、それとも1つだけですか? –

答えて

1

まあみんな、

私が必要。そのようなものを使用する:

$('#employee-grid').on('change', '.changeStatus', function(){ 
    // testing..... 
    var status = $('.changeStatus').val(); 
    alert(status); 
}); 

をソリューションは、上の()の呼び出しで2番目の引数としてターゲット要素のためのセレクタを提供することにより、イベントの委任を使用することです

関連する問題