jQuery Forum

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();
deferredList.push(innerDef.promise());

positionIt(this);
addContainer(this);
updateSettings(this);
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
setSize();
setDOMElements();
setUpEvents();
$.when( loadStatsChart_Table() ).done(function(result){
innerDef.resolve(result);
});
} else {
alert ("There was an error loading the plugin content for " + settings.index);
}

});

});


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

return def.promise();

function loadPluginContent () {

var dfd = $.Deferred();

stat.load(settings.url, function(responseText, statusText, xhr) {
dfd.resolve(statusText)
});

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:
"undefined
Test 1
undefined
Test 2
def resolved
def resolved "


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

Please help!

Hi there.

In my code I call a function which first of all displays a form and builds the select drop-down lists with the appropriate options. I then call the following function, passing it a case id. The function:

1. calls another file that uses AJAX to connect to my database and returns a single row of data for the case id specified.

2. checks if the ajax function has completed successfully

3. if successful, it populates the form fields with the json data

This form is correctly populated but if I remove the alert code then it does not populate the form. Can anybody help?

1. function loadCase (caseID) {
   
       $.get("./case_det/exist_case_det/ajax_get_exist_case_det.php?caseID=" + caseID, function(data, status) {
           
           alert (caseID + " now loading");
   
           if (status === "success") {
               json_data=JSON.parse(data);
   
               //save object to localStorage
               localStorage['my_case'] = JSON.stringify(json_data);
   
               // Populate Case Detail
               $('#categorisation').val(json_data[0].cat_id);
               $('#priority').val(json_data[0].priority_id);
               $('#type').val(json_data[0].type_id);
               $('#stage').val(json_data[0].stage_id);
               $('#summary').val(json_data[0].summary);
           } else {
               alert ("System encountered probl;ems laodign case data");
           }
   
       });
   }

I've also tried the following code but if I omit the alert then it doesn't work.

1. function loadCase (caseID) {
   
       $.ajax({
           url : './case_det/exist_case_det/ajax_get_exist_case_det.php',
           type: 'POST',
           data: {caseID:caseID},
           success : loadCaseSuccess,
           error: loadCaseError
       });
   }
   
   //loadCase().done(loadCaseSuccess);
   
   function loadCaseSuccess(data, textStatus) {
       alert(textStatus);
       
       json_data=JSON.parse(data);
       alert(json_data[0].cat_id);
   
   //    // Populate Case Detail
       $('#categorisation').val(json_data[0].cat_id);
   }
   
   function loadCaseError() {
       alert ("System encountered problems loading case data");
   }

And I've tried setting async:false but that didn't help.

Please can you let me know where I am going wrong. Many thanks