Jump to content

JS and Multiple Data pages on same Web page

Recommended Posts


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


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


Link to comment
Share on other sites

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



Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...