Question

I’m having an issue where I’m loading 3 DIV’s from an AJAX source. The returning HTML looks a little like:

<div>
  <label for="firstName">First Name</label>
  <input id="firstName" name="firstName"....
</div>

So imagine this block duplicated 3 times in the same DOM. The problem is when I click on the label in the 3rd loaded DIV, its highlighting the text box in the 1st loaded DIV. So now what I have are 3 blocks of HTML where the ID’s are clashing.

Does anyone know of any work around for this?

Thanks.

Answer 1

It’s not compliant to the standard to have multiple elements with the same id. As a result IE, Firefox behaves one way and Chrome behaves another way.

One way is to modify the ids as they are loaded from the AJAX source. You could have a placeholder id served up like id="UNIQUE_id" and then use the .html().replace(/UNIQUE_/g,something_unique)); where something_unique could be just a serially incremented number…

htmlhtml5