I'm having trouble mounting a table using .load () jquery.
My table is as follows.
<table id="table_test">
<thead>
<tr>
<th> COLUNA 1 </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My file assembles the following output.
<tr>
<td>
<span> Value 2</span>
</td>
</tr>
I'm using the following function.
<script type="text/javascript">
$(document).ready (function () {
$('# table_test'). load ('modules/a/processa.php? opt = 2');
});
</ script>
However it is unable to mount the rows in the table.
http://jsfiddle.net/marcoscarraro/7NsNu/
Any suggestions?
I think your problem is with $.
This should work $('#table_test').load('modules/a/processa.php?opt=2');.
There is quite a few typos/syntax errors in your question. You can try this below. I'm not sure what your data returns, but I hope it does return text properly. Let me know if this works.
HTML Structure:
<table id="table_test">
<thead>
<tr>
<th> COLUNA 1 </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS Code:
$(document).ready(function () {
$('#table_test tbody').load("modules/a/processa.php?opt=2",
function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
});
});
JS Fiddle:
http://jsfiddle.net/QztST/3/
Related
I am trying to display database into an html page. The data appears in my console but I cant figure out how to display it in an html table. I am not sure the function I need to add into console.log (data) for it to display onto to the page. This is what I have so far:
<button class="btn btn-primary" id="btn">Get Code</button>
<table class="table table-bordered">
<thread>
<tr>
<th>ID</th>
<th>City</th>
<th>Country</th>
<th>Rating</th>
</tr>
</thread>
<tbody id ="tdata">
</tbody>
</table>
<script>
$(function () {
$.getJSON("php.php", {tableName:"travel"}, function(data){
if (data["code"] == "error"){
console.log(data["message"]);
}
else{
console.log(data);
}
console.log("returned hh");
});
});
console.log("returned");
</script>
</body>
</html>
Its no json structure example so you will have to replace "value.a" with the correct json values names.
After json is loaded:
$.each(data,function(i,value){
$('.table').append('<tr><td>value.a</td><td>value.b</td><td>value.c</td><td>value.d</td></tr>')
})
Hope this helps
I created a table with my PHP and database and added a delete button on the right of each of my element in my first column and I want this button to delete the row in my database but I don't know how to link my button to a PHP action
<table border="2" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col"><h6>Nom de l'Etape</h6></th>
<th scope="col"><h6>Description de l'Etape </h6> </th>
</tr>
</thead>
<?php
$req='SELECT * FROM Etape';
$resultat=$dbh->query($req);
while ($ligne=$resultat->fetch()) {
echo "<tr> <td>". $ligne[0]."<button type=\"button\" onclick=\"alert('Hello world!')\">delete</button></td><td>".$ligne[1]."</td> </tr>";
}
?>
</table>
The easiest way is to use ajax:
<?php
// Check if is background ajax query or user just enter page
// Is background ajax query, run PHP code
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'):
// RUN PHP CODE IN BACKGROUND (IN YOUR CASE: DELETE ROW FROM DB)
else:
// Is not ajax query - show HTML page
?>
<table border="2" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col"><h6>Nom de l'Etape</h6></th>
<th scope="col"><h6>Description de l'Etape </h6> </th>
</tr>
</thead>
<?php
// Your PHP function to get button from database
$req='SELECT * FROM Etape';
$resultat=$dbh->query($req);
while ($ligne=$resultat->fetch()) {
echo '<tr> <td>'. $ligne[0].'<button type="button" value="<?php echo $ligne[0]; ?>">delete</button></td><td>'.$ligne[1].'</td></tr>';
}
?>
</table>
<!-- Load jQuery -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
// Button click
$(document).on('click','button',function(e) {
// Get button value
var my_id = $(this).val();
// Prepare ajax query
$.ajax({
type: "POST",
dataType:"json",
// Set url to file itself
url: window.location.href,
// set data
data: "id=" + my_id,
beforeSend: function (data) {
alert('Sending');
},
success: function (data)
{
alert('Success');
},
error: function (data)
{
alert('Error');
}
});
});
</script>
<?php endif; ?>
resources/views/emp-list.blade.php
<script>
$(document).ready(function(){
$(".delete").click(function(e){
e.preventDefault();
idd = this.id;
$.ajax({
type:"post",
data:{"idd":idd, "_token":"{{csrf_token()}}",'_method': 'DELETE',},
url:"{{URL::to('delete_emp')}}",
success:function(res){
location.reload();
}
});
});
});
</script>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach($result as $row)
<tr>
<td>{{ $row->fname }}</td>
<td>
Delete
</td>
</tr>
#endforeach
</tbody>
</table>
api/http/controller/UserController.php
public function delete_emp(Request $request)
{
$id = $request->input('idd');
DB::delete('delete from emp where id = ?',[$id]);
}
routes/web.php
Route::get('delete_emp','UserController#delete_emp');
I am new in laravel 5 Now what am I doing here I want to delete a particular record on click delete button but currently what happens when I click on delete button there is an error I have got in my console. So, How can I solve this problem? Please help me.
Thank You
I have a table with the image and image code data, show on code below:
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr id="image_info">
<td id="1W 1111">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td id="2W 2222"></td>
<td id="3W 3333"></td>
</tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
</tbody>
</table>
I tried using this code to get the html of selected td of the table. But it show "undefined".
$('#tblForklift').on('click', function(e) {
var forkliftCode = $('this').closest('tr').find('td').html();
alert(forkliftCode)
});
Since #tblForklift will match your table. You need to target td elements inside this table instead. Also if your elements has been added dynamically to the DOM, you can use event delegation:
$(document).on('click', '#tblForklift tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
or better if your table is not added dynamically:
$('#tblForklift').on('click', 'tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
Also some of your td are missing closing </td>
Add event to the td. so in each td click you can get html.
$('#tblForklift td').on('click',function(e) {
alert($( this ).html());
});
demo
id must be unique use class like,
HTML
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr class="image_info">
<td class="1W 1111 forklift">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td class="2W 2222"></td>
<td class="3W 3333"></td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
SCRIPT
$('.forklift').on('click', function(e) { // using class for multiple tds
var forkliftCode = $(this).find('p').text();
alert(forkliftCode);
});
Also, never give a space in a id, space has a different meaning in jquery selectors
Live Demo
HTML:
<td class="2W 2222">cvbcxbcvb</td>
<td class="3W 3333">bcvbcvbnvnv</td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
jQuery:
$('#tblForklift td').click(function() {
alert($(this).html());
});
I currently have 2 tables, top and bottom. For the top, there would be rows of data I had called out from my SQL database. As for the bottom, the data is from the same database as the top table, but displaying different fields. The fields are all in the same row in my SQL database.
Basically, upon click on any row on the top table, the bottom table will show more information which is also within the same row in the SQL database. I'm not sure how to display data specifically for a certain row, for now, when I click on any row on the top table, it displays all the rows in the SQL.
Code for the tables:
<table id="table_id">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($results)) {
?>
<tr data-details="c01" class="itemDetails">
<td><?=$row['name']?></td>
<td><?=$row['address']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<br /><br />
<div>
<table border=1 id="c01" class="aside hidden">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($results2)) {
?>
<tr>
<td><?=$row['product']?></td>
<td><?=$row['quantity']?></td>
<td><?=$row['price']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Code for Jquery:
<script>
$(document).ready(function () {
$('table.hidden').hide();
$('tr.itemDetails').click(function() {
var id = $(this).data('details');
$('table.hidden').hide();
$('#'+id).show();
});
});
</script>
If I understood correctly, this code will help you:
$(function() {
$('table.hidden').css('display','none');
$('tr.itemDetails').click(function() {
var index = $(this).index();
$('table.hidden').css('display', 'block');
$('table.hidden tr').css('display', 'none');
$('table.hidden tr:first-child').css('display','table-row');
$('table.hidden tr:nth-child(' + (index + 1) + ')').css('display','table-row');
});
});
working example: jsfiddle
You almost done on this but it seems that you are trying to hide / show all entire table. So you need to hide / show only specific row instead.
instead of
$('table.hidden').hide();
$('#'+id).show();
It should be updated to
$('table.hidden tr').hide();
$('table.hidden tr #'+id).show();
And your HTML should be
<tbody>
<?php
while ($row = mysql_fetch_array($results2)) {
?>
<tr id="<?=$row['id']?>">
<td><?=$row['product']?></td>
<td><?=$row['quantity']?></td>
<td><?=$row['price']?></td>
</tr>
<?php
}
?>
</tbody>
I hope this guide could help.