How do I get jQuery/AJAX result into table cell - php

I have this script here that outputs a result from a sql db query but I can not figure out how to get it to put the result in the table cell specified.
Here is query:
<script type="text/javascript">
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
success:(function(output) {
$.each(output, function(index, value){
alert(value);
$(".count").append(output[value]);
}) // each
}) // success
}); // ajax
}); // .typeval
}); // document
</script>
I want to put the result of this (value):
alert(value);
into here:
<td><label class="count"></label></td>
The <td> I am targeting on the same row as the <select> menu that is triggering the result. There will also be multiple table rows with this exact same cell <td>. So I need to target the <td> on this row only somehow. Can someone help me with this? Im not sure if I need the $.each but my php query is a mysql_fetch_row array even though the value returned will always be just one number.
Here is the HTML markup for the table cell I need the value in:
<td><label class="count"></label></td>
JS source code for class=count:
$(".count").append(output[index]);
ITS WORKING!!!! here is the code below
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$count = $(this).parents('tr').find('label.count');
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
success:(function(output) {
$.each(output, function(index, value){
//alert(value);
$count.append(output[index]);
}) // each
}) // success
}); // ajax
}); // .typeval
}); // document

Replace this
$("label.count<?php echo $client_id; ?>").append(output[value]);
With
$("label.count<?php echo $client_id; ?>").append(value);
Or alternately with this
$("label.count<?php echo $client_id; ?>").append(output[index]);
Hope this will help !!

Working code:
$(document).ready(function(){
$('.typeval').change(function(){
var movement = $(this).val();
var client_id = $(this).parent().siblings().find('.clientval').val();
var class_id = <? echo $class_id; ?>;
$count = $(this).parents('tr').find('label.count');
$.ajax({
type: "POST",
url: "movement_count.php",
data: {movement:movement, client_id:client_id, class_id:class_id},
dataType: "json",
success:(function(output) {
$.each(output, function(index, value){
//alert(value);
$count.append(output[index]);
}) // each
}) // success
}); // ajax
}); // .typeval
}); // document

Related

Is there any way to reload or refresh a data table data?

I have a problem about data tables which is duplication of data rows when triggering a button that refresh the data table datas. I tried some code like
$("#table").ajax.reload(); and $("#table").empty(); but non of those solve my problem
$.ajax({
url: "<?php echo base_url('Dashboard/LatestCheckin'); ?>",
data: {},
type: "POST",
success: function(data) {
result = JSON.parse(data);
var table = $('#latest-checkin-table').DataTable();
if(result!='') {
$.each(result, function(i, item) {
var a = table.row.add([
result[i].count
,result[i].full_name
,result[i].room_no
,result[i].total_price
,result[i].checkin_date
]).draw();
});
} else {
$('#latest-checkin-table').html('<h3>No users are available</h3>');
}
}
});
You have to do this:
table.clear();
$.each(result, function(i, item) {
var a = table.row.add([
result[i].count
,result[i].full_name
,result[i].room_no
,result[i].total_price
,result[i].checkin_date
]);
});
table.draw();
hope it helps.

How do i get a single value from a row in my datatable

I am using the jquery plugin DATATABLE.
I want to get a single value from a selected row in my datatable (the ID) but i dont how to do so. The value should be saved and given to a textbox.
Here is my Code:
var oTable = $('#dataTable').dataTable();
$.ajax({
url: 'process.php?method=fetchdata',
dataType: 'json',
success: function(s){
console.log(s);
oTable.fnClearTable();
for(var i = 0; i < s.length; i++) {
oTable.fnAddData([
s[i][0],
s[i][1],
s[i][2],
s[i][3],
s[i][4],
]);
}
},
error: function(e){
console.log(e.responseText);
}
});
$('#dataTable tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
oTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
Hopefully someone can help me!
in php:
$id = $_POST['id'];
$row = mysql_query("select * from _yourtable_ where id='$id'");
...
in the js:
You must send id to the file process.php by POST or GET method:
id = $('#textBoxSelector').val();
$.ajax({
url: 'process.php?method=fetchdata&id='+id,
method: 'post',
dataType: 'json',
success: function(s){
console.log(s);
...
}
});

Ajax call returns nothing

I am trying to make an ajax call on click on anchor tag dynmically generated from $.each loop for a JSON response.
For Information : #records is my table and .update is the class of anchor tag in that table.
Please be informed that the table is generated dynamically.
Now the problem is that my ajax call is returning nothing even i have checked it error: but no response received. I have tried alerting my var data just before the ajax call and it worked.So the problem starts from the ajax call. Moreover, my server side code is running fine.
// Update existing customers
$("#records").on('click', ".update", function() {
var data = '?'+ $(this).attr('id');
$.ajax({
type: "GET",
url: "viewcustomers.php",
data: data,
success: function(response) {
console.log(response);
}
});
});
Thanks in advance.
For reference below is the code that generates the table.
// Function to make datagrid
function getRecords() {
$.getJSON("viewcustomers.php", function(data) {
var items = [];
var xTd = '';
var xTr = '';
$.each(data, function(key, val) {
var c = 0;
var id = 0;
$.each(val, function(key1, val1) {
if (c == 0)
{
id = val1;
}
c++;
xTd += '<td>' + val1 + '</td>';
});
xTd += '<td>Edit</td>';
xTd += '<td>Delete</td>';
xTr = '<tr>' + xTd + '</tr>';
items.push(xTr);
xTd = '';
xTr = '';
});
$("#records").append(items);
});
}
Updated the server side code:
page url : localhost/hotel/viewcustomers.php
/**
* Fetch single row for the purpose of update / delete.
*/
if(isset($_GET['update'])){
$customer = new Customers;
$Id = $_GET['update'];
$customer_single = $customer->View_Single_Customer($Id);
echo json_encode($customer_single);
unset($customer);
}
This line is not used the right way var data = '?'+ $(this).attr('id');
Change it like this: var my_id = $(this).attr('id');
Then update the line data: data with data : {id:my_id}
Complete code :
$("#records").on('click', ".update", function() {
var my_id = $(this).attr('id');
$.ajax({
type: "GET",
url: "viewcustomers.php",
data : {id : my_id},
success: function(response) {
console.log(response);
}
});
});
Or do it like this:
$("#records").on('click', ".update", function() {
var param = '?id='+ $(this).attr('id'); /*notice that I have added "id=" */
$.ajax({
type: "GET",
url: "viewcustomers.php" + param,
/* remove the data attribute */
success: function(response) {
console.log(response);
}
});
});
Modify it as
$("#records").on('click', ".update", function() {
var request = '?id='+ $(this).attr('id');
$.ajax({
type: "GET",
url: "viewcustomers.php" + request,
success: function(response) {
console.log(response);
}
});
});

Typeahead input field and query passed to PHP with AJAX

I am using Twitter Bootstrap Typeahead for an autocomplete field.
End state goal: The user first enters details into field 1. When they enter details in field 2, ajax passes the query as it is written to a PHP file which queries a database based on what was also entered into field 1.
How do I pass both the query from field 2 and the contents of field 1 to the PHP file and access them.
Here is what I have so far:
HTML FILE:
<div class="field1">
<input type="text" id="field1" data-provide="typeahead" name="field1">
</div>
<div class="field2">
<input type="text" id="field2" data-provide="typeahead">
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function() {
$("#field2").typeahead({
source: function(query, process) {
var textVal=$("#field1").val();
$.ajax({
url: 'field2.php',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
console.log(textVal);
}
});
}
});
});
</script>
PHP FILE:
if (isset($_POST['query'])) {
$db_server = mysql_connect("localhost", "root", "root");
mysql_select_db("db_test");
$query = $_POST['query'];
$other = '**This needs to be field 1**';
$sql = mysql_query("SELECT * FROM table WHERE row1 LIKE '%{$query}%' AND row2 = '$other'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['row1'];
}
echo json_encode($array);}
At the moment, the query part works perfectly and the results are returned (the console also displays the value from 'Field1'. Just need to get that value into the php file at the same time!
Any help would be great
If I understood this correctly, you want to parse both the values of field 1 and 2 to the same AJAX call. This is how you do it.
<script>
$(function() {
$("#field2").typeahead({
source: function(query, process) {
var textVal=$("#field1").val();
$.ajax({
url: 'field2.php',
type: 'POST',
data: 'query=' + query + '&field1=' + textVal,
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
console.log(textVal);
}
});
}
});
});
</script>
Now you just make another $_POST['field1'] in your PHP file.
var userQuery = $('#ID of query input element').val();
var field1 = $('#ID of input 1 element').val();
$.ajax({
type: "POST",
url: '',
data: {query: QueryVariable, input1: input1variable},
success: function(data) {
// code within this block
},
error: function() {
alert('System Error! Please try again.');
},
complete: function() {
console.log('completed')
}
}); // ***END $.ajax call

there is something wrong with this Jquery post?

im trying to pass on the id attribute to the file.php, but its giving me 0 every time, when i try to insert it into the database, the javascript and the html is provided!
$(function() {
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "file.php",
data: info,
success: function(){}
});
$("#follow"+I).hide();
$("#remove"+I).show();
return false;
});
});
html file:
<div id="follow1"><span class="follow_b"> Follow </span></div>
p.s. it deos insert the value in the database
file.php:
<?php
$id =$_POST['id'];
msql_insert.........
?>
It may not matter in this case, but the ID of an element is not supposed to start with a number.

Categories