JS and Multiple Data pages on same Web page

[Lynda]

Setup:

I have four data pages on a single web page.

• 3 of the data pages are report data pages,
• 1 is a list data page.

All 4 data pages filter on [@RecipeID]

I have a JS script that applies conditional color formatting to the 4th data page (Recipe Nutrition per Serving) and this works KINDA OF...

My ASSUMPTIONS:

• Data pages are self contained. Meaning what I do in one (custom code) does NOT apply to other embedded scripts (data pages) on a web page.

MY PROBLEM:

My script in the 4th data page (Recipe Nutrition per Serving) executes and formats as desired, but it is also executing the script against the other 3 data pages on the web page and executing them multiple times and changing their formatting. I have used this script in other report data pages that shared the webpage with other dp's and did not experience this problem.  My understanding is that the script should be self contained within the data page.

I don't know if this is a script problem or a data page problem, but it is a problem.

If anyone can help.

Lynda

[Lynda]

This is a platform implementation problem (how the embedded scripts are executed on your platform).

I changed to script from executing at a document level to executing at a record level (added a HTML Block to row and then reconfigured js code for record) and it works perfectly. Now I just need to hide the ugly ID field required for unique record processing. 

Thanks,

Lynda

[DrSimi]

Hi Lynda,

This behavior is a script problem, not limited to Caspio since JS selectors that act with document will work on the whole HTML website once embedded in the same page.

To avoid this unwanted behavior, your solution seems to work, but the best approach is customizing the code to make it unique for each DataPage. To do this, you need to add the logic to execute the code only when that specific DP is loaded, and also ensure to write JS selectors using that specific DataPage elements only (using querySelectorAll to get all the child elements for a DP), instead of document.

Caspio shows sample code to run JS only when a specific DP is finished loading AJAX Loading - Caspio Online Help