CODEWITHSUNDEEP
phpjavascriptjqueryajaxcodeigniter
user2652367
user2652367

Reputation: 53

Return table row as a HTML code via ajax and add in table

I am coding an application which fetches the data from data base on the basis of id given and return row in table, it is a bar code billing module, it .append the row as the barcode string given, but the problem which I am facing, when I am returning table row as a HTML code <tr>..</tr>, via ajax I cannot see the new table row printed(added) on my table.

Here is my view:

 <table class="table table-bordered">


              <thead>
                <tr>
                  <th>S No.</th>
                  <th>Particular</th>
                  <th>QTY</th>
                  <th>Cost</th>
                <th>Discount</th>
                <th>Discard</th>


                </tr>
              </thead>

               <tbody class="todo_list">
               <?php echo $list;?>
             <input type="hidden" name="bill_ref" value="<?php echo $bill_ref ?>"/>
             <input type="hidden" name="date" value="<?php echo $date ?>"/>

               </tbody>
               <?php echo $total_bill; ?> 

                <div id="bill_tbl">
                      <--!MY NEW ROW SUPPOSED TO BE ADDED HERE!-->
            </div>
            </table>

My ajax JS:

 <script type="text/javascript">
$(document).ready(function(){


               $("#c_id").change(function(){
                     var send_data=$("#c_id").val();
                     $.ajax({
                        type:"post",
                        url:"billing_table",
                        dataType: "html",

                        data:"i_id_post="+send_data,
                        success:function(data){
                              $("#bill_tbl")..after(data);

                        }

                     });
               });
           });
</script>

and my controller (for testing purpose i am operating my DB part in controller i am sorry for this):

public function billing_table()
    {
    $b_barcodestring=$this->input->post('b_barcodestring');
    $i_id=$this->input->post('i_id_post');
    if($i_id==''&& $b_barcodestring!='')
    {

    echo $b_barcodestring;

    }
    else if($b_barcodestring=='' && $i_id!='' )
    {


    //i want to print sumple this dummy row in my table
    echo '<tr ><input type="hidden" name="counter[]" value="ssss"></tr><tr ><td>+counter+</td>  <input type="hidden" name="particular[]" value="Greting Card" ><td>'.$i_id.'</td>  <td>  <input type="number" name="qty[]" value="+qty_cal+"></td> <td> <input type="hidden" name="cost[]" value="150" >150</td> <td><input type="hidden" name="discount[]" value="N/A">N/A</input></td> <td ><button class="btn btn-danger"><i class="icon-remove icon-white"></i>Delete</button></td></tr>';
    }

    $this->output->enable_profiler(TRUE);
    }

Here is the FIDDLE.

Upvotes: 0

Views: 5587

Answers (3)

Vinod Louis
Vinod Louis

Reputation: 4876

you can change the div to table and try this it will work 

 function addrow(){
     $("#mytable").after("<tr><td>1</td><td>1</td><td>1</td></tr>");
 }

working fiddle here

In your case change this div(bill_tbl) to table

Upvotes: 0

Drixson Ose&#241;a
Drixson Ose&#241;a

Reputation: 3641

It should be

$("#c_id").change(function(){

    var send_data=$("#c_id").val();
    var b_barcodestring = $("#b_id").val(); //your barcodestring , I just supplement it cannot find where you getting it

    $.ajax({
    type:"post",
    url:"billing_table",
    dataType: "html",
    data:{
      i_id_post : send_data, //This is the correct format for your data to send
      b_barcodestring : b_barcodestring
    },
    success:function(data){

      $("#bill_tbl").append(data);

    }

});

Upvotes: 0

Nil&#39;z
Nil&#39;z

Reputation: 7475

Change the following line in the JS function

success:function(data){
      //$("#bill_tbl")..after(data);
      $(".table").append(data);
}

Remove the div#bill_tbl from the table

Upvotes: 4

Related Questions