Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

AJAX and id conflict

 
Venkat Sadasivam
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, I would like to know how to handle the AJAX id conflict. I am developing application similar to Yahoo Mail (Beta) where user can open multiple tab to do functions. When I open the same page in two of the tabs I get id conflict. That when calling document.getElementById("id") it gives wrong one. What is the best practice to handle this case?

Thanks,
Venkat
 
Duc Vo
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What server technology are you using? And what AJAX framework as well?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It is invalid to have the same id on more than one element in the DOM. Don't do that.
 
Venkat Sadasivam
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using J2EE server side and YUI for ajax framework.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What you are using on the server side is moot -- just make sure not to create duplicate ids.
 
Venkat Sadasivam
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
On the jsp I generating static html and javascript. If I generate id dynamically, my javascript and css needs to be changed accordingly. What is the best practices to resolve my issue?
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Venkat Sadasivam:
On the jsp I generating static html and javascript. If I generate id dynamically, my javascript and css needs to be changed accordingly. What is the best practices to resolve my issue?


I've grown to despise DOM ids and rely more on element types (input, div, span, a, etc) and class names (class="user_block") while utilizing parent and child relationships. Of course, doing this with JQuery is easy. I don't know how easy it might be in YUI.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Venkat Sadasivam:
On the jsp I generating static html and javascript. If I generate id dynamically, my javascript and css needs to be changed accordingly. What is the best practices to resolve my issue?


You should be relying on class names in your css and not ids in this situation.

Eric
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Eric Pascarello:


You should be relying on class names in your css and not ids in this situation.

Eric



Um, didn't I just say that?
 
Duc Vo
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I don't know much about YUI. But it seems that you have to write javascript yourself, that's not very convenient. The main problem is exactly what you are having now.

One solution for your problem is to dynamically generate your component id then pass the id to javascript via some variables. i.e.

var tabId1 = '${tab1.clientId}';
var tabId2 = '${tab2.clientId}';

When you need to refer to the component use:

var tab1 = document.getElementById(tabId1);

Or on the event of the component pass it in as a variable. i.e.

on[Click]="tabClicked(this);"

your function should look like
function tabClicked(tab) {
//do something with the tab here
}

Hope it help.

Note: I've added the square brackets around onClick since the forum function restrict me from using onClick.
[ December 18, 2008: Message edited by: Duc Vo ]
 
Venkat Sadasivam
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for all your replies. Now I feel iframe is better solution to solve these types of issues.
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Venkat Sadasivam:
Thanks for all your replies. Now I feel iframe is better solution to solve these types of issues.


Are you kidding?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Gregg Bolinger:



Um, didn't I just say that?


I have an ignore Gregg filter firefox extension that removes all of your posts since you never have right answers! lol.

I actually read your answer and totally missed the class part of it. I blame it on being in a meeting for an 1.5 hours before I answered this afternoon.

Eric
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic