• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

AJAX and id conflict

 
Ranch Hand
Posts: 139
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What server technology are you using? And what AJAX framework as well?
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am using J2EE server side and YUI for ajax framework.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
reply
    Bookmark Topic Watch Topic
  • New Topic