How do I return a promise from my plugin

How do I return a promise from my plugin

Hello. Ihave written a jQuery plugin and want to return a promise once it has finishedloading so that I can do some other stuff. I found a useful link here and tried to replicate the code but to no avail. Please can you help - I am pretty new to both plugins andpromises.

The code I use to initiate the plugin is:

The cut down version coded for the plugin is:
(function() {

// custom workflow class
$.fn.stats = function(options) {

var def = $.Deferred();
var stat;

var defaults = {
//my defaults go here

var settings = $.extend(true, defaults, options); // extend (i.e. merge) defaults with options passed across when plugin is invoked

var deferredList = [];

//Apply to each instance of the plugin
this.each(function() {

var innerDef = $.Deferred();

stat = $(this).find("div.stat_plugin"); // reference for this plugin

$.when ( loadPluginContent() ).done(function(result) {
if(result === "success") {
console.log("Plugin html successfully loaded for index " + settings.index); // get count of stats plugins loaded on the page
$.when( loadStatsChart_Table() ).done(function(result){
} else {
alert ("There was an error loading the plugin content for " + settings.index);



$.when.apply($, deferredList).done(function() {
console.log("def resolved");

return def.promise();

function loadPluginContent () {

var dfd = $.Deferred();

stat.load(settings.url, function(responseText, statusText, xhr) {

return dfd.promise();

function loadStatsChart_Table() {

var dfd = $.Deferred();

// do some stuff here

dfd.resolve('Plugin loaded successfully for ' + settings.index);

return dfd.promise();


// other private functions go here, such as: positionIt, addContainer and updateSettings


}) (jQuery);
The console log outputs the following:
Test 1
Test 2
def resolved
def resolved "

The def.resolve("Done") code in the $.when.apply... function isn't being returned.

Please help!