Refreshing table rows with Ajax (v2020)

Tips submitted by PHPMaker users
Post Reply
Adam
User
Posts: 480

Refreshing table rows with Ajax (v2020)

Post by Adam »

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

sticcino
User
Posts: 1043

Post by sticcino »

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 ?


Adam
User
Posts: 480

Post by Adam »

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)


gigakun
User
Posts: 99

Post by gigakun »

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.


sticcino
User
Posts: 1043

Post by sticcino »

did you apply the fixes noted in this thread.


gigakun
User
Posts: 99

Post by gigakun »

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.


sticcino
User
Posts: 1043

Post by sticcino »

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)



sticcino
User
Posts: 1043

Post by sticcino »

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

sticcino
User
Posts: 1043

Post by sticcino »

have a client view form that also displays 2 detail-forms

when the client record is viewed as:
clientsview.php?showdetail=client_docs,clients_notes&id=123456

it appears that the refreshTable() is executed on the two detail forms... when this happens, the rows from both forms are merged onto each detail tab

is it possible to suppress table refresh on a "view form" ?


Adam
User
Posts: 480

Post by Adam »

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...)

sticcino
User
Posts: 1043

Post by sticcino »

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

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

bpmsolutions
User
Posts: 26

Post by bpmsolutions »

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.


Adam
User
Posts: 480

Post by Adam »

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.


begin2know
User
Posts: 1

Post by begin2know »

Added to suppress refresh while on grid add or grid edit page

|| $('.ew-grid-add-edit').length > 0


sticcino
User
Posts: 1043

Post by sticcino »

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...


Adam
User
Posts: 480

Post by Adam »

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.


MahatmaGuru
User
Posts: 1

Post by MahatmaGuru »

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?


Adam
User
Posts: 480

Post by Adam »

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.


Post Reply