Databases
StackOverflow2013
Postsdbo
POEverything works but there is LAG in the script?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEverything works but there is LAG in the script?
    text
    copied!<p>I have a somewhat big piece of javascript/ajax code, and I would like to see if it is possible to make it run more efficiently WITHOUT taking out any functions.</p> <p>My problem is that I'm getting a page called 'getlastupdate.php', it only has 14 numbers, these numbers are the date and time that a database table was last updated.</p> <p>the format is: </p> <ul> <li>Year-Month-Day-HH-mm:ss</li> </ul> <p>Here's an example: <code>20130724082105</code></p> <p>I took out the ':.-' because we don't need it.</p> <p>My javascript code compares this with another ajax GET that repeatedly fetches the current date/time from 'getlastupdate.php'. If it finds that the two values are not the same it triggers another GET to fetch the row info.</p> <p>It takes the updated row info and displays it in the browser. Finally it GETs the entire updated table and puts it back into the table (tablesorter).</p> <p>Everything seems to work fine however I noticed some LAG when the script is adding the new table info and deleting the old ? or at least I think that is the main cause for the LAG.</p> <p>Here is the code:</p> <pre><code>&lt;link type="text/css" rel="stylesheet" href="tablesorter/qtip/jquery.qtip.min.css" /&gt; &lt;script type="text/javascript" src="tablesorter/jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;!-- blue theme stylesheet --&gt; &lt;link rel="stylesheet" href="tablesorter/final/theme.blue.css"&gt; &lt;!-- tablesorter plugin --&gt; &lt;script src="tablesorter/final/jquery.tablesorter.js"&gt;&lt;/script&gt; &lt;!-- tablesorter widget file - loaded after the plugin --&gt; &lt;script src="tablesorter/final/jquery.tablesorter.widgets.js"&gt;&lt;/script&gt; &lt;!-- START: toastmessage Notify --&gt; &lt;link type="text/css" href="tablesorter/final/toastmessage/jquery.toastmessage-min.css" rel="stylesheet"/&gt; &lt;script type="text/javascript" src="tablesorter/final/toastmessage/jquery.toastmessage-min.js"&gt;&lt;/script&gt; &lt;!-- END: toastmessage Notify --&gt; &lt;script type="text/javascript" src="tablesorter/qtip/jquery.qtip.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var comper; function checkComper() { var SvInfo; var onResponse = function(comperNow) { // comperNow is the latest date/time var //check if comper has been set / first time method is called if (comper === undefined) { comper = comperNow; return; } if (comper !== comperNow) { var Vinfoo; $.get("getlastupdate2.php", function(primaryAddType){ // alert("Data: " + primaryAddType); Vinfoo = primaryAddType; // show a message to the visitor ----&gt; //alert(Vinfoo); $().toastmessage('showNoticeToast', Vinfoo); }); $('#append').trigger('click'); // UPDATE THE TABLE BUT IT TAKES 3-4 SEC. AND I NEED IT TO SPEED UP! // and update comper to show the date/time from comperNow comper = comperNow; } }; $.get('getlastupdate.php', onResponse); } var tid = setInterval(checkComper, 2000); // repeat myself $(function() { $('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. &lt;-- CUSTOM TOOLTIP var $table = $("table.tablesorter"); $("#append").click(function(e) { e.preventDefault(); $.get('updatetable.php', function(data) { $table .find('tbody') .html('') .append(data); $table.trigger("update", [true]); $('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. &lt;-- CUSTOM TOOLTIP }); }); // call the tablesorter plugin $("table.tablesorter").tablesorter({ theme: 'blue', // hidden filter input/selects will resize the columns, so try to minimize the change widthFixed : true, //sortList: [[2,0],[1,0]], // initialize zebra striping and filter widgets widgets: ["saveSort", "zebra", "filter"], // headers: { }, widgetOptions : { // If there are child rows in the table (rows with class name from "cssChildRow" option) // and this option is true and a match is found anywhere in the child row, then it will make that row // visible; default is false filter_childRows : false, // if true, a filter will be added to the top of each table column; // disabled by using -&gt; headers: { 1: { filter: false } } OR add class="filter-false" // if you set this to false, make sure you perform a search using the second method below filter_columnFilters : true, // css class applied to the table row containing the filters &amp; the inputs within that row filter_cssFilter : 'tablesorter-filter', // class added to filtered rows (rows that are not showing); needed by pager plugin filter_filteredRow : 'filtered', // add custom filter elements to the filter row // see the filter formatter demos for more specifics filter_formatter : null, // add custom filter functions using this option // see the filter widget custom demo for more specifics on how to use this option filter_functions : null, // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus filter_hideFilters : false, // true, (see note in the options section above) // Set this option to false to make the searches case sensitive filter_ignoreCase : true, // if true, search column content while the user types (with a delay) filter_liveSearch : true, // jQuery selector string of an element used to reset the filters filter_reset : 'button.reset', // Delay in milliseconds before the filter widget starts searching; This option prevents searching for // every character while typing and should make searching large tables faster. filter_searchDelay : 300, // if true, server-side filtering should be performed because client-side filtering will be disabled, but // the ui and events will still be used. filter_serversideFiltering: false, // Set this option to true to use the filter to find text from the start of the column // So typing in "a" will find "albert" but not "frank", both have a's; default is false filter_startsWith : false, // Filter using parsed content for ALL columns // be careful on using this on date columns as the date is parsed and stored as time in seconds filter_useParsedData : false } }); // External search // buttons set up like this: // &lt;button type="button" class="search" data-filter-column="4" data-filter-text="2?%"&gt;Saved Search&lt;/button&gt; $('button.search').click(function(){ /*** first method *** data-filter-column="1" data-filter-text="!son" add search value to Discount column (zero based index) input */ var filters = [], col = $(this).data('filter-column'), // zero-based index txt = $(this).data('filter-text'); // text to add to filter filters[col] = txt; // using "table.hasFilters" here to make sure we aren't targetting a sticky header $.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9 /** old method (prior to tablsorter v2.9 *** var filters = $('table.tablesorter').find('input.tablesorter-filter'); filters.val(''); // clear all filters filters.eq(col).val(txt).trigger('search', false); ******/ /*** second method *** this method bypasses the filter inputs, so the "filter_columnFilters" option can be set to false (no column filters showing) ******/ /* var columns = []; columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ] $('table').trigger('search', [ columns ]); */ return false; }); }); &lt;/script&gt; </code></pre> <p>I found the source of the LAG if I comment out this line: </p> <pre><code>$('#append').trigger('click'); // UPDATE THE TABLE BUT IT TAKES 3-4 SEC. AND I NEED IT TO SPEED UP! it will speed everything up but how do I get it to speed up or even slow down so that it doesn't lock up the current page. </code></pre> <p>What also speeds-up the loading is if I comment out this:</p> <pre><code> var $table = $("table.tablesorter"); $("#append").click(function(e) { e.preventDefault(); $.get('updatetable.php', function(data) { $table .find('tbody') .html('') .append(data); $table.trigger("update", [true]); // ******** +++++++++++ ************** $('[title!=""]').qtip({}); // &lt;-- CUSTOM TOOLTIP THIS SLOWS DOWN THE LOADING ALSO!!!!! // ******** +++++++++++ ************** }); }); </code></pre> <p>@Abudoul Sy, Here is what I have now:</p> <pre><code>&lt;script type="text/javascript"&gt; // I should be put at the top of the file (not in an Ajax Loop) var compileHTML = function (html) { var div = document.createElement("div"); div.innerHTML = html; var fragment = document.createDocumentFragment(); while ( div.firstChild ) { fragment.appendChild( div.firstChild ); } return fragment }; var comper; function checkComper() { var SvInfo; var onResponse = function(comperNow) { // comperNow is the latest date/time var //check if comper has been set / first time method is called if (comper === undefined) { comper = comperNow; return; } if (comper !== comperNow) { var Vinfoo; $.get("getlastupdate2.php", function(primaryAddType){ // alert("Data: " + primaryAddType); Vinfoo = primaryAddType; // show a message to the visitor ----&gt; //alert(Vinfoo); $().toastmessage('showNoticeToast', Vinfoo); }); $('#append').trigger('click'); // UPDATE THE TABLE BUT IT TAKES 3-4 SEC. AND I NEED IT TO SPEED UP! // and update comper to show the date/time from comperNow comper = comperNow; } }; $.get('getlastupdate.php', onResponse); } var tid = setInterval(checkComper, 2000); // repeat myself $(function() { $(document).ready(function() { $('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. &lt;-- CUSTOM TOOLTIP }) var $table = $("table.tablesorter"); //Keeping a reference variable to var $tableContents = $table.find('tbody'); $("#append").click(function(e) { e.preventDefault(); $.get('updatetable.php', function(data) { $table //When ajax is done var compiledHtml = window.compileHTML(data); $tableContents.html(compiledHTML); $table.trigger("update", [true]); $(document).ready(function() { $('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. &lt;-- CUSTOM TOOLTIP }) }); }); // call the tablesorter plugin $("table.tablesorter").tablesorter({ theme: 'blue', // hidden filter input/selects will resize the columns, so try to minimize the change widthFixed : true, //sortList: [[2,0],[1,0]], // initialize zebra striping and filter widgets widgets: ["saveSort", "zebra", "filter"], headers: { 8: { sorter: false, filter: false } }, widgetOptions : { // If there are child rows in the table (rows with class name from "cssChildRow" option) // and this option is true and a match is found anywhere in the child row, then it will make that row // visible; default is false filter_childRows : false, // if true, a filter will be added to the top of each table column; // disabled by using -&gt; headers: { 1: { filter: false } } OR add class="filter-false" // if you set this to false, make sure you perform a search using the second method below filter_columnFilters : true, // css class applied to the table row containing the filters &amp; the inputs within that row filter_cssFilter : 'tablesorter-filter', // class added to filtered rows (rows that are not showing); needed by pager plugin filter_filteredRow : 'filtered', // add custom filter elements to the filter row // see the filter formatter demos for more specifics filter_formatter : null, // add custom filter functions using this option // see the filter widget custom demo for more specifics on how to use this option filter_functions : null, // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus filter_hideFilters : false, // true, (see note in the options section above) // Set this option to false to make the searches case sensitive filter_ignoreCase : true, // if true, search column content while the user types (with a delay) filter_liveSearch : true, // jQuery selector string of an element used to reset the filters filter_reset : 'button.reset', // Delay in milliseconds before the filter widget starts searching; This option prevents searching for // every character while typing and should make searching large tables faster. filter_searchDelay : 300, // if true, server-side filtering should be performed because client-side filtering will be disabled, but // the ui and events will still be used. filter_serversideFiltering: false, // Set this option to true to use the filter to find text from the start of the column // So typing in "a" will find "albert" but not "frank", both have a's; default is false filter_startsWith : false, // Filter using parsed content for ALL columns // be careful on using this on date columns as the date is parsed and stored as time in seconds filter_useParsedData : false } }); // External search // buttons set up like this: // &lt;button type="button" class="search" data-filter-column="4" data-filter-text="2?%"&gt;Saved Search&lt;/button&gt; $('button.search').click(function(){ /*** first method *** data-filter-column="1" data-filter-text="!son" add search value to Discount column (zero based index) input */ var filters = [], col = $(this).data('filter-column'), // zero-based index txt = $(this).data('filter-text'); // text to add to filter filters[col] = txt; // using "table.hasFilters" here to make sure we aren't targetting a sticky header $.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9 /** old method (prior to tablsorter v2.9 *** var filters = $('table.tablesorter').find('input.tablesorter-filter'); filters.val(''); // clear all filters filters.eq(col).val(txt).trigger('search', false); ******/ /*** second method *** this method bypasses the filter inputs, so the "filter_columnFilters" option can be set to false (no column filters showing) ******/ /* var columns = []; columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ] $('table').trigger('search', [ columns ]); */ return false; }); }); &lt;/script&gt; </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