jQuery not appending title

Question

On my page I want the user to be able to mouseover a td element, have the page make an Ajax call to the server, and then append a title attribute to the td to serve as a tooltip for the remainder of the time the user is on the page.

The information the page needs to retrieve is very basic so there's nothing too complicated about this... however I cannot get the code to append the data I receive from the Ajax call onto the td element.

Jquery/Ajax

$('.ChannelCodeDesc').mouseover(function () {

    //Only append if we don't have a title
    if (!$(this).attr('title')) {

        //Let me know when we're about to make Ajax call
        console.log('ajax');
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetDesc", "ZipCodeTerritory")',
            data: { channel: $.trim($(this).text()) },
            success: function (data) {

                //Append to td
                $(this).attr('title', data);

                //Display what we got back
                console.log(data);
            }
        });                
    }

    //What does the title look like when we're done?
    console.log($(this).attr('title'));
});

Unfortunately I can see, in the console, the 'ajax' entry, followed by the exact value I'm expecting for the data object, but undefined appears as the value for the td title attribute from the final console.log statement (end of the mouseover).

HTML/Razor

<td class="ChannelCodeDesc">
    @Html.DisplayFor(model => model.displayForPaging[i].ChannelCode)
    @Html.HiddenFor(model => model.displayForPaging[i].ChannelCode)
</td>

Ajax Controller Method

    public JsonResult GetDesc(string channel)
    {
        var description = (from c in db.Channel
                           where c.ChannelCode.Equals(channel)
                           select c.ChannelLongDescription).FirstOrDefault();

        return Json(description, JsonRequestBehavior.AllowGet);
    }

what does the console show if you use `console.log($(this).attr('title'))` inside the `success` cb? are you sure the reference `$(this)` is working as expected? — BeNdErR, May 13 '14 at 22:36

score 1 · Answer 1 · edited May 23 '17 at 12:27

1

The final console.log statement shows undefined because it occurs before the AJAX request is complete (because AJAX requests are Asynchronous).

Also, a td can't have a title attribute, might need to look at a different option: how to apply style to 'title' attribute of 'td' tag

And others have stated, can't use $this inside the ajax success function like that.

edited May 23 '17 at 12:27

Community

1
1

answered May 13 '14 at 22:33

Andrew

18,680
13
103
118

This isn't an answer why his code doesn't work. It just answer why the last line is `undefined`. – Orel Eraki May 13 '14 at 22:35
He doesnt say the code doesnt work, just that the value in the log is undefined. – Andrew May 13 '14 at 22:36
The title say it all `jQuery not appending title` – Orel Eraki May 13 '14 at 22:36

score 1 · Answer 2 · answered May 13 '14 at 22:36

1

I am assuming that the data returned by Ajax is valid.... the $(this) within success does not refer to the td anymore.

do this outside the ajax call:

var me = $(this);

Then in your success code do this:

me.attr('title', data);

answered May 13 '14 at 22:36

Nawed Khan

4,393
1
10
22

score 1 · Accepted Answer · answered May 13 '14 at 22:38

The problem is that the this object in the success function is not the td element. By default the context of the jquery ajax callbacks is set as an object representing the ajax options. However you can change that using the context option:

$('.ChannelCodeDesc').mouseover(function () {

    //Only append if we don't have a title
    if (!$(this).attr('title')) {

        //Let me know when we're about to make Ajax call
        console.log('ajax');
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetDesc", "ZipCodeTerritory")',
            data: { channel: $.trim($(this).text()) },
            context: this, //make sure "this" inside the success callback is the td element
            success: function (data) {

                //Append to td
                $(this).attr('title', data);

                //Display what we got back
                console.log(data);
            }
        });                
    }

    //What does the title look like when we're done?
    console.log($(this).attr('title')); });

jQuery not appending title

3 Answers3