jquery - xeditable select source using function using deffered and local storage indexedDB

Question

I am working on a web app for the company that I work for and I have a problem with a form that is required.

I'm having a bit of trouble populating a select list with data from a different function using xeditable.

The problem is the code that is being executed to populate the select box doesn't wait for the other function to get data from local storage and return it, even though I am using deffered, (I'm not sure if I am using the deffered/resolve functionality correctly).

This is the code that I have:

<a id="TypeID" data-type="select" data-pk="1966_TypeID" data-original-title="Please Select" data-pid="36" class="editable editable-click">3609</a>

jquery:

function popSelectBox(PID) {
    var rtn = [];
    $.indexedDB('testDatabase').objectStore('Lookup').index('PID').each(function (i) {
        var source = {};
        source.value = i.value.ID;
        source.text = i.value.Name;
        rtn.push(source);
    }, PID).done(function (r, e) {
        console.log(rtn);
        console.log('popSelectBox function (I expect to see this first) - This section should complete before the makeEditable function');

        return rtn;
    });
}

function makeEditable() {
    $('.editable').editable({
        validate: function (value) {
            if ($.trim(value) === '') {
                return 'This field is required';
            }
            return false;
        },
        success: function (response, newValue) {
            console.log($(this).data('pk'), newValue);
            //$(this).parent().css('background-color', 'green');
        },
        /**** this is the problem section of this function ****/
        source: function () {
            //if the type is a select list then we need to populate it, this is done here
            if ($(this).data('type') === 'select') {
                var d = $.Deferred();
                $.when(d).done(function (v) {
                    console.log(v);
                    return v;
                });
                d.resolve(popSelectBox($(this).data('pid').toString()));
                console.log('makeEditable function (I expect to see this last) - This section should wait for the popSelectBox function to finish');
            }
        }
    });
}

I also have a fiddle here http://jsfiddle.net/f8otrayn/3/ that shows the above. Included in this fiddle is an example local storage set up that I am using, the functions to set this up are present, however I have commented out the function call, you can check the code and uncomment if you wish.

I am looking for a way to wait until the popSelectBox function has finished and returned data so I can use that data to populate the select box, I don't really want to use setTimeout as there are lots of entries in local storage so waiting a specific period of time may not work in all instances.

Does anyone have any ideas

Thanks