Xravn Xravn - 7 months ago 19
SQL Question

How do i call ajax while appending the table row?

I have a table with static one row and have button for adding as much rows as possible.But the problem is in the static row i can easily call the ajax function by using the div id but i cannot call the ajax in appended row. How can i fix this? Below is the code of appending the rows to the table

jQuery(function(){
var counter = 1;
var count = 0;
jQuery('a.add-row').click(function(event){
event.preventDefault();
counter++;
count++;
var newRow = jQuery('<tr><td><label type="text" />'+ counter +'</td><td><select name="client_name[]" class="client_id" ><option value="">Select Client Name</option><?php foreach ($client as $client_name) {
echo '<option value="' . $client_name->client_id. '">' . $client_name->client_name . '</option>';
}?></select></td><td><select name="order_id[]" class="order_id"></select></td><td><input type="text" name="item[]' +
'"/></td><td><input type="text" name="color[]' +
'"/></td>' +
'<td><input type="checkbox" name="knitting['+ count +'][]" value="0"></td>' +
'<td><input type="checkbox" name="mending['+ count +'][]" value="1"></td>' +
'<td><input type="checkbox" name="dyeing['+ count +'][]" value="2"></td>' +
'<td><input type="checkbox" name="iron['+ count +'][]" value="3"></td>' +
'<td><input type="checkbox" name="linking['+ count +'][]" value="4"></td>' +
'<td><input type="checkbox" name="mending['+ count +'][]" value="5"></td>' +
'<td><input type="checkbox" name="iron['+ count +'][]" value="6"></td>' +
'<td><input type="checkbox" name="packing['+ count +'][]" value="7"></td>' +
'<td><input type="checkbox" name="data['+ count +'][]" value="8"></td>' +
'<td><input type="checkbox" name="chalan['+ count +'][]" value="9"></td></tr>');
jQuery('table.data_table').append(newRow);
});
});


And my ajax code is :

$(".client_id").on('change', function (e) {
e.preventDefault();
var client_id = $(this).val();
$.ajax({
url: '<?php echo base_url('followUp_controller/getOrder_byClient'); ?>',
type: 'POST',
data: 'client_id=' + client_id,
dataType: 'json',
success: function (response) {
// console.log(response);
// console.log('group district');
var items = '<option value="">Select Order No</option>';
$.each(response, function (index, value) {
items += "<option value='" + value.order_id + "'>" + value.order_no+ "</option>";
});
$(".order_id").html(items);

}
});
});

Answer

Just take click event of client_name:

$(document).on('change', '.client_id', function(){
    // call ajax inside it
    $.ajax({
        url: "/form.php",
        type: "post",
        data: data
    });

});
Comments