Tutorial :jQuery Autocomplete result keeps spitting out error



Question:

I've been struggling w/ this problem since yesterday, but I can't figure out why i keep getting error messages "... is not a function". Here's the HTML code

<td>  <input class="itemAC" name="Item[0][name]" id="Item_0_name" type="text" value="" />  <input class="itemId" name="TransactionDetail[0][itemId]" id="TransactionDetail_0_itemId" type="hidden" value="" />  </td>  

JS Code:

$(".itemAC").autocomplete("/inventory2/index.php?r=item/AjaxLookup",{  'minChars':2,'delay':500,'matchCase':false,'max':10}  ).result(function(event,item){alert(this.next().id)}  );  

and I got "this.next is not a function" error, I tried $(this).next, $("#"+this.id).next and I got the same error message, what am I doing wrong?

Edit: Ok, so I tried to remove almost all of the HTML and JS codes so that the HTML body contains:


Solution:1

It should be $(this) instead of this

When using this it refers to the DOM object, whilst using $(this) refers to the jQuery object which has the next() method. Since you were trying to use the DOM object it doesn't know what the method is.


Solution:2

I don't think it's a scope issue, more of a JQuery usage issue. this does refer to the Dom object, and doesn't allow you to use next(), however when using $(this).next() properly, to access the id attribute of the target object you need to use the proper jquery syntax for that: $(this).next().attr("id"));.

This should work for you:

$(".itemAC").autocomplete("/inventory2/index.php?r=item/AjaxLookup",{  'minChars':2,'delay':500,'matchCase':false,'max':10}  ).result(function(event,item){alert($(this).next().attr("id"))}  );  

If you're looking to set the value for that second input, use the .val() method to accomplish that.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »