Chaining not working on jQuery Plugin

ChrisJ Published at Dev

ChrisJ

I am writing a plugin to pull listings in from my companies internal API and everything is working except for some reason it will not allow me to chain additional methods.

(function( $ ) {

    $.fn.addListings = function(options){
        var defaults = {
            listingCount: 25,
            pageNumber: 1,
            customTemp: "<div class='listing'>\
            <img src='${IDXPhotoRef}'/>\
            <div class='address'>${Address}</div>\
            <div class='beds'> Beds: ${BedRooms}</div>\
            <div class='baths'>Baths: ${BathRooms}</div>\
            <div class='price'>Price: $${PriceFormatted}</div>\
            </div>",
            after: function(){}
        }

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

        $.ajax({
          type: 'GET',
          // url: '/api/listings/?featuredlistings=1&pagesize=' + settings.listingCount + '&pagenumber=' + settings.pageNumber + '',
          url:'data.json',
          contentType: 'text/plain',
          crossDomain: true,
          context: $(this)
          })
        .done(function(data) {
            $.template("customTemp", settings.customTemp);
            var arrData = $.map(data[0], function(el) { return el; });
            for(i=0; i<arrData.length; i++){
                $.tmpl("customTemp", arrData[i]).appendTo(this);
            }

          })
        .always(function(){
            settings.after();
          });

    };

    return this;

    }( jQuery ));

https://github.com/cjthedizzy/jquery.addListingsJS/blob/master/jquery.addListings.js

Rory McCrossan

The return this needs to be placed inside the $.fn.addListings block:

(function($) {
    $.fn.addListings = function(options){
        // var defaults = {
        // ... rest of the code...

        return this;
    };
}(jQuery));

Collected from the Internet

Please contact [email protected] to delete if infringement.