With a lot of help from @kalley, we found that if I comment on the next two lines, the LAG is gone!
var $tableContents = $table.find('tbody') var $html = $('<tbody/>').html(data);
But how do I save the above, but cancel the LAG?
FURTHER INFORMATION: The code below works, but the problem is that $.GET causes the browser to freeze until the ajax request is completed. Do I need (flow control?) Or something that will solve this problem without blocking / freezing the browser until ajax completes the GET request.
The largest LAG / Lockup / Hang is in $.get("updatetable.php" , since the others only return 7 or less (number) of values, and this (updatetable.php) returns more (200-300kb). I would like implement some kind of flow control here or make the script wait like 5 seconds before running the update command for tablesort and before displaying the toast message so that ajax can get $.get("updatetable.php" , which I just don’t do, Understand why Does it block the browser when it receives data? Does it try to run other commands and what causes the LAG?
Below are the STEPS
1. $.get("getlastupdate.php" Will fire every 10 seconds or so to check if the date and time match the return data: 20130812092636 format: YYYmmddHHmmss.
2. if the date and time do not coincide with the last GET, then $.get("getlastupdate2.php" will work, and this data will be sent back and put in the toast message and sent to the user $().toastmessage('showNoticeToast', Vinfoo );
3. before or after the above ( $.get("getlastupdate2.php" ) another GET is launched: $.get('updatetable.php' this will GET updated information about the table. And replace the old with new information. And then update / apply table
4. at the end of all this, I want $.get("ajaxcontrol.php" , and this will return 1 or 2 if the user logs in, then he will be 2, and this is 1, and he will destroy the session and log out.
<script type="text/javascript" src="tablesorter/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="tablesorter/final/jquery.tablesorter.js"></script> <script type="text/javascript" src="tablesorter/final/jquery.tablesorter.widgets.js"></script> <script type="text/javascript" src="tablesorter/final/toastmessage/jquery.toastmessage-min.js"></script> <script type="text/javascript" src="tablesorter/qtip/jquery.qtip.min.js"></script> <script type="text/javascript"> var comper; function checkSession() { return $.get("ajaxcontrol.php", function (DblIn) { console.log('checking for session'); if (DblIn == 1) { window.location = 'loggedout.php'; } }).then(updateTable); } function checkComper() { var SvInfo; var onResponse = function (comperNow) { if (comper === undefined) { comper = comperNow; } else if (comper !== comperNow) { var Vinfoo; comper = comperNow; // returning this $.get will make delay done until this is done. return $.get("getlastupdate2.php", function (primaryAddType) { Vinfoo = primaryAddType; $().toastmessage('showNoticeToast', Vinfoo); }).then(checkSession); } }; $.get('getlastupdate.php').then(onResponse).done(function () { tid = setTimeout(checkComper, 2000); }); } function updateTable() { return $.get('updatetable.php', function (data) { console.log('update table'); var $table = $("table.tablesorter"); var $tableContents = $table.find('tbody') var $html = $('<tbody/>').html(data); $tableContents.replaceWith('<tbody>' + data + '</tbody>') //$tableContents.replaceWith($html) $table.trigger("update", [true]); var currentUrl = document.getElementById("frmcontent").contentWindow.location.href; var urls = ['indexTOM.php', 'index1.php'], frame = document.getElementById('frmcontent').contentDocument; for (var i = 0; i < urls.length; i++) { var url = urls[i]; if (frame.location.href.indexOf(url) !== -1) { frame.location.reload() } } $('[title!=""]').qtip({}); }); }; $(function () { var tid = setTimeout(checkComper, 2000); $("#append").click(function (e) { // We will assume this is a user action e.preventDefault(); updateTable(); }); // 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, // initialize zebra striping and filter widgets widgets: ["saveSort", "zebra", "filter"], headers: { 8: { sorter: false, filter: false } }, widgetOptions: { filter_childRows: false, filter_columnFilters: true, filter_cssFilter: 'tablesorter-filter', filter_filteredRow: 'filtered', filter_formatter: null, filter_functions: null, filter_hideFilters: false, // true, (see note in the options section above) filter_ignoreCase: true, filter_liveSearch: true, filter_reset: 'button.reset', filter_searchDelay: 300, filter_serversideFiltering: false, filter_startsWith: false, filter_useParsedData: false } }); // External search $('button.search').click(function () { var filters = [], col = $(this).data('filter-column'), // zero-based index txt = $(this).data('filter-text'); // text to add to filter filters[col] = txt; $.tablesorter.setFilters($('table.hasFilters'), filters, true); // new v2.9 return false; }); }); </script>