Fetch number of rows using javascript - javascript

I'm trying to fetch number of rows that were not in another table and show them using javascript.
First, in the main page, it will list the inbox name from inboxtb table. Then I have a script that should pass the value (inboxid) to another file and return the number of result back to the main file, in its corresponding row.
I'll fetch first all the inbox row (main page):
while($stmt->fetch()){
echo '<li>'.$name.' <span id="loadnumber"></span></li>';
}
Then my script:
$(function(){
$('.loadmessage').ready(function(){
var elem = $(this);
var dataString = "inboxid="+elem.attr('data-artid');
var $parent = $(this).closest('loadmessage');
setInterval(function() {
$.ajax({
type: "GET",
url: "noofres.php",
data: dataString,
success: function(data) {
var $span = $parent.find('.loadnumber'); /* FIND THE CORRESPONDING SPAN */
$span.append(data); /* LOAD THE DATA INSIDE THE SPAN */
}
});
});
return false;
});
});
And my noofres.php:
if($stmt = $con->prepare("SELECT a.messageid FROM messagetb a LEFT JOIN readtb b ON a.messageid = b.messageid WHERE a.inboxid = ? AND b.readid IS NULL")){
$stmt->bind_param("i",$_GET["inboxid"]);
$stmt->execute();
$stmt->store_result();
$noofunreadmessages = $stmt->num_rows;
$stmt->close();
} /* END OF SECOND PREPARED STATEMENT */
echo '<span class="badges">'.$noofunreadmessages.'</span>';
But it doesn't return the numbers, where it should. What am I doing wrong? Or a better script to do it?
Very rough example output:
Person1 Message - 3
Person2 Message - 1
Person3 Message - 10
But my current output is:
Person1 Message
Person2 Message
Person3 Message
Number does not return the corresponding number at all. And error are showing up and continuously growing with this message.

Your code is incorrect in terms of logic.
You are executing AJAX once and receiving the value once as well.
Then, you update your element's HTML many times with the same one value.
$.ajax({}, {
success: function(data) {
setInterval(function() {
$('#loadunreadmessages').html(data);
}, 1000);
}
});
In order to get fresh values every time, you need to change it such way that it will execute AJAX many times and every time it will update value once. It sounds logical.
setInterval(function() {
$.ajax({}, {
success: function(data) {
$('#loadunreadmessages').html(data);
}
});
}, 1000);
In your case it is:
setInterval(function() { /* EVERY SECOND, IT EXECUTES NEW REQUEST TO GET FRESH VALUES */
$.ajax({
type: "GET",
url: "../fetch/noofres.php", /* THIS IS WHERE THE NUMBER OF UNREAD MESSAGES SHOULD COME FROM */
data: dataString,
success: function(data) {
$('#loadunreadmessages').html(data); /* LOAD THE NUMBER TO THIS SPAN WITH THE ID OF loadunreadmessages */
}
}) ;
}, 1000);

Related

Reloading Ajax function with setTimeout doesnt clear previous timeout first

I am trying to load a chat box when a contact name is clicked. On initial load it displays the inbox. All functionality works ok until I try and click the contact name a second time. It loads the new contacts chat but also displays the original contact chat even though I set clearTimeout().
Here is the JS file -
$(document).ready(function(){
var contactTimeout;
var inboxTimeout;
function contact() {
var fromName = $('#from').val();
var toName = $("#to").val();
$(".chat-title").replaceWith("<div class='chat-title'>" + toName + "</div>");
$(".chat-form").fadeIn(100);
$.ajax('chat/get-chat.php', {
data: ({ to: toName,from: fromName}),
type: "POST",
success: function(data) {
$(".chat-body").replaceWith("<div class='chat-body'>" + data + "</div>");
contactTimeout = setTimeout(contact, 2000);
}
});
}
function inbox() {
var user = $('#from').val();
$.ajax('chat/get-chat-inbox.php', {
data: ({ user: user}),
type: "POST",
success: function(data) {
$(".chat-body").replaceWith("<div class='chat-body'>" + data + "</div>");
inboxTimeout = setTimeout(inbox, 2000);
}
});
}
// Load inbox when chat box is opened
$(".chat-arrow").click(function(){
clearTimeout(contactTimeout);
inbox();
});
// Load chat from contact name
$(".contact-name").click(function() {
clearTimeout(contactTimeout); // Here I try and kill previous timeout
clearTimeout(inboxTimeout);
var contactName = $(this).attr('id');
$("#to").val(contactName);
contact();
});
});
Why would it just add more timeout functions rather than replace them when a new contact name is clicked?
First i would suggest you instead of using replace each time, you could easily use .html(data) to put new data in existing content of chat-body.
And explanation is you call your function on ajax success (there's wait time to server respond to your request) and if you click in meanwhile on your another call, you will have two calls instead of one, because you can't clear timer that's not started yet.
Well one of the solutions would be, let timer works only through it's default state, and when you need some fast data, you can call your contact without calling the next timer.
$(document).ready(function(){
var contactTimeout;
var inboxTimeout;
/* add parameter which will mean will we call timer or not */
function contact(dotimer) {
var fromName = $('#from').val();
var toName = $("#to").val();
$(".chat-title").replaceWith("<div class='chat-title'>" + toName + "</div>");
$(".chat-form").fadeIn(100);
$.ajax('chat/get-chat.php', {
data: ({ to: toName,from: fromName}),
type: "POST",
success: function(data) {
$(".chat-body").replaceWith("<div class='chat-body'>" + data + "</div>");
/* default calling of timer with repeating */
if (dotimer) { contactTimeout = setTimeout(function(){ contact(true); }, 2000); }
}
});
}
function inbox() {
var user = $('#from').val();
$.ajax('chat/get-chat-inbox.php', {
data: ({ user: user}),
type: "POST",
success: function(data) {
$(".chat-body").replaceWith("<div class='chat-body'>" + data + "</div>");
inboxTimeout = setTimeout(inbox, 2000);
}
});
}
// Load inbox when chat box is opened
$(".chat-arrow").click(function(){
clearTimeout(contactTimeout);
inbox();
});
// Load chat from contact name
$(".contact-name").click(function() {
clearTimeout(inboxTimeout);
var contactName = $(this).attr('id');
$("#to").val(contactName);
/* call function without TIMER, default one will work as it works */
contact(false);
});
});

Append the last message once

Hello guys i am trying to build a chat with Jquery , php , ajax and mysql
the problem that i am facing since few days is that when i get the value of the last message its keep getting append to the div what i want is to append the last message only once , and append again if there is a new message here is my ajax call
var chat = "";
$.ajax({
url: "php/gt_user.php",
type: "get",
success: function (result) {
var gtUser = $.parseJSON(result);
$.each(gtUser, function (idx, obj) {
var usrApp = "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
usrApp += "<p class='usr-name'>" + obj.Tables_in_chat + "</p></span>";
$('.userarea').append(usrApp);
}); // here i get all the username who sent a message and print them on a div
$('.userarea span').on('click', function () {
$('.msgarea').html("");
var usrName = $(this).text();
$('#usrname').text(usrName);
setInterval(function () {
$.ajax({
url: "php/admin_msg.php",
type: "post",
data: {
name: usrName
},
success: function (result) {
var lastmsg = result;
function appedn() {
var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
usrMsg += "<span><p>" + lastmsg + "</p></span></div>";
$('.msgarea').append(usrMsg);
}
if (chat !== result) {
appedn();
} else {
chat = result;
}
}
});
}, 2000);
});
}
});
the respanse from php/admin_msg.php is working and i got the last message sucessfully the problem is that this script keep adding the same message to the message area , and what i want is to added the message only once if there is a new one
You need to somehow identify last message that is already appended to your html the best would be some id sent from server. So your message div should containt some data-id attribute, and then when you ask for next message get last children of $('.msgarea') element, read it data-id and compare with current one.
Another thing I would recommend to moving to some view library or framework, react, angular, vue or whatever. It gets complicated when you want to manage such features with pure jQuery.
i was finally able to fix the problem after 1 day of struggle so will post the answear here just in case it will help some one else facing the same issue
the part where i had to get all the username table from database i move it to my HTML and used a few line of php to echo the result like this(each user name has his own table)
// show all the user name that sent a message
$result = $con->query("show tables from chat");
while($row = mysqli_fetch_assoc($result)){
echo "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i><p class='usr-name'>".$row['Tables_in_chat']."</p></span>";
}
then on my jquery script i moved the function that check for the last message every 2sec outside the click event so my Jquery script look more cleaner now
/* get the user name and added it to the header of the message box */
$('.userarea span').on('click', function () {
$('.msgarea').html("");
var usrName = $(this).text();
$('#usrname').text(usrName);
});
var chatdata = "";
/* check for new message and append the message area if there is a new one */
setInterval(function () {
var usrName = $('#usrname').text();
$.ajax({
url: "php/admin_msg.php",
type: "post",
data: {
name: usrName
},
success: function (result) {
function appedn() {
var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
usrMsg += "<span><p>" + result + "</p></span></div>";
$('.msgarea').append(usrMsg);
}
if (chatdata !== result) {
appedn();
chatdata = result;
}
}
});
}, 2000);

"Long Polling" simulation holding up entire web page

Brief Overview
I have a turn-based web app that puts a 60 second limit per turn, unless they end their turn before 60 seconds, whereby the next user's turn begins.
It works by preventing the production of data on the PHP page by way of a while statement which checks for new data, produces it if it exists, or sleeps and resets if it doesn't:
while($olddata === $newdata){
sleep(2);
/* get new data and repeat */
}
I got this concept from these StackOverflow questions:
How do I implement basic "Long Polling"?
Ajax push system
Issue
However, once the callout begins, the page becomes relatively unresponsive; doing something simple such as refreshing the page will not work until the timeout is complete or new data is received.
How can I configure this code so that the page remains responsive while awaiting new data?
AJAX/jQuery code
function draftPing(){
//This $holder element holds the data including the
//row ID, which is used to determine which turn number
//we are on
var $holder = $("#data-holder");
var currID = $holder.attr("data-currID");
$.ajax({
type: "POST",
url: "../inc/draft-ping.php",
data: { currID : currID },
async: true,
cache: false,
timeout: 60000,
success: function(data) {
var jsonData = $.parseJSON(data);
//Update $holder with new turn ID
$holder.attr("data-currID", jsonData[0]);
/* Do stuff with data */
updateDeadline(jsonData[1]);
updateTeam(jsonData[3]);
updateDraft(jsonData[4]);
/* Begin the next call for new information (wait 1s)*/
setTimeout(
draftPing,
1000
);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Draft retrieve error: ", textStatus + " (" + errorThrown + ")");
setTimeout(
draftPing, /* Try again after 5s*/
5000);
}
});
}
PHP Code
<?php
session_start();
require_once("../config.php");
require_once("classes.php");
require_once("functions.php");
$postedID = $_POST["currID"];
$draft = new Draft($user->getLeagueID());
$currID = $draft->getCurrDraftRow();
//This is the "long polling" simulation...
//the AJAX callback won't produce any information
//until the current ID is different to the ID
//on the page with the AJAX post function
while($currID == $postedID){
sleep(2);
$currID = $draft->getCurrDraftRow();
}
/* Get all the data - redacted because it's not important (and it works) */
//Output all the data as one JSON object
exit(json_encode(array($nid, $ndeadline, $nuserid, $fteam, $fdraft)));
If you opened a session with session_start() better close it with session_write_close() before you start waiting, or access to the session will be blocked in all other requests.
<?php
session_start();
require_once("../config.php");
require_once("classes.php");
require_once("functions.php");
$postedID = $_POST["currID"];
$draft = new Draft($user->getLeagueID());
$currID = $draft->getCurrDraftRow();
//This is the "long polling" simulation...
//the AJAX callback won't produce any information
//until the current ID is different to the ID
//on the page with the AJAX post function
while($currID == $postedID){
session_write_close(); //added
sleep(2);
session_start(); //if needed, doesn't look like it is though
$currID = $draft->getCurrDraftRow();
}
/* Get all the data - redacted because it's not important (and it works) */
//Output all the data as one JSON object
exit(json_encode(array($nid, $ndeadline, $nuserid, $fteam, $fdraft)));

jQuery Ajax placing random "jQuery111201xxx" into string

I have made a booking system that utilizes FullCalendar; though that part should be irrelevant. My problem is that upon saving an appointment, a 'notes' field I have created very occasionally has this strange string inserted into it, generally at a random point in the string. Here is the latest example:
Has this been changedjQuery1112010047650896012783_1444929292744 with Rich- finishing sleeve off.bringing deposit in on saturday. told him space isnt secure.
As you can see, there is a totally out of place "jQuery1112010047650896012783_1444929292744" placed in the middle of the note. I can't find anything about this online (mainly because I have no idea what terms I'd use to find it). It must be related to jQuery, considering the string.
I am using jQuery v1.11.2 - obviously the string looks like a long version number.
Why is my ajax request seemingly succeeding, but placing this message in the middle of the sent string? I cannot replicate this issue at all, especially this time since it was another user who managed to cause it.
The function that fetches/prepares/sends data looks like this:
function postForm(content, action, update) {
loader('show');
var popup = content.parent();
var children = content.find(".input");
var data = {}
var elements = [];
data['elements'];
$( children ).each(function() {
var child = {};
child['name'] = $(this).attr('data-name');
if ($(this).is(':checkbox')) {
child['value'] = $(this).is(":checked");
} else {
child['value'] = $(this).val();
}
elements.push(child);
});
data.elements = elements;
data.request = action;
dataPost = JSON.stringify(data);
console.log(dataPost);
ajaxRequest = $.ajax({
type: "POST",
url: "/?page=ajax",
data: dataPost,
dataType: 'json',
success: function(response) {
loader('hide');
console.log(response);
if (update) {
$(update.element).load(update.url+" "+update.element+" > *");
checkError = doExtra(response, update.extra);
}
if (checkError == false) {
popup.fadeOut();
}
}
});
return false;
}
The note section is just a textarea with the class 'input' (which is looped through and fetched).
I don't think there will be a solution for the exact problem, however, I'm looking for an explanation for the modification of the string. The application works perfectly, except for this very rare case.
Question marks (??) are replaced with a jQuery time stamp. To fix, I had to add jsonp: false to the parameters. Final ajax:
ajaxRequest = $.ajax({
type: "POST",
url: "/?page=ajax",
data: dataPost,
dataType: 'json',
jsonp: false,
success: function(response) {
loader('hide');
console.log(response);
if (update) {
$(update.element).load(update.url+" "+update.element+" > *");
checkError = doExtra(response, update.extra);
}
if (checkError == false) {
popup.fadeOut();
}
}
});

jtable single column/field in a table refresh

I am using Jtable for booking events. In combination with PHP, MySQL. My question is, is there a way to just reload every 10 second single column. Precisely I have something like this:
Checkbox ID Event Reservations
+ 4 ev1 22
- 5 ev2 19
I would like to have the reservations column reloaded every 10 seconds, so the user that is logged in can see the changes. Now I got it working with reloading the whole table, but this is not what I really need because every user can book only 9 events and I need to have checkboxes at the left side. After reloading the whole table my checkboxes are not working as expected. So is there a way to reload just one column? My code right now is:
window.setInterval(function(){
$('#Events').jtable('reload');
}, 10000);
Any help or suggestion would be appreciated.
I found a way around how to solve it:
First create a new field in JS like this:
test: {
title: 'test',
display: function (data) {
var $div = $('<div id="test"">'+data.record.id+'</div>');
return $div;
}
},
Than create a function that will be run every 10 seconds and make an AJAX request:
function UpdateRes(){
$.ajax({
url: 'Actions.php?action=update',
type: 'post',
data: '&kiu='+$kiu,
}).success(function(data) {
var jsondata = JSON.parse(data);
$.each(jsondata.Records, function(i, item) {
$('.jtable tr.jtable-data-row').each(function(){
if($(this).attr('data-record-key')==item.id){
$(this).find('div').html( item.reservations );
}
})
});
});
}
window.setInterval(function(){
UpdateRes();
}, 10000);
Let your JSON response look like this:
{"Result":"OK",
"Records":
[
{"0":"111","id":"111","1":"20","reservations":"20"},
{"0":"127","id":"127","1":"20","reservations":"20"},
{"0":"133","id":"133","1":"20","reservations":"20"},
{"0":"134","id":"134","1":"20","reservations":"20"},
{"0":"135","id":"135","1":"20","reservations":"20"},
{"0":"326","id":"326","1":"20","reservations":"20"}
]}
And in the end in Actions.php make your query in try catch:
else if($_GET["action"] == "update")
{
//Get records from database
$result8 = mysqli_query($con,
"SELECT l.id,(l.max-l.reserviert) as reservations
FROM td_res l WHERE
l.kiu='" . mysqli_real_escape_string($con,$_POST["kiu"]) . "';");
//Add all records to an array
$rows8 = array();
while($row8 = mysqli_fetch_array($result8))
{
$rows8[] = $row8;
}
//Return result to jTable
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Records'] = $rows8;
print json_encode($jTableResult);
}

Categories