I have a div on my main form:
<div id="dynamic-content">RESULT</div>
after sending data to php file to insert records via ajax :
$.ajax({
url: "test.php",
type: "POST",
data: {"mydata": myjson},
dataType: "JSON",
success: function (data) {
$('#dynamic-content').html(''); // blank
$('#dynamic-content').html(data); // load data
}
});
and with a table as result after a mysql insert in php file:
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>PRODUCT</th>
<td><?php echo $product; ?></td>
</tr>
<tr>
<th>PRICE</th>
<td><?php echo $price; ?></td>
</tr>
</table>
</div>
nothing appears in the 'dynamic-content' div.
Why?
When you are echoing HTML you have to have dataType: "html" Since you wrote it as "json" the AJAX will search for JSON output which is not present in your test.php file Hence, writing dataType: "html" will solve your problem
Related
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; ?>
I am trying to display dataTable data using ajax but it didn't work.
This is my jquery code :
$('#example').DataTable({
ajax: {
type: 'GET',
url: 'data.php',
success: function (msg) {
$("#tbody_example").html(msg);
}
}
});
This is my data.php page :
<?php echo '<td>Name</td>
<td>Position</td>
<td>Office</td>
<td>Extn.</td>
<td>Start date</td>
<td>Salary</td>'; ?>
and This is my dataTable :
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="tbody_example">
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
My dataTable still empty and I get MOCK GET: data.php as error.
Any one can help me.
That will not work.
Please, reference DataTables documentation to see that success must not be overridden as it is used internally in DataTables.
Instead you might use function ajax( data, callback, settings )
$('#example').DataTable({
ajax: function(data, callback, settings) {
$.get({
type: 'GET',
url: 'data.php',
success: function (msg) {
$("#tbody_example").html(msg); // this is NOT how the table should be populated
// invoke callback(msg) to populate the table
});
}
});
Thus, you populate the table by calling callback(response_data) with the response_data that is either string[][] or object[] type. In case of the latter you might need to add "columns" property to DataTables config.
It works for me.I just add dataType
ajax: {
type: 'GET',
url: 'data.php',
dataType : 'html',
success: function (msg) {
$("#tbody_datatable").html(msg);
},
error: function (req, status, err) {
console.log('Something went wrong', status, err);
}
}
Try the below thing, It should work
In php file
$content = "<td>Name</td>
<td>Position</td>
<td>Office</td>
<td>Extn.</td>
<td>Start date</td>
<td>Salary</td>";
$return["json"] = json_encode();
echo json_encode($return);
In ajax
ajax: {
type: 'GET',
url: 'data.php',
success: function (msg) {
$("#tbody_example").html(msg["json"]);
}
}
I have form to search any person in database.
Then I want to display the search result in DataTable.
I am using blade for templating HTML.
This is my form:
<form id="myform" method="GET" action="{{ site_url('person/search') }}">
This is my DataTable section in my HTML
<section class="panel" style="margin-top:20px;">
#include(config_item('theme').'.person.part.table-person', compact('result'), ['id' => 'persons'])
</section>
This is my table:
<table id="{{ $id }}" data-toggle="table" data-mobile-responsive="true">
<thead>
<tr>
<th data-field="image" data-align="center">Image</th>
<th data-field="id" data-visible="false">ID</th>
</tr>
</thead>
</table>
And for the last is my AJAX code:
$(document).ready(function() {
$('#myform').submit(function() {
$.ajax({
dataType: json,
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#persons').html(response);
}
});
return false;
});
});
With all that codes, I can't display the search result.
am I doing something wrong?
Thanks
make sure .. you cant duplicate same id name
use jQ append to display table detail
$('#channels').append(' <tr>
<th data-field="image" data-align="center">Image</th>
<th data-field="id" data-visible="false">ID</th>
</tr>');
HINT : http://api.jquery.com/append/
im having problems with an ajax request. the function is to increment/decrement items in a shopping cart. When the increment event is fire the post array comes up empty when printed.
Firebug shows the params being sent in the post request but in the controller nothing arrives.
The solution implemented is a bit scruffy but this is the way it has to be. The jquery is a non anonymous method outside the document.ready signature which could well be a contributor to the issue.
here's what I have...
jQuery
function increment_item($ciid){
$("#processing").fadeIn("fast");
$.ajax({
url: "<?=BASE_URL?>landing/inc_cart_item",
type: "post",
dataType: "json",
data: {id:$ciid,},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
// parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
//return false;
};
The trigger in the view...
<a href="#" onClick="increment_item(<?=$item['cart_item_id']?>)" class="qty-inc-button" >More</a>
The controller method...
function inc_cart_item(){
$return_val = $this->cart_model->increment_cart_item($this->session->userdata('cart_id'),$this->input->post('id'));
}
EDITED TO ADD GENERATED SOURCE...
The table data
</thead>
<tbody id="item_2823">
<tr>
<td>
<img src="http://localhost/cdn/images/112/7/thumb_lemberger2010.jpg">
<p style="color: #666;">Bader</p>
<p style="font-size: 16px;">Stettener Lindhälder Lemberger</p>
Remove this item
</td>
<td class="align-td-center">
8.20€ </td>
<td class="align-td-center">
More
1 Less
<input id="item_id" class="item_id" value="2823" type="hidden">
</td>
<td class="align-td-center">
<span id="value-shipping-2823">8.20€</span>
</td>
</tr>
</tbody>
<tbody id="item_2824">
<tr>
<td>
<img src="http://localhost/***/cdn/images/112/5/thumb_kerfttropfle2010.jpg">
<p style="color: #666;">Bader</p>
<p style="font-size: 16px;">Kerftströpfle</p>
Remove this item
</td>
<td class="align-td-center">
5.10€ </td>
<td class="align-td-center">
More
1 Less
<input id="item_id" class="item_id" value="2824" type="hidden">
</td>
<td class="align-td-center">
<span id="value-shipping-2824">5.10€</span>
</td>
</tr>
</tbody>
Generated jquery
function increment_item($ciid){
$("#processing").fadeIn("fast");
$.ajax({
url: "http://localhost/***/***/landing/inc_cart_item",
type: "POST",
dataType: "json",
data: {id:$ciid},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
// parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
};
Again the jQuery function im trying to use here is outside all the other generated jQuery in the $(document).ready(function() { code block, i dont know if this could be the cause.
I've been wrestling with it a little while now, all help is appreciated.
Thanks
Are you sure the data is being posted correctly? You have a comma inside your data json.
Also you could try:
data: JSON.stringify({id:$ciid})
<a class="checkModelButton" href="addrow.php">ADD ROW</a>
<table>
<thead>
<th>Name</th>
</thead>
<tboby id="model_row">
<tr>Nokia N70</tr>
</tbody>
</table>
And jQuery:
jQuery('.checkModelButton').click(function(){
var url = jQuery(this).attr('href');
jQuery.ajax({
type:'get',
cache: false,
url: url,
success: function(html){
jQuery('#model_row').html(html);
}
});
});
in file addrow.php
<tr>Nokia N71</tr>
When I click on a tag is result is:
<table>
<thead>
<th>Name</th>
</thead>
<tboby id="model_row">
<tr>Nokia N71</tr>
</tbody>
</table>
How to fix it to result is:
<table>
<thead>
<th>Name</th>
</thead>
<tboby id="model_row">
<tr>Nokia N70</tr>
<tr>Nokia N71</tr>
</tbody>
</table>
Use .append() OR .appendTo() instead of .html()
Like
success: function(html){
jQuery('#model_row').append(html);
}
OR
success: function(html){
jQuery(html).appendTo('#model_row');
}
Using .html() will overwrite the content.
You need to append it.
$('#model_row').append(html);