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, 2022 in Web Development by gaurav
• 23,260 points
509 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, 2022 in Web Development by rajatha
• 7,640 points
293 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, 2022 in Web Development by rajatha
• 7,640 points
4,016 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, 2022 in Web Development by gaurav
• 23,260 points
7,233 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, 2022 in Web Development by gaurav
• 23,260 points
212 views
0 votes
0 answers

Getting the Text of a Check Box and Text Area To Display using jQuery

What I am trying to do is ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
1,506 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,510 points
991 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,880 points
14,238 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,880 points
22,432 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,880 points
2,966 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP