CODEWITHSUNDEEP
javascriptjquerymysqlsqlajax
Xravn
Xravn

Reputation: 254

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);

                }
            });
        });

Upvotes: 0

Views: 94

Answers (1)

Dhara Parmar
Dhara Parmar

Reputation: 8101

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

});

Upvotes: 1

Related Questions