Why jQuery function returns null?

Question

I have this form:

<form action="javascript:;" class="iceFrm" enctype="application/x-www-form-urlencoded" id="frmMainMenu" method="post" onsubmit="return false;">
.....
</form>

I do not understand why this script:

<script type="text/javascript">
$(document).ready(function () {
    $("#frmMainMenu").$("#menuPopupAP").$("#menuItem0").$("#out").css('padding','0 0 0 29px');
});
</script>

says:

$("#frmMainMenu") is null

in Firebug.

UPDATE: This is the html element (from the above form) I want to change the padding on:

<span id="frmMainMenu:menuPopupAP:menuItem0:out" class="iceOutTxt iceMnuItmLabel graMenuPopupMenuItemLabel">My Applications</span>

Update 2:

I've forgot to mention that this span is within a menu, so basically it's hidden normally and displayed only when hovering on some div... Does jQuery finds it even if it's not displayed?

Do you know why?

The result of `$(...)` does not have another property `$(...)`. — pimvdb, Mar 23 '11 at 16:40
`$("#frmMainMenu").$("#menuPopupAP").$("#menuItem0").$("#out")` is not correct. What exactly are you trying to do? — gen_Eric, Mar 23 '11 at 16:40
I've updated my post, maybe the way I try to find this elements is wrong... — Cristian Boariu, Mar 23 '11 at 16:41

Alnitak · Answer 1 · 2011-03-23T16:46:28.613

2

I'm not sure exactly why you're getting the null error, but if your intent is to apply that style to those four specific elements the syntax should be:

$("#frmMainMenu, #menuPopupAP, #menuItem0, #out").css('padding','0 0 0 29px');

If (and I can't tell as we've been giving an insufficient markup sample) those four elements are successive nodes in a hierarchy (i.e. #out is a child of #menuItem is a child of #menuPopupAp is a child of #frmMainMnenu) then remove the commas between them.

EDIT colons in an id? That'll cause problems with jQuery selectors. Try using an underscore instead?

edited Mar 23 '11 at 16:46

answered Mar 23 '11 at 16:36

Alnitak

325,660
70
395
481

IDs *can* contain colons, it's valid, but jQuery can't select IDs with colons like that, because the `:` is read as a selector. You need to do `[id="value"]` instead. – gen_Eric Mar 23 '11 at 16:47

score 1 · Answer 2 · edited May 23 '17 at 09:58

1

Update after your question update:

$('#frmMainMenu\3AmenuPopupAP\3AmenuItem0\3Aout').css('padding','0 0 0 29px');

You cant use the : in your selector but you can use the hexadecimal equivalent - \3A

There are few other workarounds on this SO thread.

Are your trying to search the children of frmMainMenu? try this instead:

$(document).ready(function () {
            $("#frmMainMenu").find("#menuPopupAP")
                             .find("#menuItem0")
                             .find("#out")
                             .css('padding','0 0 0 29px');
});

edited May 23 '17 at 09:58

Community

1
1

answered Mar 23 '11 at 16:35

Geoff Appleford

18,170
4
61
85

`$('#frmMainMenu:menuPopupAP:menuItem0:out')` doesn't actually work, because jQuery uses the `:` as a selector. – gen_Eric Mar 23 '11 at 16:46
@Rocket - yes, I realised that. Thanks. Have update my answer. – Geoff Appleford Mar 23 '11 at 16:52

score 0 · Answer 3 · answered Mar 23 '11 at 16:36

It's not that - it's one of the children that is null. You need to change your script to something like this

<script type="text/javascript">
 $(document).ready(function () {
            $("#frmMainMenu #menuPopupAP #menuItem0 #out").css('padding','0 0 0 29px');
        });
        </script>

score 0 · Answer 4 · answered Mar 23 '11 at 16:36

0

Surely you don't mean to use # each time (otherwise you could just use #out, but it sounds like it should be something like

$("#frmMainMenu .menuPopupAP .menuItem0 .out").css(...

answered Mar 23 '11 at 16:36

silkcom

472
1
5
14

score 0 · Answer 5 · answered Mar 23 '11 at 16:38

0

Can you post what do you need to accomplish? from your selector, I think you are taking a hard selector approach to interact with your DOM.

answered Mar 23 '11 at 16:38

Mohammed Swillam

8,822
3
34
45

score 0 · Accepted Answer · answered Mar 23 '11 at 16:41

0

$('#frmMainMenu:menuPopupAP:menuItem0:out').css('padding','0 0 0 29px');

$('span[id="frmMainMenu:menuPopupAP:menuItem0:out"]').css('padding','0 0 0 29px');

You need to use the [id="value"] syntax, because in a jQuery selector the : can be used as a selector, so it doesn't realize that the IDs can contain them.

answered Mar 23 '11 at 16:41

gen_Eric

214,658
40
293
332

Well, very strange it still gives me null...please note that the above id is taken from Firebogu so basically it's the composed id of all parent components... – Cristian Boariu Mar 23 '11 at 17:00
@Cristian: What do you mean by "composed id"? – gen_Eric Mar 23 '11 at 17:48
I mean that it takes the ids of all parents and shown the results with : between ids... – Cristian Boariu Mar 23 '11 at 17:55
@Cristian: I didn't know Firebug did that. – gen_Eric Mar 23 '11 at 18:11
Thanks! Your solution worked and I also needed to replace $ with jQuery. – Cristian Boariu Mar 23 '11 at 18:37

Why jQuery function returns null?

6 Answers6