CODEWITHSUNDEEP
javascriptjquery
Nuvolari
Nuvolari

Reputation: 1155

JavaScript Id Handling

I'm developing a website that allows users to open multiple pages of the same content in the same browser window via inline 'windows'.

As the content can be repeated multiple times the id's can in turn be the same and therefore I have to "handle" them each so that I can distinguish between these pages.

I currently do this by assigning on load a unique id to the script like so:

var id_key;

 function load_page() {
     id_key++;
     load_script("test.js") //load javascript file
 }
 //test.js:
 $(function () {
     var unique_id = id_key;
     //adds the `unique id ` to the end of all elements  with an id attribute set. ie `mycontainer` becomes `mycontainer_1`
     update_ids(unique_id);

     $("#mybtn_ " + unique_id).click(function () {
         //do stuff
     });
 }

This works fine most of the time however if multiple pages are loaded too fast the Id tends to get overwritten causing confusion and errors.

I am wondering if there is a better technique of this doing this. I have heard of backbone.js but I am not sure whether that would be helpful in this case.

Upvotes: 0

Views: 163

Answers (2)

Aaron Digulla
Aaron Digulla

Reputation: 328566

There are several general approaches to solve this kind of problem:

  1. Load the sub pages in iframes. Each iframe gets it's own ID space. Scripts in all frames can talk to each other via the parent variable as long as all documents were loaded from the same domain.

  2. Don't use any ids. Instead, give each "window" an ID and then locate elements in the window via classes and parent-child relations. Note that an element can have more than one class.

    You can then use $(selector, win) to look for elements on a certain window win. The window becomes the "Selector Context" which means jQuery will search only children of the window and nothing else.

  3. At the start of your script, locate all important elements by ID and save them in a JavaScript object. That way, you can access them without using a jQuery selector.

    For example, you could select anything with an ID and save it with .data() in the window element. After this setup, all elements would be accessible via $(win).data('id')

Upvotes: 1

johnny-john
johnny-john

Reputation: 854

You can generate quite good unique ids by concatenating a date and a random number:

new Date().getTime() + Math.random()

While this is by no means perfect, I think in your use case it will suffice.

As Jack mentioned in his comment, you can pass this id to your new window as a get parameter. I once did a whole OS-like interface with this method, and it worked flawlessly.

Upvotes: 0

Related Questions