Jquery: Use of attributes' specified attribute is deprecated. It always returns true

Question

I have collection of select elements, when I change value of one select elements for first time this function dont work it works the second time I change value and in console I have this

jQuery code:

$(document).ready(function () {
    var collection = $('select.ddlJ');
    console.log(collection);
    for (var element in collection) {
        $(element).change(function () {

            $('select.ddlJ').change(function (e) {
                $(this).parent().parent().find('td:last').prev().find('span').html(
                    $(this).parent().parent().find('select.ddlJ').filter(function () {
                        return $.trim($(this).val()) == 'm';
                    }).length);

                $(this).parent().parent().find('td:last span').html(
                $(this).parent().parent().find('select.ddlJ').filter(function () {
                    return $.trim($(this).val()) == 'n'; }).length);
            });
        });
    }
});

HTML code:

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="grid1"
   rules="all">
        <tbody><tr>
 <th scope="col">Nr de ord</th>
 <th scope="col">StudentId</th>
 <th scope="col">Name LName</th>

 <th scope="col">
      <span id="mondayText">monday<br></span>
      <span id="monday">14.05.2012</span>
  </th>
<th scope="col">
     <span id="thuesdayText">thuesday<br></span>
     <span id="thuesday">15.05.2012</span>
</th>
<th scope="col">
     <span id="wednesdayText">wednesday<br></span>
     <span id="wednesday">16.05.2012</span>
</th>
<th scope="col">
     <span id="thursdayText">thursday<br></span>
     <span id="thursday">17.05.2012</span>
</th>
<th scope="col">
     <span id="fridayText">friday<br></span>
     <span id="friday">18.05.2012</span>
</th>
<th scope="col">
     <span id="saturdayText">saturday<br></span>
     <span id="saturday">19.05.2012</span>
  </th>
   <th scope="col">
   <span id="M">Total1</span>
   </th>
  <th scope="col">
   <span id="N">Total2</span>
   </th>
               </tr><tr>
                <td>  1  </td>
                <td>110001</td>
                <td>Test1 Test1</td><td>
                </td><td>
                </td><td>
                </td><td>
 <select class="ddlJ" id="a1111_0" name="ctl00$contentbody$grid1$ctl02$a1111">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>
 <select class="ddlJ" id="a2222_0" name="ctl00$contentbody$grid1$ctl02$a2222">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>

                          </td><td>
                          </td><td>
                          </td><td>
                          <span class="label" id="totalM"></span>
                          </td><td>
                           <span id="totalN"></span>
                          </td>
        </tr><tr>
        <td> 2   </td>
                <td>110002</td>
                <td>Test2 Test2</td>
                <td></td>
               <td></td>
               <td></td><td>
 <select class="ddlJ" id="a1111_1" name="ctl00$contentbody$grid1$ctl03$a1111">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>

                </td><td>
                </td><td>
                </td><td>
                <span class="label" id="totalM"></span>
                 </td><td>
                 <span id="totalN"></span>
                  </td>
        </tr><tr>
            <td>
                         3                  
                </td><td>110008</td><td>Test3 Test3</td><td>
                </td><td>
                </td><td>
                </td><td>
<select class="ddlJ" id="a1111_2" name="ctl00$contentbody$grid1$ctl04$a1111">
                <option value="a" selected="selected">a</option>
                <option value="m">m</option>
                <option value="n">n</option>
            </select>
                         </td><td>
                </td><td>
                </td><td>
                 <span class="label" id="totalM"></span>
                </td><td>
                  <span id="totalN"></span>
                          </td>
        </tr>
    </tbody>
</table>

Please post the relevant part of your code. And are you sure this notice is caused by changing the value of these elements (or could it be something else)? — Felix Kling, Sep 10 '12 at 12:55
BTW, rather than using .parent().parent(), you might want to use .end() instead to "undo" previous "destructive" chain operations. I believe you will get better performance that way, though I did not actually measure this. http://api.jquery.com/end/ — jacobq, Sep 10 '12 at 13:01
Please include the relevant HTML as well as JavaScript/jQuery. To get a better answer more quickly, I highly recommend posting an example demonstrating the problem to an online tool like JS Fiddle: http://jsfiddle.net/ — jacobq, Sep 10 '12 at 13:18

score 13 · Accepted Answer · edited May 23 '17 at 11:45

13

It is a bug in jQuery: http://bugs.jquery.com/ticket/11397

(see: https://stackoverflow.com/a/9460682/1178235)

edited May 23 '17 at 11:45

Community

1
1

answered Mar 07 '13 at 10:59

Alessio Gaeta

5,670
1
16
26

3

Please mark questions as duplicates instead of answering with a link to another answer. – givanse Apr 21 '14 at 18:04

jacobq · Answer 2 · 2012-09-10T13:25:56.143

1

Try changing

var collection = $('select.ddlJ')

to use jQuery.get()

var collection = $('select.ddlJ').get();    
// BTW, this is similar to $('select.ddlJ')[0]

That gives you the actual DOM elements rather than a jQuery object matching them. Alternatively (and the way I would probably do it), would be to instead change

for (var element in collection)

to use jQuery.each()

$('select.ddlJ').each(function(i, element) { ... });

edited Sep 10 '12 at 13:25

answered Sep 10 '12 at 13:20

jacobq

11,209
4
40
71

I changed as you said and it's still the same Use of attributes' specified attribute is deprecated. It always returns true. [Break On This Error] ...],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](... jquery....min.js (line 2) – Alex Sep 10 '12 at 13:31
OK, then there is probably something else too, but that part jumped out to me as being a mistake. I don't see anything immediately obvious in your code where you are accessing any attributes. Do you encounter this error in all browsers? Which one/version are you using? I will look further if you can provide a live example (e.g. jsFiddle -- I'm happy to help solve the problem, but it doesn't make sense for me to try to reproduce your problem -- I just want to do the fun part :D) – jacobq Sep 10 '12 at 13:45
Did this solve your problem? I never saw the actual problem. I'm assuming you got it working, but perhaps you might want to post some more information for other users who may have a similar problem. – jacobq Sep 11 '12 at 14:49
I have the same warning in Firefox with Firebug and FireQuery installed. Using $("selector for select").val() gives me this warning. I am ignoring this warning as it doesn't seem to matter much. – HMR Feb 17 '13 at 03:41

score 1 · Answer 3 · answered Sep 27 '12 at 02:50

1

Try changing the .val() to .attr('value')

answered Sep 27 '12 at 02:50

DRC

61
1
4

1

This stopped the error for me. But I read that .val() is preferred to .attr('value'), partiucularly for select boxes which is my situation... – rigyt Dec 26 '12 at 18:31

Jquery: Use of attributes' specified attribute is deprecated. It always returns true

3 Answers3