Refreshing table rows with Ajax (v2020)

PHPMaker User Submitted Tips (PHPMaker)
1

Place in Client Scripts > Global > Pages with header/footer > Global Code)

function refreshTable(delay = 10000, previewCheck = true) { // Refresh period ... 1000 = 1 second
	tableRefresh = setInterval(function() {
		if (previewCheck && $('.ew-preview-row-btn.icon-collapse').length > 0)
			return;
		$('.ew-preview-row-btn.icon-collapse').trigger('click');
		$('table.ew-table > tbody').load(location.href + ' table.ew-table > tbody tr', function() {
			$(this).find('tr:even').removeClass('ew-table-alt-row').addClass('ew-table-row');
			$(this).find('tr:odd').removeClass('ew-table-row').addClass('ew-table-alt-row');
			$('.ew-preview-row-btn').click(ew.showDetails);
			$('div.ew-preview [data-toggle="tab"]').on('show.bs.tab', ew.tabShow);
			$('div.popover').hide();
			ew.initTooltips();
		});
	}, delay);
}

Then place one of these variants in the relevant Client Scripts > Table Specific > List Page > Startup Script event(s):

refreshTable(); // this variant triggers refreshes every "default delay" (10 in the above code) seconds, but ONLY if no preview panes are visible
refreshTable(20000); // this variant triggers refreshes every 20 seconds, but ONLY if no preview panes are visible
refreshTable(30000, false); // this variant triggers refreshes every 30 seconds - regardless of preview pane visibility
2

was on a listview that refreshes… selected “view” when a refresh is taking place on the listview in the background it is affecting the modal dialog display…
on this particular view form its a master /detail view, the grid/rows on the modal dialog form displayed columns that were part of the background listview form.
so the grid had its own columns 4 in this case — and then next to those 4 were an additional 5 columns that were appended to the end of the grid – which these 5 columns were part of the list-view in the background/main page.not sure if this is fixable, can u detect when a modal dialog is popped up and suspend the refreshing of the table ?

3

Actually, this is probably better as modal dialogs should always be avoided…if ((previewCheck && $(‘.ew-preview-row-btn.icon-collapse’).length > 0) || $(‘.modal.show’).length > 0)

4

Thanks Adam. Script works great. But I’m encountering a bug on pages that use “multiple detail tables”. When it refreshes, my detail tables are completely messed up visually. I dunno how to describe it. Can anyone else confirm? Thanks.

5

did you apply the fixes noted in this thread.

6

Yup the script is currently

function refreshTable(delay = 10000, previewCheck = true) { // Refresh period ... 1000 = 1 second
tableRefresh = setInterval(function() {
if ((previewCheck && $('.ew-preview-row-btn.icon-collapse').length > 0) || $('.modal.show').length > 0)
return;
$('.ew-preview-row-btn.icon-collapse').trigger('click');
$('table.ew-table > tbody').load(location.href + ' table.ew-table > tbody tr', function() {
$(this).find('tr:even').removeClass('ew-table-alt-row').addClass('ew-table-row');
$(this).find('tr:odd').removeClass('ew-table-row').addClass('ew-table-alt-row');
$('.ew-preview-row-btn').click(ew.showDetails);
$('div.ew-preview [data-toggle="tab"]').on('show.bs.tab', ew.tabShow);
$('div.popover').hide();
ew.initTooltips();
});
}, delay);
}

and

refreshTable(60000, false);

works fine on a regular list, and table detail list. my problem sounds similar to your last problem but it happens a master table with “multiple details tables” enabled.it happens in the demo project as well. In the demo project copy the script to the global section as usual and the refresh call can go in the list page startup script section of “orderdetails” or/and “order details extended”. Personally I put the call in the global startup so that all pages will refresh but for the sake of debugging we can leave it a single table.Generate and navigate to Other Tables > Orders. Go to the master detail view of an order. You’ll see the two tabs (detail tables). Scroll to the bottom of the table, wait for the refresh and see what happens.Thanks.

7

Hi Adam,

  • is it possible to modify the code – create another function (eg: refreshPreviewTable) that will update a preview listview?

i have a client master → documents preview/sub-form and on that form the user can archive/zip the displayed documents, I use an ajax call to initiate the zipping function and create a table entry, i’d love for the grid to display the new record after the ajax call returns. I think you disabled this due to issues with master/detail links

  • if listview is in grid-add or grid-edit mode a refresh occurs and wipes any data on the form…
  • is there a way to hide the page load progress
    using “Adams” table refresh code, and don’t want the load progress to be displayed while the refresh is happening (v2020)
8

http://www.hkvforums.com/viewtopic.php?f=4&t=45167

9

thanks!, is there a jquery/Js method to do this ?

10

have a client view form that also displays 2 detail-formswhen the client record is viewed as:
clientsview.php?showdetail=client_docs,clients_notes&id=123456it appears that the refreshTable() is executed on the two detail forms… when this happens, the rows from both forms are merged onto each detail tabis it possible to suppress table refresh on a “view form” ?

11

Update this line…

if (previewCheck && $(‘.ew-preview-row-btn.icon-collapse’).length > 0)

…and simply add to the list of elements to avoid…

if (previewCheck && ($(‘.ew-preview-row-btn.icon-collapse’).length > 0 || $(‘some_other_element’).length > 0 || etc…)

12

added the follow to suppress refreshes if multi-tabs/detail-pages have been added to a view

|| $(‘.ew-detail-pages’).length > 0

13

This works very well in list pages.
Can this be modified to work on dashboard report?
I have a dashboard form with multiple summary reports. Function is working, but as a result data on the summary reports is messed-up.

14

Can’t think of a reason why it couldn’t be made to work, but it’s something you’ll need to experiment with.I’m not sure what you mean by “but as a result data on the summary reports is messed-up”, but it may be the case that you have to replace charts / reports individually.You may also need to trigger some JS to reinitalise events - you’ll see that being done in my list page example, but I assume the events will be different.

15

Added to suppress refresh while on grid add or grid edit page|| $(‘.ew-grid-add-edit’).length > 0

16

Hi Adam,with the ability to hide columns now…, if you have hidden columns, the table row refresh functionality displays the hidden column data as well, with the headers being blank - if that makes sense. Looks like its refreshing all the columns and should not re-display hidden columns on the refresh…

17

It’s been a very long time since I shared that code - it may (or may not) be possible to correct the issue you describe, but you’ll need to do some experimenting to confirm that.If you manage to find a solution then please post it here to assist others.

18

Hi Adam - after refresh all hover over functions cease to work i.e. the mouseover no longer highlights a field.
Did you also experience this?

19

I haven’t used the code for a long time, but that was an initial issue - I’m pretty sure that the ew.initTooltips(); line fixed it, but perhaps it’s no longer effective.