Ajax return and append HTML data into table row
Question
I have problem with ajax return html data. Idea is I have dynamic table that user can add or delete table row, in each of table row there is button that will show modals and user can choose Item, but after user add rows and choose item, item goes to first rows not to new row.
Please your help.
this is my HTML:
<tr id='addr0' class="itemsGroup">
<td>
1
</td>
<td width="240px">
<div class="input-group" >
<input type="text" name="barang_id" class="form-control" value="<?php echo @$rowID->barang_id != '' ? $rowID->barang_id : $this->session->flashdata('barang_id') ;?>">
<span class="input-group-addon" id="basic-addon1">
<a href="#myModalItems" class="trash" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list"></span></a></span>
</div>
</td>
<td>
<input type="text" name="barang_name[]" class="form-control" >
</td>
<td>
<input type="text" name="barang_satuan[]" class="form-control" >
</td>
<td>
<input type="text" name="barang_unit_price[]" class="form-control" >
</td>
<td>
<input type="text" name="barang_qty[]" class="form-control" >
</td>
</tr>
My Modal :
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Items</h4>
</div>
<div class="modal-body"><div class="panel panel-default" >
<div class="panel-heading">
<table id="mytablex" class="display" >
<thead>
<tr >
<th width="55px" style="text-align:center;"> </th>
<th width="55px" style="text-align:center;">No.</th>
<th width="240px" style="text-align:center;">Item No.</th>
<th width="240px" style="text-align:center;">Item Name</th>
</tr>
</thead>
<tbody>
<?php
$counter = 1;
if ($resultBarang) {
foreach ($resultBarang as $row) {
if ($counter%2 ==0) { $class = 'list01';}else {$class = 'list02';}
?>
<tr class="<?php echo $class;?>">
<td width="55px" align="center"><input type="radio" onclick="getItemsID(this.value);" name="supid" id="supid" value="<?php echo $row->barang_id;?>"></td>
<td width="55px" align="center"><?=$counter?>.</td>
<td width="240px" ><?=$row->barang_no;?></td>
<td width="240px" ><?=$row->barang_name;?></td>
</tr>
<?php $counter++;}} ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
after select checkbox i'm using this script :
function getItemsID(supid){
$.ajax({
type: 'post',
url: '<?php echo base_url();?>admin/po_trans_po/getItemsId',
data:'id='+supid,
success: function(data){
$(".itemsGroup").html(data);
$('#myModalItems').modal('hide');
}
});
}
and then this is my PHP file :
function getItemsId()
{
$id = $this->input->post('id');
$resultBarang = $this->db->query("select * from `st_po_barang` a,st_po_harga_barang c
where c.barang_id = a.barang_id
and now() between c.harga_start_date and c.harga_end_date
and a.barang_id = $id
");
$resultBarang = $resultBarang->row();
echo ' <td> ';
echo ' 1 ';
echo ' </td> ';
echo ' <td width="240px"> ';
echo ' <div class="input-group" >';
echo ' <input type="text" name="barang_id" class="form-control" value="'.$resultBarang->barang_no.'"> ';
echo ' <span class="input-group-addon" id="basic-addon1"> ';
echo ' <a href="#myModalItems" class="trash" role="button" data-toggle="modal"><span class="glyphicon glyphicon-list"></span></a></span> ';
echo ' </div> ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_name[]" value="'.$resultBarang->barang_name.'" class="form-control" > ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_satuan[]" value="'.$resultBarang->barang_satuan.'"class="form-control" > ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_unit_price[]" value="'.$resultBarang->harga_beli.'"class="form-control" > ';
echo ' </td> ';
echo ' <td> ';
echo ' <input type="text" name="barang_qty[]" class="form-control" > ';
echo ' </td> ';
return 1;
//redirect('admin/po_trans_po');
}
If i'm adding row table data , this return data keep in first row in table. How to return data in selected row?
Regards
2 answers
solution1
0 2015-12-21 05:13:36
Use .append to add data in table has class itemsGroup
function getItemsID(supid){
$.ajax({
type: 'post',
url: '<?php echo base_url();?>admin/po_trans_po/getItemsId',
data:'id='+supid,
success: function(data){
$(".itemsGroup").append(data);
$('#myModalItems').modal('hide');
}
});
}
solution2
0 2015-12-21 07:30:57
I'm using rowid when user click modals then i change javascript code into :
function getItemsID(supid){
ptrid = $('#ptrid').val();
$.ajax({
type: 'post',
url: '<?php echo base_url();?>admin/po_trans_po/getItemsId',
data:'id='+supid+'&ptrid='+ptrid,
success: function(data){
$('#'+ptrid).closest("tr").html(data);
$('#myModalItems').modal('hide');
}
});
}
ptrid is rowid that i pass when click modals. thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Highlighting row of a HTML table which is populated using AJAX return data
Onchange append data in table row using ajax
Return table row as a HTML code via ajax and add in table
Append a row to an html table with Jquery?
Ajax Data table Codeigniter query return only one row
Append data and display html table
Remove HTML table row with AJAX
Injecting html with append using ajax data
Append Jquery Ajax “data” as separate values in a table
jQuery AJAX - Append new data to table
Related Tags