Jump to content
  • 0

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



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?



Caspio - duplicate IDs.PNG

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 1

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 class="dp-container" id="dp-2">
        <script type="text/javascript" src="https://*******.caspio.com/dp/12789***************/emb"></script>


    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!

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.

Answer this question...

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