How to detect Ajax Loading on update as opposed to initial loading

[Cstricker]

I have an web page that displays 9 caspio data pages.  All of the 9 data pages can be updated at any time.  The caspio pages are displayed across 3 tabs on the web page.  Because an update on any of the pages would trigger a reload of the web page I incorporated some java script and tables and triggers to determine which of the data pages/tables was updated last and depending on the last datapage updated the javascript would make which ever tab containing the last updated data page visible when the page was reloaded.  As well there is additional javascript to completely disable all input when the data displayed is no longer available for update.   Now that I can enable ajax loading which is faster than reloading the entire web page that java script feature of showing a specific tab  is not needed when they update a datapage but is needed when a user initially goes to the web page.  It appears the DataPage ready event still fires when doing an ajax update but I would like to know if that event fires based on an ajax update as opposed to an initial loading of the web page so I can circumvent the javascript logic which causes a small delay for the user.

[DefinitelyNot31337]

Hello Cstricker,

 

If I understand you correctly, you wanted to be able to somehow differentiate 'DataPageReady' event from a Form Submission. If this is the case, please know  that Caspio also has 'BeforeFormSubmit' event which might help you.

The event also can also accept parameters which gives you access to create control statements based on which Form/DataPage AppKey was submitted.

Official documentation for AJAX-Loading in Caspio located here.

 

Hope this helps.

DN31337

 

[Cstricker]

So it seems I can use this but sporadically.  The issue I have is that I am embedding 9 data pages on one web page.  I should, theoretically be able to get the BeforeFormSubmit, DataPageReady, and FormSubmitted event from any of the datapages in the web page.  But I seem to only be able to attach and listen to one of the datapages, and not all of them.  As well, I think I need the FormSubmitted event rather than the BeforeFormSubmit. 

If you could guide me in the correct direction there it would be helpful.

And finally related to this same topic, once I get the FormSubmitted or BeforeFormSubmitted event from one of the datapages I would like reload/refresh another database that currently displays information from a table populated by a trigger.  I do not want to reload the entire web page as that takes too long.  So to be more clear:

I have three datapages:

 Page 1 - grid of pend approval costs

 Page 2 - second grid of approved costs

Page 3 - Displays total costs from Grid 1 and Grid 2 by way of a trigger on the underlying data table from Grid 1 and Grid 2.

I separate out pending approved costs from approved costs so that I can modify pending approved costs in any way, but only exclude approved costs so the grids have different abilities.

 

I have 2 Tables -

Costs (both pending approval and approved)

Total of all costs

When I update either Grid 1 or Grid 2 the posted data is updated in the Costs table and a trigger totals the costs (both pending approval and approved) and updates the total cost table. 

The datapage for total costs needs to be refreshed (through an ajax call or some event) when Grid 1 or Grid 2 is submitted.  But I do not want to reload the entire page, just the embedded Total Costs datapage.

 

[DefinitelyNot31337]

Hi Cstricker,

 

Apologies for late response. I wasn't notified notified that this thread was updated.

 

Anyway, you may be able to specify which DataPage fired which action (DataPageReady, BeforeFormSubmit) by accessing the emitted event object and putting custom logic in it. A sample I got from the documentation is this:

document.addEventListener('DataPageReady', function (event) {
       	if (event.detail.appKey == 'DataPage1 AppKey') {
              //do something 
          
       	} else if (event.detail.appKey == 'DataPage2 AppKey')    {
              //do something
	}
});

You may add as many DataPages as you wish.

 

For your next question, if the Submission Form that has been submitted fires a trigger that inserts/modifies data to/from another table. then the DataPages related to it are updated as well. I believe it is within the scope of AJAX feature as I have an app that implements this. Works for me.

 

Hope this helps.

 

Regards,

DN31337

[Cstricker]

If I was showing the data page for the updated totals table by itself I suspect it would show the new data when the datapage loads but the data page for the totals as well as the two grids of items is deployed within a web page that has 9 other data pages embedded within it so I have to reload the entire web page to see the total update when the grid items are modified. The data pages within the web page do not update automatically when the data table behind them is updated through a trigger.  That is why I am looking for the ajax events to detect an update in one datapage and when the event is fired cause another data page to reload the data from the underlying table.  

[kpcollier]

Having the same exact problem, Cstricker. Currently working on it. Sick of that dang refresh button. If I find a solution Ill let you know, in the meantime I will stick around here in case one pops up before me. 

[kpcollier]

Just an update. Did some digging and found an alert in the debugging tools on one of my DataPages.  

"[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience."

This is showing on every one of my datapages. I am not sure if it is something I initially did when first creating the app but AJAX loading is being cut down automatically.

The request is hard to see through the debugger tools (of course) but I am guessing the callback functions aren't working properly. I know this isn't a solution, but I think I at least found the problem. Hopefully someone who can help will see this.