Using an HTML page with 2 DataPages, page inspector shows 3 id="caspioform"; can the IDs be changed?

[MarcG]

Hey Folks!

I am setting up 2 DataPages on the same HTML form. When I inspect the page, I see warnings that the DOM contains 3 items with the same IDs: caspioform. It also finds 2 IDs: searchID. Is there any way to rename these IDs before I deploy these DataPages?

 

Thanks.

[LWSChad]

Unfortunately, I haven't figured out how to change them... without breaking things.

Two work arounds that I use...

1. Iframes
   1. I use iframes in most of my Caspio applications that rely on DataPages. <form id="caspioform" ... is not the only duplicated ID. Buttons and fields common to both data pages are also duplicated. Iframes let each data page be the only one in the page.
2. Containers
   1. Simply putting the data pages into containers can help with this.

   2. <div class="dp-container" id="dp-1">
        <script type="text/javascript" src="https://*******.caspio.com/dp/12345***************/emb"></script>
      </div>
      
      <div class="dp-container" id="dp-2">
        <script type="text/javascript" src="https://*******.caspio.com/dp/12789***************/emb"></script>
      </div>

       

   3. This approach won't stop the error for non-unique ids, but you can now at least identify the elements accurately.

   4. const form1 = document.querySelector('#dp1 #caspioform');
      
      const form2 = document.querySelector('#dp2 #caspioform');

 

Hopefully this helps!

[MarcG]

I am using two different divs, but I haven't tried a specific container. Thank you! This helps a lot.