JQuery - Get calling element id

Question

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);
            }
        }
    );
}

you need to use delegation. find the container it was loaded into, then use `.find()` to get to the item. or, if there is some `click` action involved, you could use `e.target.id`. — PlantTheIdea, Dec 16 '14 at 15:21
So you need to know the `id` in the `autoCompletePost` function, right? — DanielST, Dec 16 '14 at 15:25
@slicedtoad yes, so in the code I posted I'm looking for this `'inPdVehMk'`, but in the `AutoCompletePost()` function. So I can pass the data field: `'inPdVehMk'` for the `$.post()`. I don't want to statically type the field name for each autocomplete I'm going to setup so I want to make it get the calling selector. — Tim Sanders, Dec 16 '14 at 15:28
@PlantTheIdea I think this will work... I've never used it before, so I'm playing around with this now. I'm glad you showed this to me because I could have used this like 4 months ago. I just want you to know that in some far off office in a tiny cubicle, there is a grown man crying, wishing he had known this 4 months ago. — Tim Sanders, Dec 16 '14 at 15:30
@PlantTheIdea The source option is a callback, not an event. I'm not sure how you can delegate that... — DanielST, Dec 16 '14 at 16:04

DanielST · Accepted Answer · 2014-12-16T16:02:07.527

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.

score 0 · Answer 2 · answered Dec 16 '14 at 15:29

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.

You are calling the function in the second line, it will execute the function instead of setting the function as a source. — Ragnar, Dec 16 '14 at 15:34
Getting this error `Uncaught TypeError: Cannot read property 'term' of undefined` at this line: `$.post(AjaxPageAutoComplete, { searchTerm: request.term, field: id},` — Tim Sanders, Dec 16 '14 at 15:39

JQuery - Get calling element id

2 Answers2

Linked