-1

So, I have done some research, and it's pretty clear that id should be unique in the DOM. This is my issue, and I am curious what the best solution to it is:

I am using jQueryUI tabs as well as a custom menu and ajax to load specific pages into a content pane without re-rendering the browser. From some of these sub pages, a user can open a popup (done with a jQueryUI dialog) to edit customer information. Because these load a server side page, in each place that this form would be generated, it uses the same ids.

I have found that there are a number of ways to close a dialog without removing it from the DOM. This causes confusion later when it, or another form is opened elsewhere, and now there are conflicting ids present in the DOM. I am working on tracking down all the ways to close a dialog, and making sure to replace them with .dailog("destroy").remove() to make sure that they are erased from the DOM, but I want to be sure the solution here is fool proof in the event that someone one gets left on the page.

My two immediate thoughts:

1.) Generate a random string to append to each form element's id when the form is rendered, fully preserving uniqueness of the id.

2.) Use more specified selectors when getting the form data, i.e. scoping it to the popup that was created, the page that it was created from, and then the tab that it is under, and not worrying as much about id uniqueness.

The first feels ugly, and in theory you COULD randomly duplicate the string and still run into an issue. The later just feels bulky and ugly to me. Is there an option I am missing? What is best practice when it comes to dealing with IDs that can be duplicated in this way?

Thanks, Eric

4
  • IDs should be always unique. Apr 21, 2015 at 13:30
  • 1
    One of the ways I'd do is to avoid using IDs unless there is no other way around.
    – lshettyl
    Apr 21, 2015 at 13:34
  • So, I avoid using an ID. How then do I select the correct element without being painfully coupled to the BOM structure, as GoogleHireMe has suggested below?
    – EpicWally
    Apr 21, 2015 at 13:41
  • You can distinguish between each element by using the event callback parameter from an event listener. See my answer below.
    – boombox
    Apr 21, 2015 at 14:04

3 Answers 3

2

You may use classes if you need "similar" objects. Id's purpose is to identify object uniquely.

By the way, classes are widely used, for example, in Bootstrap.

UPDATE: I think your "second" approach is bad, as you eventually can change the layout, but, in this way, you should track every change, and remember WHERE to change your selectors (possibly, it will be multiple places).

7
  • This is a good point with regard to the 2nd solution. How would I actually use classes in this case though without running into that problem? I couldn't simply select based on class, I would need to select class from within the specific DOM element. Simply replacing ID with class doesn't actually fix the problem, as I could still find duplicate elements with the selector.
    – EpicWally
    Apr 21, 2015 at 13:38
  • @EpicWally You can have, for example, three tabs with unique ids. But elements of this tab can have similar ids. For example, you need to select a div with class "div-class" from the tab. Every tab has a div with this class, but tab id + class uniquely identifies your object. Apr 21, 2015 at 13:40
  • And what if you can create the popup multiple times inside the same tab? How then would you uniquely identify it?
    – EpicWally
    Apr 21, 2015 at 13:44
  • @EpicWally Can you have multiple popup at the same time? Apr 21, 2015 at 13:46
  • In some cases yes, you can open a popup from within a popup. In these cases though they wouldn't be loading the same view, so there shouldn't be overlap of form ids. However, as I said in the question, the default close behavior of jQueryUI dialogs is simply to hide them and leave them in the DOM, so in that case the original dialog is still "open" when you go and open a 2nd one, causing the conflicting ids.
    – EpicWally
    Apr 21, 2015 at 13:48
0

Before inserting the new element into the list, you could check if there is already an element existing on the page with that id. If it does exist than delete it. Like:

if($("#"+your_id).length!==0)    
        $("#"+your_id).remove();    
//insert the new element

But if you need that element as well, i would suggest that you use classes to group elements used for same purposes.

0

Here is what you can do to distinguish between the different dialogs when you try to close them:

1) Change each dialog id into a class, so that your dialogs can share the same class. Using the same id is not recommended.

2) You can create a click listener for the button that closes the correct dialog by using the event callback parameter. See the working snippet below.

var closeButtons, i, closeButtonsLen;

closeButtons = document.getElementsByClassName('close');

for (i = 0, closeButtonsLen = closeButtons.length; i < closeButtonsLen; i += 1) {
    closeButtons[i].addEventListener('click', function (e) {
        e.target.parentNode.setAttribute('hidden', true); // if you want to hide the dialog
    });
}
<div class="dialog"><button class="close">first x</button></div>
<div class="dialog"><button class="close">second x</button></div>
<div class="dialog"><button class="close">third x</button></div>

You can replace e.target.parentNode.setAttribute('hidden', true); with whatever you need to do. e.target.parentNode gets the dialog element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.