Declare same variable, same id, different partials | Client Side

1

Hello!

Hope you are all well. Its not an important issue, but more just a quality of life question for me.
Working with partials, and basically i have one partial setting up/setting values for variables that will be used in another partial.
I am wanting to declare the same variable (same id) in both partials, just so i get the benefits of wappler ui/datapicker. (i know they will still have access if not declared)
Ive done this and seems to be okay, I’m just wondering if any issues will popup with me doing this or bad practice

Cheers

2

This is the definition of an id attribute:

The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
ref: MDN

In other words, the value of an id can only be used once in a document.

Partials are used to include repeatable parts of the site and pass data to the views. When a partial is added to a document (the page), the code within the partial is added to that document.

In other words, if the partial contains an id with the same id as one that is already in the document, there would be two identical id’s in the document. This would be bad practice.

I hear you say: “but it works without a problem”.

Browsers are very tolerant. If I code a document as follows:

<body>
    <h1>This is the Heading</h1>
</body>

This is what I see in the Developer panel:

image
image1454×509 32.7 KB

The browser has added the <html> and <head> tags to the document. In the same way that it will ignore the fact that you have two identical id’s in your document.

The problem arises when using getElementById() to retrieve a particular element.

3

Thank you ben.
So ill just comment it out each time, so i can still get ui/data picker in partials without duplicating the element.

Another thought that came to my head, using a conditional region, could i just put all the stuff i need like server connect/variables and so on in the conditional region that is always false/wont load. That way i still get wappler UI benefits, but it will never be in dom right (so just should exist)? so shouldn’t cause any issues

4

:+1: