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

Question

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.

instead of $("#bill_tbl")..after(data) try $("#bill_tbl").after(data) — Vinod Louis
– Vinod Louis, Commented Aug 5, 2013 at 8:53
@VinodLouis : ya i tried extra " . " was my typing mistake , its still not working — user2652367
– user2652367, Commented Aug 5, 2013 at 8:56
I don't think you can add a row to a table outside tbody or thead, i mean I think it won't be w3c compliant, but not sure if it's the origin of the issue. You should really consider review your output layout imho. — nubinub
– nubinub, Commented Aug 5, 2013 at 8:58
First check the received data in success method. simply alert that. if there was an error, make sure that you are not using CodeIgniter CSRF prevention feature. If so, just do a little search on SO to find the solution. — Hashem Qolami
– Hashem Qolami, Commented Aug 5, 2013 at 9:10

Nil'z · Accepted Answer · 2013-08-05 08:51:43Z

4

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

answered Aug 5, 2013 at 8:51

Nil'z

7,4831 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nil'z Over a year ago

have you checked that you are getting the correct response from ajax? Checked your console for the response you are getting?

Nil'z Over a year ago

what you have done in your jsfiddle, change to $(".todo_list").append(data);

Nil'z Over a year ago

Happie to help :D @user2652367

Drixson Oseña · Accepted Answer · 2013-08-05 09:01:02Z

0

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

    }

});

edited Aug 5, 2013 at 9:01

answered Aug 5, 2013 at 8:55

Drixson Oseña

3,6313 gold badges25 silver badges36 bronze badges

Comments

Vinod Louis · Accepted Answer · 2013-08-05 09:04:23Z

0

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

answered Aug 5, 2013 at 9:04

Vinod Louis

4,9061 gold badge31 silver badges50 bronze badges

5 Comments

user2652367 Over a year ago

i am not coding to add row on click, i want to get row that returned from ajx

Vinod Louis Over a year ago

just use the returned HTML string inside the function as a parameter if you data in success is a valid HTML string it will append just make sure its an table

Vinod Louis Over a year ago

what is your JSON string here ?

user2652367 Over a year ago

i am just asking...can it be done...if yes then please, prompt me with the hint

Vinod Louis Over a year ago

if you have any valid string like "<tr><td>1</td><td>1</td></tr>" you can pass it inside the function

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related