I want to update table content without refreshing the page but I fill the table using a loop on the same page. Here is the code I use:
<div id="items_table">
<div class="table-responsive" id="table_allitems">
<table id="products_all" class="table-sm table-bordered table-hover" style="width: 100%;">
<thead class="table-secondary table-hover">
<tr>
<th scope="col">
<center>Код</center>
</th>
<th scope="col">
<center>Име</center>
</th>
<th scope="col">
<center>Баркод</center>
</th>
<th scope="col">
<center>Група</center>
</th>
<th scope="col">
<center>Мярка</center>
</th>
<th scope="col">
<center>Количество</center>
</th>
<th scope="col">
<center>Обект</center>
</th>
<th scope="col">
<center>Доставна цена</center>
</th>
<th scope="col">
<center>Продажна цена</center>
</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="skladove_table">
<?php
$query_checkObekt = "SELECT * FROM obekti WHERE owner='$user_hash'";
$result_checkObekt = mysqli_query($conn, $query_checkObekt);
if(mysqli_num_rows($result_checkObekt) > 0) {
$query = "SELECT * FROM items WHERE owner ='$user_hash'";
$result=mysqli_query($conn, $query);
while($row = mysqli_fetch_assoc($result))
{
echo '<tr id="' . $row['unique_id'] . '" onmouseover=showItem(' . $row['unique_id'] . ');>';
echo "<td>" . "<center>" . $row['custom_id'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['name'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['barcode'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['grupa'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['quantity_type'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['quantity_number'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['obekt'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['price_delivery'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['price_sale'] . "</center>" . "</td>";
echo "<td style='width: 1%; padding-left: 1%; padding-right: 1%;' onclick='deleteItem(" . $row['unique_id'] . ");'><i class='fa fa-close'></i>"."</td>";
echo "</tr>";
}
} else {
//no records found
}
?>
</tbody>
</table>
</div><br
To add new item I use iframe modal and what I want is after closing the modal or just pressing one button table to get refreshed (and if possible to stay on the same page) with the new info without refreshing the page.
Related
I have a row of data, which when clicked, show information about the object.
But I also have a button on the row, which when clicked performs some jquery wizzardry.
Anyway, I can't seem to prevent the row click and just fire the button stuffs.
I've tried:
return false;
e.preventDefault();
e.stopPropagation();
This is the function.
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
I have all 3 in there at the moment, but that's just for example. Although I have tried all 3 in there, but I have also tried each one separately.
Heres the HTML
<div class="row" id="check_container">
<div id='table_holder' class="col-md-12" >
<table id="org_table" class="sortable table table-striped tablesorter">
<?php
if(empty($org_data2)) {
// if there is no data for the selected filter
echo "There are no organisations set up.";
} else {
echo "
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sub Orgs</th>
<th>Locations</th>
<th>Users</th>
<th>Compliance</th>
<th>O/D Checks</th>
<th>O/D Training</th>
<th>Renewal</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
";
foreach ($org_data2 as $orgs) {
if(!$orgs->descendant) {
echo "<tr id='" . $orgs->org_id . "' class='edit_org_row clickable'>";
echo "<td>" . (($orgs->ancestor)?'<div id="' . $orgs->org_id . '" class="show_sub_orgs btn btn-primary btn-xs" data-toggle="tooltip" title="Show Sub-Orgs"><i class="fa fa-expand" aria-hidden="true"></i></div>':'') . "</td>";
echo "<td data-title='Name'>" . $orgs->org_name . "</td>";
echo "<td data-title='Sub Orgs' class='text-center'></td>";
echo "<td data-title='Locations' class='text-center'>" . $orgs->locations . "</td>";
echo "<td data-title='Users' class='text-center'>" . $orgs->users . "</td>";
echo "<td data-title='Compliance' class='text-center'></td>";
echo "<td data-title='O/D Checks' class='text-center'>" . $orgs->checks . "</td>";
echo "<td data-title='O/D Training' class='text-center'>" . $orgs->training . "</td>";
echo "<td data-title='Renewal'>" . date("d/m/Y", strtotime($orgs->renewal_date)) . "</td>";
echo "<td data-title='Actions'><div data-id='3' id='" . $orgs->org_id . "' class='btn admin_login btn-success btn-sm' data-toggle='tooltip' title='Login as customer'>Login</div><div data-id='2' id='" . $orgs->org_id . "' class='btn btn-danger btn-sm' data-toggle='tooltip' title='Disable customer'>Disable</div></td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
</div>
What am I doing wrong?
When you delegate to a child element you need to use e.stopImmediatePropigation()
Jquery uses it's own event system and this will stop any execution on the elements delegated to from the parent. e.stopPropigation() will allow all events delegated from the same parent to fire
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
})
I am new to mvc and I want to populate my table from database and I am having trouble with showing the data with the use of javascript to show it on my index. I am using a php function to query the sql script and i am using PDO.
index.php
<tr>
<th>last_name</th>
<th>first_name</th>
<th>middle_name</th>
<th>gender</th>
<th>age</th>
<th>course</th>
</tr>
<tr>
<div id=content> </div
</tr>
profile.php
public function showProfileRecord(){
require_once 'app/lib/config/config.php';
$result = $conn->prepare("SELECT a.`first_name`, a.`middle_name`, a.`last_name`,a.`gender`,a.`age`, a.`course` FROM account a ORDER BY name ASC");
while ($rows = $result->fetch()) {
$records = $records . "<td>" . $rows["last_name"] . "</td> <td>" . $rows["first_name"] . "</td> <td>" . $rows["middle_name"] . "</td> <td>" . $rows["gender"] . "</td> <td>". $rows["age"] . "</td> <td>" . $rows["course"] . "</td>";
}
$returnData[]["records"] = $records;
echo json_encode($returnData);
}
functions.js
showProfileRecord = function(data){
data = JSON.parse(data);
$("#content").append("\
<tr>" + data[0].records + "</tr>\
");
}
The data table displays the the contents of the database but still shows an error message: no data available in table.
how do i fix this, just show the data without the error message
<table name= "displaycase" id="example1" class="table table-bordered table-striped" method = "post">
<thead>
<tr>
<th>Case Title</th>
<th>Court</th>
<th>Dockent Number</th>
<th>Nature</th>
<th>Actions Taken</th>
<th>Status</th>
<th>Due Date </th>
</tr>
</thead>
<tbody>
<tbody class = "searchable">
<?php
if (mysql_num_rows($result) > 0) {
// output data of each row
while ($row = mysql_fetch_assoc($result)) {
echo
"</td><td>" . $row["CaseTitle"] .
"</td><td>" . $row["Court"] .
"</td><td>" . $row["docketNum"] .
"</td><td>" . $row["nature"] .
"</td><td>" . $row["actionsTaken"] .
"</td> <td>" . $row["status"] .
"</td> <td>" . $row["dueDate"] .
"</td></tr>";
}
} else {
}
?>
</tbody>
-
<script>
$( document ).ready(function() {
$("#example1").DataTable({
"paging": false,
"ordering": true,
"info": false,
"language": {
"emptyTable": "No Data"
}
})
});</script>
Remove method = "post" from <table> tag.
Why Two <tbody> tag present inside <table>. Remove One.
Why </td> is closed when it didn't opened yet.
No <tr> opened.
UPDATE CODE:
<table name= "displaycase" id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Case Title</th>
<th>Court</th>
<th>Dockent Number</th>
<th>Nature</th>
<th>Actions Taken</th>
<th>Status</th>
<th>Due Date </th>
</tr>
</thead>
<tbody class = "searchable">
<?php
if (mysql_num_rows($result) > 0) {
while ($row = mysql_fetch_assoc($result)) {
echo
"<tr>".
"<td>" . $row["CaseTitle"] ."</td>".
"<td>" . $row["Court"] ."</td>".
"<td>" . $row["docketNum"] ."</td>".
"<td>" . $row["nature"] ."</td>".
"<td>" . $row["actionsTaken"] ."</td>".
"<td>" . $row["status"] ."</td>".
"<td>" . $row["dueDate"] ."</td>".
"</tr>";
}
} else {
}
?>
</tbody>
</table>
[NOTE: The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead
That's because you missed a tr and instead you echo </td> in the echo here
while($row = mysql_fetch_assoc($result)) {
echo
"<tr><td>".$row["CaseTitle"].
"</td><td>".$row["Court"].
"</td><td>".$row["docketNum"].
"</td><td>".$row["nature"].
"</td><td>".$row["actionsTaken"].
"</td> <td>".$row["status"].
"</td> <td>".$row["dueDate"].
"</td></tr>";
}
I'm using this code to expand database table row to reveal more information about the item, but it does exactly the opposite.
$("td span.expand").click(function() {
$(this).parents("tr.main").nextUntil("tr.main"). toggle();
});
When I open the table all rows that must be hidden are being shown and if I click on any main row it will hide that rows.
How to invert this?
Here's part of code I use for table (I know, it's messy):
echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px">Nr.</th>
<th width="75px">Mašīnas numurs</th>
<th width="75px">Reģistrācijas numurs</th>
<th width="75px">Marka / Modelis</th>
<th width="75px">ID</th>
</tr>';
//Ieraksta datus tabulā
while($row = mysql_fetch_array($query))
{
echo "<tr class='main'>";
echo "<td width='30px'>" . $row['nr'] . "</td>";
echo "<td width='75px'>" . $row['numurs'] . "</td>";
echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
echo "<td>" . $row['modelis'] . "</td>";
echo "<td>" . $row['apzim'] . "</td>";
echo "</tr>";
echo "<tr class='hidden'>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "</tr>";
}
echo "</table>";
echo "<br>";
Try using CSS in your file and include the following:
<style>
.expand
{
display:none;
}
</style>
I use a jQuery-based toggle script, and that's what I used when I had a similar problem such as this.
You may need to use .hidden { display:none; } instead.
How to disable a href link if there's value in PR row from database? Like my sample table below, if there PR disable the link.
Table
item_name | PR | < Add > |
ballpen | pr100 | <a> |
pencil | | <a> |
Paper | | <a> |
Clip | | <a> |
Codes,
<?php
echo '<table>
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>PR</th>
<th><Add></th>
</tr>
</thead>';
echo '<tbody>';
$i = 1;
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center"><a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a></td>
</tr>';
}
?>
I want to disable ballpen row <a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a> if there's PR in row
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center">';
if (!empty($row['pr'])){
echo '<a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a>';
}
echo'</td></tr>';
}
You can use the following:
...
echo '<td align="center"><a class="fancybox" href="'.(($row['pr']!="")?'addpr.php?counts='.$row["id"]:'#'). '"></a></td>';
if you are trying to remove the modal (fancybox) functionality then you can do so by removing the class of the link with jquery or javascript..
example
$('a[href="PR100"]').removeClass('fancybox');
this checks each link on the page. if the link has an href attribute that is equal to PR100, we remove the fancybox class which would prevent the popup.
your question is pretty cryptic though. I'm guessing this is what youre asking..
<?php
echo '<table>
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>PR</th>
<th><Add></th>
</tr>
</thead>';
echo '<tbody>';
$i = 1;
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
$url = $row['pr'] ? 'addpr.php?counts=' . $row['pr'] : '#';
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center"><a class="fancybox" href="{$url}"></a></td>
</tr>';
}
?>
Set the href attribute to "javascript:;"