StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>How many statuses are returned from the database?</p> <p>I assume that you have correct code (combining the previous answers that have been posted here) and still the delay is present. It can be caused by the ajax call made in the setInterval - after you append the new status into the <code>#output</code> it's overwritten by an request that had been triggered before the <code>click</code> event.</p> <p>To prevent that you can abort the xhr request and clear the interval function when clicking the button: </p> <pre><code>$(function(){ // interval reference and jQuery XHR object var ajaxInterval, jqxhr; // initialize fetching data from server function startPolling() { stopPolling(); ajaxInterval = setInterval( function() { jqxhr = $.ajax({ url: location.href, data: {ajax: 1}, dataType: 'json', type: "GET", success: function(result) { // parse result and insert into #output // ... } }); }, 1000); } // clear interval and abort xhr request function stopPolling() { if(ajaxInterval) clearInterval(ajaxInterval); if(jqxhr) jqxhr.abort(); } $('input').click(function(){ // this prevents overwriting from old ajax call stopPolling(); // insert into #output our new status var getText=jQuery("[name='Status']").val(); $('#output').append('<div>'+getText+'</div>'); // post status into server $.ajax({ url: location.href, data: {ajax: 1, status: $("[name='Status']").val()}, dataType: 'json', type: "POST", success: function(result) { // parse result and insert into #output here // ... // restart fetching data startPolling(); } }); }); // start fetching data startPolling(); }); </code></pre> <p>Here is a simple demo of that javascript (with working xhr requests) on the phpfiddle: <a href="http://phpfiddle.org/lite/code/hn0-0e1" rel="nofollow">http://phpfiddle.org/lite/code/hn0-0e1</a></p> <p>But I'm wondering how many statuses will be fetched in each request? Wouldn't be better to store already fetched statuses in a variable and just load those that are newer than the last one we already have? Just like facebook does - when you have your wall opened it does not reload the whole wall each X seconds but just fetches statuses that have been added since previous call.</p> <p>Just a quick idea:</p> <pre><code>$(function(){ // interval reference and jQuery XHR object var ajaxInterval, jqxhr; var statuses = []; // initialize fetching data from server function startPolling() { stopPolling(); ajaxInterval = setInterval( function() { // get the newest stored id var lastStatusId = 0; if(statuses.length) lastStatusId = statuses[0].id; jqxhr = $.ajax({ url: location.href, data: {ajax: 1, lastStatusId: lastStatusId}, dataType: 'json', type: "GET", success: function(result) { if(result.updateStatuses) { // prepending the latest statuses to our variable statuses = result.statuses.concat(statuses); // merge repaint output displayStatuses(); } } }); }, 1000); } // clear interval and abort xhr request function stopPolling() { if(ajaxInterval) clearInterval(ajaxInterval); if(jqxhr) jqxhr.abort(); } function displayStatuses() { var $output = $('#output'); $output.empty(); // parse statuses array of objects and // insert the result in the #output // ... } $('input').click(function(){ // this prevents overwriting from old ajax call stopPolling(); // insert into #output our new status var getText=jQuery("[name='Status']").val(); $('#output').append('<div>'+getText+'</div>'); // get the newest stored id var lastStatusId = 0; if(statuses.length) lastStatusId = statuses[0].id; // post status into server $.ajax({ url: location.href, data: {ajax: 1, status: $("[name='Status']").val(), lastStatusId: lastStatusId}, dataType: 'json', type: "POST", success: function(result) { if(result.updateStatuses) { // prepending the latest statuses to our variable statuses = result.statuses.concat(statuses); // merge repaint output displayStatuses(); } // restart fetching data startPolling(); } }); }); // start fetching data startPolling(); }); </code></pre> <p>So your php code should like something like this:</p> <pre><code> $Query = $DB->prepare("SELECT Statuses.ID, Text, Username FROM statuses, users WHERE Username.ID = statuses.UserID AND statuses.ID > ? ORDER BY Statuses.ID DESC"); $Query->bind_param('i',intval($_REQUEST['lastStatusId'])); $Query->execute(); $Query->bind_result($ID, $Text, $Username); $Query->store_result(); $Array = array(); while($Query->fetch()){ $Array[] = array ('id'=>$ID,'username'=>$Username, 'text'=>$Text); } $Query->close(); // are there any new statuses? $result['updateStatuses'] = false; if( count($Array) ) $result['updateStatuses'] = true; $result['statuses'] = $Array; echo json_encode($Array); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload