atwho() function using at.js doesn't work in ajax success

Question

I have created a custom jquery plugin using at.js like this,

(function ($) {

$.fn.mention = function (options) {

    var defaults = {
        at: "@",
        dataType: "json",
        source: "",
        data: {}
    };

    var settings = $.extend({}, defaults, options);

    $.ajax({
        url: settings.source,
        data: settings.data,
        dataType: settings.dataType,
        method: "POST",
        success: function (result) {
            if (result.success) {
                $(this).atwho({
                    at: settings.at,
                    data: result.data
                });
            }
        }
    });

};
})(jQuery);

I am using the plugin like this,

$('#textbox').mention({
    source: "<?php echo_uri("..some_links"); ?>",
    data: {some_data: some_data_value}
});

And the data on ajax success, produce the exact json array that I need. I want to mention here that, if I add data manually in atwho(), it's smoothly working. But these method doesn't working.

Please provide any solution.

Thanks in advance.

Answer 1

Inside the callback, I think this pointer isn't referring to your element anymore unless you specify the context property:

$.ajax({
   ...
   context: this,

Then in the callback, this would refer to the jQuery object representing the plugin. OR, outside the ajax define a variable:

var that = this; //that can be accessed by your callback
$.ajax({
  ..,
  success: function(..) {
     $(that).atwho(..);
  }

Both options should work.