Bootstrap table not recognizing rows generated using AJAX - php

For reference :
I'm working with Bootstrap-table using Bootstrap v3.3.6
I'm trying to populate my table using AJAX and jQuery, but the problem is that when i do so none of bootstrap extensions seems to work with those rows.
I'm working on a data table using some extensions as the following :
`<table id="table" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true" data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th>ID</th>
<th>ISBN</th>
<th>Description</th>
</tr>
</thead>
<tbody id="books-data">
<!-- table data rows to be inserted here -->
</tbody>
`
If i'm filling the table using PHP everything seems to be working fine, by 'everything' i mean displaying data as well as the automatically added attributes to table rows as adding a chekbox in the first <td> and data-index attribute for every column in every row.
However, filling the table using AJAX only fills the table with data and there is no interaction between the table and its rows, no bootstrap-table attributes or checkboxes are added as well as no extensions seems to be working with those rows (for example export, rows selection ...)
For more detail :
When embedding PHP code into table columns:
source code :
while ($row = mysqli_fetch_array($result)){ ?>
<tr>
<td></td>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['isbn']; ?></td>
<td><?php echo $row['description']; ?></td>
</tr>
<?php } ?>
Generated code by bootstrap-table:
<tr data-index="0">
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style>
<!-- data -->
</td>
<td style> <!-- the same thing... --> </td>
</tr>
When generating rows dynamically using AJAX :
<tr>
<td></td>
<td><!-- data --></td>
<td><!-- data --></td>
<td><!-- data --></td>
</tr>
jQuery function used :
$(function()
{
$.ajax({
url:"fetch_books.php",
method:"POST",
dataType:"json",
success:function(data)
{
for(let count=0; count<data.length; count++)
{
let html_data = '<tr><td></td>';
html_data += '<td>'+data[count].id_livre+'</td>';
$('#books-data').append(html_data);
}
}
})
});
I want the result to be the same as when i embed php inside each column in my table, i don't even know why i'm having this issue, i need some help.

Have you tried using their method for loading JSON instead of your own jQuery?
From: https://bootstrap-table-docs3.wenzhixin.net.cn/getting-started/#usage-via-javascript
"We can also use remote URL data by setting url: 'data1.json'.
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
<table id="table"></table>
If you don't want to use their supplied method then maybe try adding the classes and data-index etc. that you see in the bootstrapped table to the table you're generating...
let html_data = '<tr><td></td>';
=>
let html_data = '<tr data-index="0"><td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>';
though I don't think that will get you working... it should at least style things correctly. You'll need to use a way that gets everything pulled into the DOM correctly. I'd try using Bootstrap-table's method for loading JSON they have supplied above. You might have to create a PHP script that takes some arguments and returns properly formatted JSON for their method to work.

Related

How to open a pop-up window based on selected id using radio button and how to pass that selected id to pop-up window, using php,MySQL

I am using mysql_fetch_array() to fetch data from MYSQL and I am displaying that data in the form of HTML table using PHP. HTML Table's first column is primary key of data base table. I added radio button to it while displaying fetched result. I have UPDATE and DELETE buttons on top of HTML table. If I select a radio button and click UPDATE/DELETE, a pop-up window should appear to display that selected row values. For this I think I need to pass selected row id/key to
pop-up window. If any one know how to achieve it, let me know!
<?php
while($rows=mysql_fetch_array($result))
{
?>
<table>
<tr>
<td><? echo $rows['ID']; ?></td>
<td><input type="radio" name="" value=""><? echo $rows['Name']; ?></td>
<td><? echo $rows['Surname']; ?></td>
<td><? echo $rows['Number']; ?></td>
</tr>
</table>
<?php
}
?>
Thanks In Advance!!!
please see this code
<td><input type="radio" name="" value="" onclick="alert("<?php echo "you have selected ".$rows['ID']." want to update or delete??"; ?>")"><? echo $rows['Name']; ?></td>
hope it will usefulllll
You can perform UPDATE and DELETE operation by using below code.
<table>
<tr id="row_1" data-idval="1"><td>1</td>
<td>XYZZZZ</td>
<td>PQR</td>
<td>----</td>
<td><span class="update">UPDATE</span></td>
<td><span class="delete">DELETE</span></td>
</tr>
<tr id="row_2" data-idval="2"><td>2</td>
<td>XYZZZZ</td>
<td>PQR</td>
<td>----</td>
<td><span class="update">UPDATE</span></td>
<td><span class="delete">DELETE</span></td>
</tr>
<tr id="row_3" data-idval="3"><td>3</td>
<td>XYZZZZ</td>
<td>PQR</td>
<td>----</td>
<td><span class="update">UPDATE</span></td>
<td><span class="delete">DELETE</span></td>
</tr>
</table>
Javascript:-
<script type="text/javscript">
function yesnodialog(button1, button2, element){
var btns = {};
btns[button1] = function(){
var id_val = element.parents('tr').data('idval');
alert(id_val);
//write here update code using ajax here
$(this).dialog("close");
};
btns[button2] = function(){
// Do nothing
$(this).dialog("close");
};
$("<div></div>").dialog({
autoOpen: true,
title: 'Condition',
modal:true,
buttons:btns
});
}
$('.update').click(function(){
yesnodialog('Yes', 'No', $(this));
})
</script>
Same you can do for DELETE as well.
See live demo here

Table row delete using jquery

i have made this code to remove table row :
jQuery('tr#rowAttend1').remove();
HTML :
Three rows with same id .
For example :
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend1" ><td>ddddd</td></tr>
<tr id="rowAttend1" ><td>ccccc</td></tr>
but
i want all three to be removed
it works fine in all browsers except ie7 ?
Can anybody help me?
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend2" ><td>ddddd</td></tr>
<tr id="rowAttend3" ><td>ccccc</td></tr>
$('#rowAttend1,#rowAttend2,#rowAttend3').remove();
Change the ids to unique ids and then you can remove the table row
Class example
<tr class="rowAttend1" ><td>ssss</td></tr>
<tr class="rowAttend1" ><td>ddddd</td></tr>
<tr class="rowAttend1" ><td>ccccc</td></tr>
$('.rowAttend1').remove();
This will remove all elements with the class rowAttend
Your ID is not unique please use different ID for like,
<tr id="rowAttend1" ><td>ssss</td></tr>
<tr id="rowAttend2" ><td>ddddd</td></tr>
<tr id="rowAttend3" ><td>ccccc</td></tr>
(OR)
Pass particular eventcatch(e) (i.e) (this) to that javascript function and remove from that this like,
$(this).remove();
some different way try if u like
<table>
<tr><td>one</td> <td><button class="removeTR"> one</button></td> </tr>
<tr><td>two</td> <td><button class="removeTR"> two</button></td> </tr>
<tr><td>three</td> <td><button class="removeTR">three</button></td> </tr>
<tr><td>four</td> <td><button class="removeTR"> four</button></td> </tr>
<tr><td>five</td> <td><button class="removeTR"> five</button></td> </tr>
</table>
$("tr .removeTR").live('click', function() {
$(this).parent().parent().remove();
});
or some thing that gives good smooth row deleting
$("tr .removeTR").live('click', function() {
$(this).parent().parent().fadeOut(1000);
setTimeout(function(){$(this).parent().parent().remove();}, 1000);
});

jquery datatable sorting not working for run time values

I used jquery data table for sorting. It works fine under normal condition. If i changed the value in run time, the sorting is not working.
This is my table data
<table width="94%" cellpadding="2" cellspacing="1" class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" align="right" id="pls-play" >
<th width="44" align="center" ># No </th>
</tr>
</thead>
<tbody>
<tr id="116706">
<td align="left" id='1' >test</td>
</tr>
<tr id="116707">
<td align="left" id='2'>bbb</td>
</tr>
<tr id="116708">
<td align="left" id='3' >xxx</td>
</tr>
</tbody>
</table>
Jquery method used for sorting is :
$(document).ready(function() {
$('#pls-batting').dataTable( {
} );
} );
By clicking the '# No' head the corresponding column displayed in asc and desc order respectively. These TD values will be changed onload by using
document.getElementById(3).innerHTML = 'something';
So as a result the 3rd column value is 'something'. So sorting will be done by this values. But it is not working.
It takes the old values. Please help me. Thanks
In DataTables, you should not update content of HTML cell. DT uses internal JavaScript array structure for searching/sorting and this cell is only a display value.
To update some cell you will need to use DT fnUpdate function see http://datatables.net/api#fnUpdate. Example of updating cell in the table is:
var oTable = $('#example').dataTable();
oTable.fnUpdate( 'New content', 10, 3 );
Note that cells are referenced by row/cell positions. If you don't know row/cell position then you can use http://datatables.net/api#fnGetPosition function to find position of TR with id 3 and use this info to update cell data using the fnGetData function (you can find example on the http://datatables.net/api#fnGetPosition)
Jovan

How to highlight multiple items with same name in a dynamic management system

Ok, I have a backend system that watches tables update live (made in php) and i'm looking for a method where I can hover over an ID on one table and all the same IDs across tables would highlight also.
I can't have a page with just their ID as the page includes watching other live site data that needs to be watched.
Seeing the HTML you're using would be helpful, but maybe something like (assume the database IDs are in TDs with a class of 'dbid')
(fair warning I did not have time to test this, but it should work or at least convey the idea)
$('td.dbid').hover(function() {
id = $(this).html();
$("td.dbid:contains('" + id + "')").css('background-color','yellow');
},
function () {
id = $(this).html();
$("td.dbid:contains('" + id + "')").css('background-color','none');
});
Sample HTML
<table>
<tr>
<td class="dbid">14</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">14</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">13</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">14</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">13</td>
<td>blah</td>
</tr>
</table>

Passing table data with post variables

Basically I have a table with a bunch of numbers coming from a database with columns for totals/subtotals. I do not intend to add any of the totals to the database, but I need to pass the total numbers from one page to the next. I can't seem to properly pass them as post variables using PHP... I'm wondering if this is a bad tactic firstly, secondly what should I do instead?
And if this is possible, how would I go about doing it? I haven't been able to derive the text between the < td >'s from using $_POST['tdname'].
Example code:
<form method="POST" action="newcivilreport2.php">
<div style="width:800px;text-align:left;margin:0 auto;padding-bottom:5px;">A. PENDING BALANCE</div>
<table border="1" style="width:800px;" ID="tableA">
<th style="width:40%;"></th>
<th style="width:15%;">Civil</th>
<th style="width:15%;">Asbestos</th>
<th style="width:15%;">Domestic</th>
<th style="width:15%;">Total</th>
<tr>
<td>1. Pending Balance from Previous Month</td>
<td id="PendingCivil" name="PendingCivil">66</td>
<td id="PendingAsbestos">0</td>
<td id="PendingDomestic">0</td>
<td id="PendingTotal">0</td>
</tr>
</table>
<input type="submit" value="Save and Continue -->"></form></div>
newcivilreport2.php:
<?php
$_POST['PendingCivil'];
?>
POST will only send inputs like <input type='text|file|hidden|ect' />. Perhaps you would like to use AJAX. For example:
<table id="tData">
<tbody>
<tr>
<td class='dataVal1'>100</td>
...
$(document).ready(function() {
var toServer = {};
var data = $('#tData tbody tr td').each(function(key, value) {
toServer[$(this).attr('id')] = $(this).text();
});
$.ajax({
url: 'page.php',
data: toServer,
type: 'POST'
})
});
The <td> tag of a table does not provide values for a form.
Use a hidden field for your post:
http://www.w3schools.com/tags/att_input_type.asp
...
<td>1. Pending Balance from Previous Month</td>
<td id="PendingCivil">66<input type="hidden" name="PendingCivil" value="66"></td>
...
Also, is it inside of a form?

Categories