I'm sorry my English is week. Please tell me the process to reload data without refreshing the page using datatable jquery. My reload table was not working.
my view is :
<table id="table_id" class="table table-striped table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr style="background-color:#1c2d3f;color:white;">
<th>Kategori <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
<th>Deskripsi <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
<th style="width:200px;">Tipe Kategori <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
<th>Slug <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
<th>Aktif <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
<?php foreach($data_kategori as $ambil_data){?>
<tr>
<td style="background-color:white;"><?php echo $ambil_data->kategori;?></td>
<td style="background-color:white;"><?php echo $ambil_data->deskripsi;?></td>
<td style="padding-top:15px;background-color:white;"><?php
if($ambil_data->parent_kategori == "0"){
echo "<label class='label label-primary'>Kategori Utama</label>";
}else{
echo "<label class='label label-default'>Anak kategori</label>";
}?>
</td>
<td style="background-color:white;"><?php echo $ambil_data->slug;?></td>
<td style="padding-top:15px;background-color:white;"><?php
if($ambil_data->aktif == "Y"){
echo "<label class='label label-success'>Aktif</label>";
}elseif($ambil_data->aktif == "N"){
echo "<label class='label label-danger'>Tidak aktif</label>";
}?>
</td>
<td style="background-color:white;">
<i class="glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-remove"></i>
</td>
</tr>
<?php }?>
</tbody>
When insert data this my jquery :
function reload_table(){
table.ajax.reload(null,false); //reload datatable ajax
}
function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo site_url('admin/kategori/proses_tambah_kat ')?>";
}
else
{
url = "<?php echo site_url('index.php/book/book_update')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
reload_table();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}
Is there anything, i am doing wrong ??
You can reload Datatable by id like this
$('#table_id').DataTable().ajax.reload(null, false);
or
TableVar.ajax.reload();
It will work if you are using AJAX to get data for Datatable.
for more info see this link
Related
I'm having trouble in retrieving records. I have a table and it contains records. I want to view the details of that record using the view button. But the problem is when I try to view the record all of the records is showing same details even though they are different in the database. I'm retriving the records using their ids. Here are my code
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Family Number</th>
<th>Age</th>
<th>Chief of Complaints</th>
<th>Diagnosis</th>
<th>Medication Treatment</th>
<th>Time Added</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php do{ ?>
<tr>
<td class="patient_id"><?php echo $row['id']; ?></td>
<td><?php echo $row['family_number']; ?></td>
<td><?php echo $row['Age'];?></td>
<td><?php echo $row['chief_complaints']; ?></td>
<td><?php echo $row['diagnosis']; ?></td>
<td><?php echo $row['medication_treatment']; ?></td>
<td><?php echo $row['added_at']; ?></td>
<td>
<div class="col-2">
<!-- view -->
view
<!-- <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item view_btn" href="#">View</a></li>
<li><a class="dropdown-item" href="#">Edit</a></li>
</ul>
</div>
</div> -->
</td>
</tr>
<?php }while($row = $medical_itr->fetch_assoc()); ?>
</tbody>
ANd this is my js code for retrieving the data using their id
<script>
$(document).ready(function () {
$('.view_btn').click(function (e) {
e.preventDefault();
var p_id = $(this).closest('tr').find('.patient_id').text();
// console.log(p_id);
$.ajax({
type: "POST",
url: "Modals/viewHistory/view_medical_itr.php",
data: {
'checking_viewbtn': true,
'patient_id': p_id,
},
success: function (response){
// console.log(response);
$('.patient_viewing').html(response);
$('#medical_itr').modal('show');
}
});
});
});
</script>
And this is my php code for retriving data in the database
include_once("connections/connections.php");
$con = connection();
if(isset($_POST['checking_viewbtn'])){
$p_id = $_POST['patient_id'];
$sql = "SELECT * FROM medical_itr WHERE id = '$p_id'";
$medical_itr = $con->query($sql) or die ($con->error);
$row = $medical_itr->fetch_assoc();
}
This is sample pic
As you can see in the picture in the bottom left the id is 31 same as the url, but the view button I'm trying access the id in the table is 21.
my suggestion is that you pass data id in view_button and keep your row id in data id.
<a class="btn btn-primary view_btn mb-2" data-id="<?php echo $row['id'];
?>" >view</a>
then get the data id in jquery-> like this
var p_id = $(this).data('id');
im trying to loaded the vehicle details using ajax and data modal dialog. but seem that the data does not loaded correctly and i cant seem to figured out what is wrong with codes.
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
data modal dialog used to display the details.
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Vehicles Details</h4>
</div>
<div class="modal-body" id="vehicle_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
this is the select.php that i used
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms");
$query = "SELECT * FROM vehicle WHERE id_vehicle = '".$_POST["vehicle_id"]."'";
$result = mysqli_query($link, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Plate No</label></td>
<td width="70%">'.$row["plateNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Number</label></td>
<td width="70%">'.$row["engineNo_vehicle"].'</td>
</tr>
<tr>
<td width="30%"><label>Engine Capacity</label></td>
<td width="70%">'.$row["engineCapacity_vehicle"].'</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
script used
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("id_vehicle");
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
Have a look at your select.php file:
<?php
if(isset($_POST["vehicle_id"])) {
$output = '';
$link=msqli_connect("localhost","root","root","vms"); <========
TYPO. It should've been:
$link=mysqli_connect("localhost","root","root","vms");
Also,
Add a data-vehicleid attribute to your view_data button:
<td><input type="button" data-vehicleid="<?php echo $row["id_vehicle"]; ?>" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data " /></td>
And then change your script to receive that attribute value:
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var vehicle_id = $(this).attr("data-vehicleid"); <=====
$.ajax({
....
});
});
});
</script>
Right now, you've set it to :
var vehicle_id = $(this).attr("id_vehicle");
which won't work as you don't have an attribute called id_vehicle="..." on that button. I'm guessing you meant attr("id");
Add this code on your while loop
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td><input type="button" name="view" value="more" data-vehicle-id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
And in script change your id var vehicle_id = $(this).attr("data-vehicle-id");
Hope this code work
in order to get the id of this this you need to add onclick
<td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" onclick="getId(this.id)"/></td>
function getId(clicked_id){
var vehicle_id = clicked_id;
$.ajax({
url:"select.php",
method:"post",
data:{vehicle_id:vehicle_id},
success:function(data){
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
}
Here is updated code for view:
view:
<div class="container" style="width:900px;">
<h3 align="center">View All Available Vehicle</h3>
<br />
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th width="40%">Plate Number</th>
<th width="20%">Type</th>
<th width="20%">Status</th>
<th width="10%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["plateNo_vehicle"]; ?></td>
<td><?php echo $row["vehicle_Type"];?></td>
<td><?php echo $row["vehicle_status"];?></td>
<td>more</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
Script:
<script>
$('#dataModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var vehicle_id = button.data('vehicle_id')
var modal = $(this)
$.ajax({
url:"select.php",
method:"POST",
data:{vehicle_id:vehicle_id},
success:function(data){
modal.find('.modal-body').html('No Response');
modal.find('.modal-body').html(data);
$('#vehicle_detail').html(data);
$('#dataModal').modal("show");
}
});
});
</script>
i got i problem when the session is expire i does not move to login page but i got error as can not connect to serer as my ajax code looks like
function driver()
{
$this = $(this);
$.ajax(
{
url: 'view/driver/driver.php',
datatype: 'html',
async:true,
success: function(data){
$box = $('#content');
$box.after(data);
$box.remove();
}
});
}
$(document).on('click','#driver',$(this),driver);
and the php url file as
<div id="content" class="span10">
<!-- content starts -->
<div class="row-fluid sortable">
<div class="box span12">
$userid=$_SESSION['USERID'];
if(empty($userid)){
header('location:localhost/test/login.php');
}
<div class="box-header well" data-original-title>
<h2><i class="icon-user"></i> All Driver</h2>
</div>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Driver user ID</th>
<th>FName</th>
<th>LName</th>
<th>Phone NO.</th>
<th>Is Verified</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include '../../config.php';
$query = "select * from driver_user";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
?>
<tr>
<td style="width: 8%;"><?php echo $row['driver_user_id']; ?></td>
<td style="width: 10%;"><?php echo $row['first_name']; ?></td>
<td style="width: 10%;"><?php echo stripslashes($row['last_name']); ?></td>
<td style="width: 8%;"><?php echo $row['phone_no']; ?></td>
<td style="width: 5%;<?php if($row['isverified'] == 'Verified'){ echo 'color:green;';}
if($row['isverified'] == 'Approval'){ echo 'color:blue;';}
if($row['isverified'] == 'Not Verified'){ echo 'color:red;';}
?>"> <?php echo $row['isverified']; ?></td>
<td style="width:15%;" class="center" itemid="<?php echo $row['driver_user_id']; ?>">
<a class="btn btn-success driver_view" href="#">
<i class="icon-zoom-in icon-white driver_view"></i>
View/ Edit
</a>
<!-- <a class="btn btn-info driver_edit_form" href="#">
<i class="icon-edit icon-white"></i>
Edit
</a>-->
<a class="btn btn-danger delete_driver" href="#">
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
<?php } ?>
</tr>
</tbody>
</table>
</div>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid sortable">
</div><!--/row-->
<!-- content ends -->
</div><!--/#content.span10-->
I does not move to login page if session is expire yet it show error can't connect to database in php file first of all i check session
plz help me how to check session before any call of ajax code.
thanks and regards
You cannot use header AFTER sending data to browser, You have started sending data to browser:
<div id="content" class="span10">
Either, Instead of header you use location.href javascript or
Buffer
<? ob_start();?>
<div id="content" class="span10">
.....
if(empty($userid))
{
header('location:localhost/test/login.php');
exit;
}
......
<? ob_flush(); ?>
i have list of records. i have delete button with every record and i am deleting record with $.ajax() function. but when i click on the delete button it does not delete the record from database , and when i alert data it outputs whole html page.here is code below. please help me.
html code
<tbody>
<tr class="gradeX odd">
<td class="sorting_1">2</td>
<td class=" ">test</td>
<td class=" ">test</td>
<td class="center ">0</td>
<td class="center ">Active</td>
<td class=" "><button type="button" class="btn btn-default btn-circle" name="editRecord"><i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-danger btn-default btn-circle" id="2" name="deleteRecord"><i class="fa fa-times"></i></button></td>
</tr>
<tr class="gradeX even">
<td class="sorting_1">3</td>
<td class=" ">sarees</td>
<td class=" ">contains sarres</td>
<td cl="center ">1</td>
<td class="center ">Active</td>
<td class=" "><button type="button" class="btn btn-default btn-circle" name="editRecord"><i class="fa fa-pencil-square-o"></i></button>
<button type="button" class="btn btn-danger btn-default btn-circle" id="3" name="deleteRecord"><i class="fa fa-times"></i></button></td>
</tr>
</tbody>
jquery
$(document.body).on('click', '[name="deleteRecord"]', function(){
var id= $(this).attr('id');
var parent = $(this).parent().parent();
if (confirm("Are you sure you want to delete this row?"))
{
$.ajax({
type: "GET",
url: "admin_operation.php?mode=delete_category&id="+id,
cache: false,
success: function(data)
{
alert(data);
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
php code
$mode = $_GET['mode'];
if($mode!='add_category' || $_GET['mode']!= "delete_category")
{
header('location:dashboard.php');
die;
}
if($mode=='delete_category')
{
$id=$_GET['id'];
$q=$db->query("DELETE FROM db_category WHERE category_id='".$id."'");
if($q){ echo "yes";}
else{ echo "no";}
}
You send 'url: "admin_operation.php?mode=delete_category&id="+id,' in javascript.
And, in php script you have a condition that rewrite headers and exit script.
if($mode!='add_category' || $_GET['mode']!= "**delete_category**")
{
header('location:dashboard.php');
die;
}
The next block of code
if($mode=='delete_category')
{
// ...
}
never is reached.
Hope this helps you as solution.
i'm implementing an appilication in which one module contains search method, we get the list of people in table, here is the code for it.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<div class="modal fade" id="sms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Compose Sms</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="3" name="smsmessage"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn blue">Send Sms</button>
<button type="button" class="btn default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<thead>
<tr>
<th class="table-checkbox"> <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/></th>
<th>Surname</th>
<th>Name</th>
<th>Gender</th>
<th>Town</th>
<th>Mobile No</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
if($numrows!= "0") {
while($result = mysql_fetch_array($query,MYSQL_ASSOC)){
?>
<tr class="odd gradeX">
<td><input type="checkbox" class="checkboxes" value="<?php echo $result['mobileNo'];?>" name="numbers"/></td>
<td><?php echo $result['surname']; ?></td>
<td><?php echo $result['name']; ?></td>
<td><?php echo $result['sex']; ?></td>
<td><?php echo $result['preTown']; ?></td>
<td><?php echo $result['mobileNo']; ?></td>
<td><i class="fa fa-search"></i> View <i class="fa fa-edit"></i> Edit  <a class="fancybox-button fancybox.iframe btn btn-xs purple" href="singlesms.php?number=<?php echo $result['mobileNo'];?>"><i class="fa fa-envelope"></i> Send Sms</a></td>
</tr>
<?php
}
} else {
?>
<tr>
<td>No Records Found</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php
}
?>
</tbody>
</table>
now if i click submit button, i want only those values to be sent which are selected by checkbox. i want the checkbox values and input:smsmessage to be sent through jquery ajax submit. i have implemented a code but it just uses the checkbox values, i want the input value to be passed through ajax post. here is the what i have implemented
$('.btnadd').click(function(){
var checkValues = $('input[name=numbers]:checked').map(function()
{
return $(this).val();
}).get();
$.ajax({
url: 'loadmore.php',
type: 'post',
data: { ids: checkValues },
success:function(data){
}
});
});
Can u please suggest how to send the input:smsmessage also to this post method.
here is the bulksms.php
$success="0";
$message=$_POST['smsmessage'];
if($message="")
{
echo "Please Provide Details Correctly";
}
foreach($number as $_POST['numbers'])
{
$parameters['mobilenumber']=$number;
$parameters['message'] = $message;
if(api_connect("demo","demo#123",$parameters))
{
$success="1";
}
}
if($success=="1")
{
echo "SMS Sent to all selected people";
}
I'd look at pushing the value onto the end of the checkValues array, like this:
$('.btnadd').click(function(){
var checkValues = $('input[name=numbers]:checked').map(function(){
return $(this).val();
}).get();
checkValues.push( $('input[name=smsmessage]').val() );
$.ajax({
url: 'loadmore.php',
type: 'post',
data: { ids: checkValues },
success:function(data){ }
});
});
Or you could add another data value in the ajax call:
$('.btnadd').click(function(){
var checkValues = $('input[name=numbers]:checked').map(function(){
return $(this).val();
}).get();
$.ajax({
url: 'loadmore.php',
type: 'post',
data: { ids: checkValues, smsmessage: $('input[name=smsmessage]').val() },
success:function(data){ }
});
});
$('.btnadd').click(function(){
checked = $('input[name=numbers]:checked');
if( checked.length > 0 ) {
var checkValues = checked.map(function(){
return $(this).val();
}).get();
$.ajax({
url: 'loadmore.php',
type: 'post',
data: { ids: checkValues },
success:function(data){ }
});
}else{
alert("You need to pick at least one checkbox!");
}
});