2

Why am I getting:

Uncaught TypeError: Object # has no method 'find' (anonymous function):8080/twolittlesheep/js/sizeColorDependancy.js:16 c.event.handleajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:63 c.event.add.h.handle.oajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:56

when I try to run a simple jQuery script? The script falls at the line where I use the find method in the next jquery code snippet:

$(document).ready(function(){
  $("select#p_sizesId").change(function(){
   var $colorsSelect = $("select#p_colorsId")[0];
   $("select#p_colorsId")[0].find('option').remove().end().append('<option selected="selected" value="whatever">text</option>');
  });
});

In my head tag in the html I have:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> --%>
<script type="text/javascript" src="js/sizeColorDependancy.js"></script>

I am using Google Chrome (together with Developer Tools).

All that I found as an explanation in another thread was that when using Chrome's developer tools, the problem arises. But I was running the code without using the Developer Tools and the same happened (the script didn't do anything => the error occurred).

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
despot
  • 7,167
  • 9
  • 44
  • 63
  • why are you using [0]? as this element has an id there will not be a collection to iterate through... – Ian Wood Dec 07 '10 at 13:10
  • @ToonMariner - when I was debugging I saw that the DOM select object is inside an array so I wrongfully presumed that I need to get first object from the array... – despot Dec 07 '10 at 17:13

2 Answers2

6

When you do [0] you're getting the first element from the selector matches as a DOM element, not a jQuery object which has .find(), just remove [0], like this:

$(document).ready(function(){
  $("#p_sizesId").change(function(){
   $("#p_colorsId").find('option').remove().end().append('<option selected="selected" value="whatever">text</option>');
  });
});

A few other notes, when using a #id selector, don't prefix it unless absolutely needed, it slows things down. Also since ID's should be unique, there should be no need for getting the first element. The selector should only match 1 or 0 elements. If they're not unique, don't use ID's instead use classes.

Jordan Lipana
  • 437
  • 2
  • 4
  • 18
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • This solved the problem! But consider the case where you have more than one select elements with the same id. What than? And I thought that JQuery object and a javascript object would be the same. How would I convert the javascript variable: var x = $("select#p_colorsId")[0]; to a jQuery object? – despot Dec 07 '10 at 13:16
  • @user521754 - that was the second half to the answer - you should **never** have 2 elements with the same ID in a page, you need to use classes at that point...many things depend on IDs being unique. – Nick Craver Dec 07 '10 at 13:21
  • the question about the same id was hypothetical (I never use element's ids like that). For the other subquestion that I asked you, can you provide a link where I can read more about jQuery objects and perhaps something about conversion from js object to jQuery object? – despot Dec 07 '10 at 13:28
  • 2
    @user521754 - I think what you're after is the first of a selector in general, you can use `.first()` or `.eq(0)` to get the first element still as a jQuery object...is that what you're asking? – Nick Craver Dec 07 '10 at 13:30
1

Just make it into a jQuery object like this:

$($("select#p_colorsId")[0]).find('option')
bensiu
  • 24,660
  • 56
  • 77
  • 117
Mad
  • 41
  • 1