CODEWITHSUNDEEP
jqueryinternet-explorercss-selectors
user284503
user284503

Reputation: 378

Jquery Selector not working on Internet Explorer

Internet Explorer does not like my Jquery selector. Not sure if it's my weak Jquery skills or general Explorer strangeness.

Here is the Code:

$("#field_"+index+" #field_Label").val();

[div field_1]

<input id="field_Label" //... you get the picture.

to explain this.. I have a DIV labeled field_1, field_2.. etc.. Internet explorer appears to find the first iteration, but cannot find the second.

Thank you all, and thanks to you stackoverflow.

Is there a better way I should be doing this ?..

Here is a more complete snippet:

<li id="blank">
<div  id="field_1" style="background: #BDCFFF; color: #1028BD;margin: 10px; border: 1px solid black;width: 400px; height: 100px;">
<table>
<tr><td>Label:</td><td><input class="field_Label" id="field_Label" type="text"/></td></tr>
<tr><td>Type:</td><td><input id="field_Type" type="text" value="2"/></td></tr>
<tr><td>Id:</td><td><input id="idField" type="text" value="0"/></td></tr>
</table>

</div>

Upvotes: 2

Views: 16299

Answers (8)

Sebien
Sebien

Reputation: 881

Well, beside the fact that field_Label should be a class and not an id in what I see of your sample; if you really need to have two descendent id selectors, you can use a find().

So, instead of:

$("#field_" + index + " #field_Label")

You can use this:

$("#field_" + index).find("#field_Label")

This works fine in IE.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382666

Separate each selector with a comma:

$("#field_" + index + ", #field_Label")...........

Upvotes: 2

Mattygabe
Mattygabe

Reputation: 1790

Thanks everyone for the help.. I did finally resolve this.. it was just

strange since it only seemed to cause a problem with Internet Explorer.. but this is what I did to get it working.

$("#field_"+index).find("#field_Label").val();

/* Long live StackOverflow !! */

As others have stated, the innermost .find() is not necessary and overly redundant.

Essentially, IDs are the fasted method of selection with jQuery's Sizzle selector engine. Using a unique ID, selection is the fastest method. Descending an ID from another ID only adds unnecessary additional computation. You most likely won't experience any performance slow-downs, but it's not a good habit to get into.

This is what you should be doing to access that element:

$("#field_label").val();

Source: http://www.artzstudio.com/2009/04/jquery-performance-rules/

Upvotes: 0

user420095
user420095

Reputation:

Thanks everyone for the help.. I did finally resolve this.. it was just strange since it only seemed to cause a problem with Internet Explorer.. but this is what I did to get it working.

$("#field_"+index).find("#field_Label").val();

/* Long live StackOverflow !! */

You saved me HOURS of time. Thank you!!! IE is the devil

Upvotes: 0

user284503
user284503

Reputation: 378

Thanks everyone for the help.. I did finally resolve this.. it was just strange since it only seemed to cause a problem with Internet Explorer.. but this is what I did to get it working.

$("#field_"+index).find("#field_Label").val();

/* Long live StackOverflow !! */

Upvotes: 2

Martin Larsson
Martin Larsson

Reputation: 424

Try using a class on the input instead of id. Only one input should have id field_Label. 

<input class="field_Label" />
selector: $("#field_"+index+" .field_Label").val();

This is an update considering the code snippet you added. I rewrote it changing id to class.

<div  id="field_1">
<table>
<tr><td>Label:</td><td><input class="field_Label" type="text"/></td></tr>
<tr><td>Type:</td><td><input class="field_Type" type="text" value="2"/></td></tr>
<tr><td>Id:</td><td><input class="idField" type="text" value="0"/></td></tr>
</table>
</div>

Selectors:
var label = $("#field_1 .field_Label").val();
var type = $("#field_1 .field_Type").val();
var id = $("#field_1 .idField").val();

Class instead of id if you are going to have many tables with same kind of input. Otherwise if the inputs are unique just use id, example: selector: $("#idField").val()

Upvotes: 3

jamie-wilson
jamie-wilson

Reputation: 1925

Change #field_Label to .field_Label and then access 

$("#field_"+index+".field_Label").val();

Without a space beween the values, so the output would be #field_1.field_Label - (Ie likes specifics)

Upvotes: 1

mcgrailm
mcgrailm

Reputation: 17640

you should give your div's a class and do 

 var inputvals = $('.class_name').val();

then you can do what you want with them as a whole and you don't have to comma seperate a bunch of ids

Upvotes: 0

Related Questions