problem with jquery ui`s autocomplete select callback (1.8)

Question

With this code:

function setupRow(event, ui) {
        var textbox, // how do i get to the textbox that triggered this? from there
        // on i can find these neighbours:
        hiddenField = textbox.next(), 
        select = textbox.parents('tr').find('select');

        textbox.val(ui.item.Name);
        hiddenField.val(ui.item.Id);
        $.each(ui.item.Uoms, function(i, item){
            select.append($('<option>' + item + '</option>'));
        });             
        return false;
    }
    function setupAutoComplete(){
        var serviceUrl = "/inventory/items/suggest";
        $("input.inputInvItemName").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: serviceUrl,
                    data: request,
                    dataType: "json",
                    success: function(data) {
                        response($.map(data.InventoryItems, function(item) {
                            return {
                                value: item.Name
                            };
                        }));
                    },
                    select: function(event, ui) {
                        setupRow(event, ui);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 3,
            delay: 500
        });
    }

everything seems ok. Problem is the select handler never fires, not even the anonymous function that wraps my original delegate setupRow for debugging purposes is ever called.

anyone can see my error?

I also left a question in the comment: how do I get to the textbox that had the autosuggestion. Cannot use id here, because these text boxes are multiples and generated on the fly, interactively. Or is there another way to do the same thing?

Thanks for any help!

sry..I mean..at the end of the statement of the success handler.. — Kai
– Kai, Commented Jul 1, 2010 at 4:28
ok, thas right, but did not fix the problem, unfortunately. Thanks! — Jan
– Jan, Commented Jul 1, 2010 at 4:34

Reigel Gallarde · Accepted Answer · 2010-07-01 04:36:46Z

1

OP point of view

var textbox, // how do i get to the textbox that triggered this? from there
        // on i can find these neighbours:

My Point of view

have you tried,

var textbox = $(event.target);

or you can do this,

OP point of view

select: function(event, ui) {
       setupRow(event, ui);
},

My point of view

select: setupRow;

then

var textbox = this; // just a guess... wait..

answered Jul 1, 2010 at 4:36

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jan Over a year ago

not yet, because I never reached that piece of code. But sounds reasonable enough!

Jan Over a year ago

yes, I use setupRows that way, but just to make super sure everything was right i wrapped it in this dummy function... this could work, too, you are right...

Kai · Accepted Answer · 2010-07-01 04:23:43Z

0

anyone can see my error?

I think you forgot to put ';' .

$.ajax({
                    url: serviceUrl,
                    data: request,
                    dataType: "json",
                    success: function(data) {
                        response($.map(data.InventoryItems, function(item) {
                            return {
                                value: item.Name
                            }
                        }));

Or is there another way to do the same thing?

I think u are using the jquery ui autocomplete plugin.If yes, you can retreive like this.

$('.ui-autocomplete-input')

Otherwise, you can set a specific class to those textboxes and access those textbox through that class.

answered Jul 1, 2010 at 4:23

Kai

3,0171 gold badge24 silver badges30 bronze badges

1 Comment

Jan Over a year ago

Sorry, I think you did not see the whole code, it is a scrollable div and might have cut away essential parts. $('.ui-autocomplete-input') would give me all of them, but I just need the active one.

Jan · Accepted Answer · 2010-07-01 12:35:21Z

0

ok, got a step closer by using

inputs.bind("autocompleteselect", setupRow);

now setupRow fires.

Now it seems, that the success callback transforms the data, I get returned.I need to find a way, to both display the right value in the dropdown, without destroying the requests response...

Any ideas?

answered Jul 1, 2010 at 12:35

Jan

6,87010 gold badges39 silver badges52 bronze badges

1 Comment

Mark Schultheiss Over a year ago

You should append the original question with an "EDIT:" and this rather than posting as an answer to keep the relevent info together and not have this obscured by possible answers that are upvoted.

Collectives™ on Stack Overflow

problem with jquery ui`s autocomplete select callback (1.8)

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related