aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes AJAX and id conflict Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "AJAX and id conflict" Watch "AJAX and id conflict" New topic
Author

AJAX and id conflict

Venkat Sadasivam
Ranch Hand

Joined: May 10, 2008
Posts: 139
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


“Any fool can write code that a computer can understand. Good programmers write code that humans can understand. ”<br>
-Martin Fowler
Duc Vo
Ranch Hand

Joined: Nov 20, 2008
Posts: 254
What server technology are you using? And what AJAX framework as well?


“Everything should be as simple as it is, but not simpler.” Albert Einstein
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

It is invalid to have the same id on more than one element in the DOM. Don't do that.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Venkat Sadasivam
Ranch Hand

Joined: May 10, 2008
Posts: 139
I am using J2EE server side and YUI for ajax framework.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

What you are using on the server side is moot -- just make sure not to create duplicate ids.
Venkat Sadasivam
Ranch Hand

Joined: May 10, 2008
Posts: 139
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

Joined: Jul 11, 2001
Posts: 15300
    
    6

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.


GenRocket - Experts at Building Test Data
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jul 11, 2001
Posts: 15300
    
    6

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

Joined: Nov 20, 2008
Posts: 254
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

Joined: May 10, 2008
Posts: 139
Thanks for all your replies. Now I feel iframe is better solution to solve these types of issues.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: AJAX and id conflict