How to avoid javascript retrieving values from non-existing elements

Go To StackoverFlow.com

1

Update: clarified question (I hope) Hi.

I'm developing a plugin in Wordpress and I'm outputting elements according to user privileges A and B.

In case of A, I ouput element "Foo".
In case of B, I output element "Bar".

Up till now, I haven't checked if an element exists before I try to retrieve the value. This of course gives me a javascript error in some browsers (like IE7).

I've looked at using the typeof() function:

if(typeof(element) == 'undefined') {
    //do something...
}

I'm also using jQuery. So one solution could be using this:

if ($("#mydiv").length > 0){
    // do something here
}

Using the above methods, makes me having to check each element before trying to retrieve any values.

The "ideal" solution would be to get values based on user privileges. E.g:

if (userPriv == A) {
    //get values from element 'Foo'
}

This way I can check once, and do the data gathering. The only solutions I can think of are setting the value of a hidden input element or use cookies.

<input type="hidden" id="userPriv" value="A" />

The other solution would be adding a value to the cookie.

setcookie("userPriv", "A");

Unfortunately, this last option gives me a warning message saying that cookie must be set in header (before html output). I think it's because I'm doing this in Wordpress.

I'm looking for opinions on which method is "the best way" to accomplis this.

2009-06-16 08:48
by Steven
I don't understand what your problem is. Is it accessing dom elements that may not exist? Is it getting user privileges in Wordpress? Is it testing for the existence of some dom elements as a way to measure user privileges - Alsciende 2009-06-16 09:26
When I've answered you I was thinking about some certain problem, but after I'm looking at comments and on your update I'm not sure I understood your question correctly. Could you please clarify, what are you trying to check? And what exactly you are asking - Artem Barger 2009-06-16 09:50
Sorry about that. I've updated the text now. Hope this is a bit clearer - Steven 2009-06-16 10:25


4

Forgive me if I'm missing something, but checking for a DOM element in javascript is usually pretty easy.

var elementA = document.getElementById('id_of_a');
var elementB = document.getElementById('id_of_b');
if (elementA) {
    //...
} else if (elementB) {
    //...
}

The key is the if statement. getElementById will return nothing null if the element is not found, which will evaluate to false in the if statement.


Alternatively, if you don't really want to check for existence of individual DOM elements, can you send the users priv in a hidden input and act on that? That's a cookie free way of sending values clientside. Something like (edited to have jQuery code instead)

<input type="hidden" id="userPriv" value="A" />
...

var priv = $('#userPriv').val();
if (priv == 'A') {
    //...
}

I'd still recommend checking for individual elements over checking a hidden input. It seems cleaner to me, more along the unobtrusive lines

2009-06-16 09:04
by Dan F
I could. But that would involve a lot of checks. I'm hoping I can check ONCE (against user creds) and then do the reading - Steven 2009-06-16 09:07
getElementById return null, actually - Alsciende 2009-06-16 09:23
@Cédric - nothing, null, nada, I get them mixed up :- - Dan F 2009-06-16 09:27
If there's a way to know the exact value of the server-side "userPriv", I'd recommend using it over using the effect of "userPriv". You may misinterpret the effects, not the value - Alsciende 2009-06-16 09:33
Thanks Dan. I actually tried the solution this morning. I just wanted some feedback from you guys to see what was the best way - Steven 2009-06-16 10:14
No worries. Both ways are valid, cookies are the third, but like you said you can't use cookies. You probably don't want to control security related "stuff" through javascript, as anything coming from the client can't be trusted (firebug and/or greasemonkey let you do amazing things to webpages), so it really comes down to which will make the logic flow better - checking for DOM elements or checking "the flag" in the . Good luck :- - Dan F 2009-06-16 10:27
Looks like I'll be doing the tidious task of checking each element. Thanks for the feedback guys - Steven 2009-06-16 10:30


1

You can use object as associative array:

var map = new Object();
map[A.toString()] = new Foo();
map[B.toString()] = new Bar();

In that case is much simpler to check and you will avoid "spaghetti code".

2009-06-16 08:55
by Artem Barger