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

0 votes

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

Jul 22 in Web Development by gaurav
• 17,580 points
11 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

jQuery $(this) selector function and limitations

this isn't a jQuery "thing", but a basic JavaScript ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
14 views
0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30 in Web Development by rajatha
• 7,040 points
65 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
176 views
0 votes
0 answers
0 votes
0 answers

How to preselect and disable specific checkboxes using js/jquery?

I have checkboxes with randomly generated ids ...READ MORE

Jul 26 in Web Development by gaurav
• 17,580 points
8 views
0 votes
1 answer

How to upload zip from the S3 bucket to lambda function using AWS CLI

Hi@Abhishek, You want to upload your zip file ...READ MORE

answered Apr 10, 2020 in Web Development by MD
• 95,360 points
4,440 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
307 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,825 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,808 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
1,289 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP