CODEWITHSUNDEEP
jqueryautocomplete
Tim Sanders
Tim Sanders

Reputation: 851

JQuery - Get calling element id

Problem

In the source function of the autocomplete I want to get the selector's ID. Is there a way I can travese through the call stack and get this? Does JQuery have this level of abstraction?

Why?

I will have multiple autocompletes on the page and each one will be handled differently on the server side. I have to use another function for the source. Otherwise I would have used a URL + data: a long time ago =p

JQuery Version

jquery-1.9.1

Research

Of course I've been all over this: JQuery API

How to get element Id from dynamically generated form elements with jquery?

A lot of these attempts I didn't think would work, but right now I'm at the point of trial and error.

$(this).attr('id'); - undefined

Caller function name

I though I'd try to get the caller functions name, and do something with it...doesn't seem to output anything.

Appending to the source function (this is absurd!!! Appending text to a function?! Really I'm desperate...)

 $("#inPdVehMk").autocomplete({
            source: autoCompletePost + "field="+$(this).attr('id'),
            minLength: 2,
            select: function(event, ui){
                alert(ui.label1);
                alert("value= " + ui.item.value + " id= "+ ui.item.id);
            }
        });

Auto Complete Setup

    $("#inPdVehMk").autocomplete({
        source: autoCompletePost,
        minLength: 2,
        select: function(event, ui){
            alert(ui.label1);
            alert("value= " + ui.item.value + " id= "+ ui.item.id);
        }
    });

Source function

function autoCompletePost(request, response){
    //alert($(this).attr('id')); //this is where I'm testing to see the ids.
    $.post(AjaxPageAutoComplete, { searchTerm: request.term, field: 'inPdVehMk'}, //I want field to be dynamic depending on the calling selector.
        function(data) {
            var splitData = data.split("%");
            var json = jQuery.parseJSON(splitData[1].toString());

            if(data.search('autoCompleteError') !== -1 || data.length < 1){
                DialogBox('Div_ErrorMessage^Open^autoCompleteError');
            }else{
                response(json);
            }
        }
    );
}

Upvotes: 3

Views: 1990

Answers (2)

DanielST
DanielST

Reputation: 14133

I'm fairly embarrassed how long it took me to figure this out.

Use this line in your source function to get the id of the autocomplete.

$(this.element).prop("id")

Since autocomplete is a jquery widget, the this object refers to the widget instance. To get to the element, you need to go through it's element property.

JSFiddle

To be fair, this isn't very well documented unless you are creating widgets using the Widget Factory.

Upvotes: 5

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

First of all, if you have multiple autocomplete, your selector is an ID so you have multiple control with the same ID, which is bad. You have make sure that every autocomplete have an unique id and select them by something else, let's say a class. I would try something like this : 

$(".inPdVehMk").autocomplete({
        source: autoCompletePost($(this).attr('id')),
        minLength: 2,
        select: function(event, ui){
            alert(ui.label1);
            alert("value= " + ui.item.value + " id= "+ ui.item.id);
        }
    });

function autoCompletePost(id, request, response){
    //alert($(this).attr('id')); //your in a function so this is not pointing to a control
    $.post(AjaxPageAutoComplete, { searchTerm: request.term, field: id},
        function(data) {
            var splitData = data.split("%");
            var json = jQuery.parseJSON(splitData[1].toString());

            if(data.search('autoCompleteError') !== -1 || data.length < 1){
                DialogBox('Div_ErrorMessage^Open^autoCompleteError');
            }else{
                response(json);
            }
        }
    );
}

I hope this help.

Upvotes: 0

Related Questions