jQuery attr('id') returns undefined

Question

I have a list of items and when a user clicks on one of them, it gets assigned a class called 'active-child'. Just one item could be selected at the moment, and when the user clicks on another item, this item is cleaned of 'active-child' class and then this class gets assigned to the newly selected item. Just like any other non-multiple list.

Here is the selected element's HTML:

<div id="5" class="new-child-item new-child-item-active active-child"> Software </div>

When I want to submit the selected item's "id" to a php script to process it further, the jquery does not retrieve the id value of the element and says it is undefined. My approach to getting the selected item's id attribute is as follows:

$('.active-child').attr('id');

I also have tested this, but still returns undefined:

$('.active-child:first-child').attr('id');

The strange thing is that I first check to see if the user has selected anything at all, and if yes, then do the ajax, at this moment, the jquery returns 1, means the user has selected one item. Here is the code block which checks to see the selection and then send it through ajax:

 if($('.active-child').length > 0)
                  {
                      $('.new-item-cats-list-holder').empty();
                       $('.new-item-cats-list-holder').hide()
                  $('.big-loader').show();
                      console.log("This is the id: " + $('.new-child-item-active:first-child').attr('id'));
                      $.ajax({
                      url : base_path('ajax/set_credentials/step_2'),
                      type: "POST",
                      data : ({'set_sess':true, 'category' : $('.active-child').attr('id')}),
                      success : function(msg){                                                                  
                        if(msg!=0)
                        {                                                       
                            //window.location.href = base_path('panel/add/step/ads/3');                     

                        }
                      },
                  });
                  }// end of length if

Well does the element have an "id" attribute? What does the HTML look like? — Pointy, Jan 01 '14 at 15:28
If there's no `ID` attribute, jQuery will still return a `string` because of the default `ID` property. Only time it should return `undefined` is if there was no element found. — cookie monster, Jan 01 '14 at 15:30
check the post again...i have added the markup...there is id attr — , Jan 01 '14 at 15:32
Your sure the `.empty()` call isn't destroying the elements? — cookie monster, Jan 01 '14 at 15:32
@cookiemonster ?? "default ID property"? uhh ... are you sure about that? — Pointy, Jan 01 '14 at 15:32
Is this in HTML5? Bear in mind that previous HTML specification didn't allow id attributes to begin with a number, though I think that's unlikely to be related to your problem... — Matt Gibson, Jan 01 '14 at 15:32
you are right. I wasn't aware of that....it gets destroyed prior to its `ID` retrieval — , Jan 01 '14 at 15:32
@cookiemonster you can answer it for me to select it as an answer — , Jan 01 '14 at 15:33
@cookiemonster Try that for yourself in your developer console right on this site. jQuery does no such thing. — Pointy, Jan 01 '14 at 15:34
@Pointy: Sorry, you're right. I was thinking of the DOM and was referring to the `id` property, not attribute. jQuery used to conflate the two. http://jsfiddle.net/x59XR/ — cookie monster, Jan 01 '14 at 15:35
@cookiemonster well to be fair the library *does* invent "id" values when you do some things, like use `.data()` to store something on a DOM node. — Pointy, Jan 01 '14 at 15:36
This basic test seems to work for me: http://jsfiddle.net/cLvwj/1/ — Matt Gibson, Jan 01 '14 at 15:36
you are using number as id, it is not allowed in html 4 http://www.electrictoolbox.com/valid-characters-html-id-attribute/ http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number — Pranav C Balan, Jan 01 '14 at 15:40

score 1 · Answer 1 · answered Jan 01 '14 at 15:39

1

The empty() and hide() functions before the ID retrieval destroys and DOM and does not allow it to exist and then to be fetched of its id value.

answered Jan 01 '14 at 15:39

2

Not the `.hide()`. Just the `.empty()`. – cookie monster Jan 01 '14 at 15:40

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

I have an inkling that you are using numerical values as IDs, or at least have ID that starts with a number. My suspicion comes from the fact that your console log returns 1, and you have specified in your question that you are logging the active child's ID.

This is invalid — classes and IDs have to start with an alphabet or an underscore or a dash, and then followed by any alphanumeric, underscore or dash characters and a combination thereof.

See here: Which characters are valid in CSS class names/selectors? and http://www.w3.org/TR/CSS21/syndata.html#characters

This is unless you are using HTML5, but you need to declare the doctype correctly: <!DOCTYPE html>

Also, have you checked that your IDs are unique?

edited May 23 '17 at 12:28

Community

1
1

answered Jan 01 '14 at 15:34

Terry

63,248
15
96
118

This is not really true; that's an old question. – Pointy Jan 01 '14 at 15:35
No it is not. I use numbers for ID in many of my project and it works in an excellence.... – Jan 01 '14 at 15:38
As you can see [here](http://dev.w3.org/html5/markup/datatypes.html#common.data.id), ids can start with a number in HTML5, so I think we'd at least need to see the DOCTYPE to know whether this was related to the problem (and I'd probably expect jQuery to work okay with numeric ids anyway, frankly...) – Matt Gibson Jan 01 '14 at 15:39
CSS isn't really relevant to the question anyway. Just because it's wasn't valid to use numeric IDs, doesn't mean it wouldn't work. The `.attr()` method would still provide the value. – cookie monster Jan 01 '14 at 15:45

jQuery attr('id') returns undefined

2 Answers2