Home/ Questions/Q 6607973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:33:38+00:00

I’m having problems with my application due the ID collision. The application basically uses

  • 0

I’m having problems with my application due the ID collision. The application basically uses AJAX to load code snippets on user demand. These snippets are very different, but sometimes, a code snippet uses the same ID than another in a HTML tag.

Imagine user asks for snippet 1 and gets this:

....
<input id="myvar" type="checkbox" name="myname" />
....

This snippet is added to the main page code through JQuery.load()

Then, user ask for snippet 2 and gets:

....
<div id="myvar">....</div>
....

At this moment, there are 2 different HTML tags with the same ID, so when the app does:

$("#myvar").something()

the result is undefined.

So, the problem is I don’t know if it’s possible to split code snippets in HTML using any javascript or HTML feature or trick.

It’s not an option to prefix all ID on load, due each snippet has an associated javascript code to process it and needs to have access to the snippet DOM.

Good news: snippets are completly isolated on the page. The page structure is like this:

<html>
  <head>...</head>
  <body>
    <div id="header">...</div>
    <div id="common_controls">...</div>
    <div id="snippets">
      <div class="snippet" id="snippet-1">
        // Snippet 1 code here
      </div>
      <div class="snippet" id="snippet-2">
        // Snippet 2 code here
      </div>
    </div>
  </body>
</html>

Any idea?

Edit: I can’t control snippets content, so it’s not an option force to use specific ID names.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best solution is to embed each code snippet in a separate IFRAME, because the ID may not be the only conflict-causing item.

    • Snippets that heavily rely on the document’s default CSS/script attributes may fail due conflicting scripts.
    • Script snippets that throw variables in the global scope may interfere with the other snippets
    • Script snippets that refer to a specific class index (class="specific") will also break due conflicts
    • Snippets containing <script> will not be executed when inserted in the HTML, while it may be important for the appearance of the snippet.

    Et cetera. Just embed the snippets in a scripted iframe to circumvent these possible issues.

    EDIT
    Frames can easily communicate with the parent (even cross-domain) through postMessage. When you’re in the same domain, communicating is even easier.

    You’re probably looking for an easier method to communicate between child frames. Well, consider this example (same domain only):

    JS:

    //Snippet from frame 1
var othersnippet = parent.frames["othersnippet"].contentWindow;
othersnippet.getspecialMethod(); //Custom function, EXAMPLE
    • parent (within the frame) = top, which refers to the Window object
    • window.frames is an object which refers to all frames within one document, by name. Note: “Within a document” doen’t include the frames in frames)

    HTML:

    <iframe name="othersnippet" />
<!-- No id needed, because you access frames through the
     window.frames[name] property-->
    • 0