Teach getOptionValuesForEdit() work asynchronously: async:false is already deprecated on Chrome from 2016-04-26

[nikolassharp]

Due to http://stackoverflow.com/posts/6685294/revisions:

PLEASE NOTE: Setting async property to false is deprecated and in the process of being removed (link). Doesn't work on latest Chrome already (2016-04-26).

And now try to use async:false in Chrome causes to:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Does anyone have a clue how to do that at least in the plugin's code till author will find time to improve it? Many thanks in advance.

[Tythos]

The only async=false line I see in the main engine code is in loadXMLFromString, in an IE-specific clause. Is that the section causing issues? I see a few other cases in some ancillary libraries, so I'd like to make sure before I drill into a possible fix.

[nikolassharp]

https://github.com/webismymind/editablegrid/blob/master/examples/full/javascript/demo.js#L52:

// the list of allowed countries depend on the selected continent
if (hasColumn('continent')) {

    setEnumProvider("country", new EnumProvider({ 

        // the function getOptionValuesForEdit is called each time the cell is edited
        // here we do only client-side processing, but you could use Ajax here to talk with your server
        // if you do, then don't forget to use Ajax in synchronous mode 
        getOptionValuesForEdit: function (grid, column, rowIndex) {
            var continent = editableGrid.getValueAt(rowIndex, editableGrid.getColumnIndex("continent"));
            if (continent == "eu") return { "be" : "Belgique", "fr" : "France", "uk" : "Great-Britain", "nl": "Nederland"};
            else if (continent == "am") return { "br" : "Brazil", "ca": "Canada", "us" : "USA" };
            else if (continent == "af") return { "ng" : "Nigeria", "za": "South Africa", "zw" : "Zimbabwe" };
            return null;
        }
    }));
}

So right now for the column with SelectCellEditor we should provide getOptionValuesForEdit(). In case we want to make inside getOptionValuesForEdit() $.ajax() request we should do that (as it mentioned in comments of demo.js file below) by using Ajax in synchronous mode which means setting $.ajax({async: false}). But using async: false is best of all deprecated not only by jQuery but also by Chrome (see links in issue start message):

$.ajax({async:true}) inside getOptionValuesForEdit() can't be done by plugin's architecture

But if try to call $.ajax() inside getOptionValuesForEdit() asynchronously (async: true by default) this will cause to empty length of htmlselect options because $.ajax() goes to the end of callstack and thus it's response will be handled only after all other functions from callstack are done. Callstack in this case looks the same:

Summing up it seems that because of deprecation of async: false currently there is no way to populate getOptionValuesForEdit() with list of options by ajax which makes getOptionValuesForEdit() useless...

Currently like a temporary workaround I've created my own AsyncSelectCellEditor (instance of SelectCellEditor) where make $.ajax() call inside custom AsyncSelectCellEditor.prototype.edit and in successfull ajax response call custom AsyncSelectCellEditor.prototype.getEditor.

Considering the deprecation of async:false I think the whole plugin's architecture should be rearranged and thus getOptionValuesForEdit() should be taught to be populated by asynchronous ajax call.

P.S. I'm Javascript newbie and English isn't my mother tongue so, please, consider this issue carefully :) . Probably I'm wrong somewhere. P.S.S. My deep respect to EditableGrid authors! Your work is awesome! Thank you for sharing such a great product - it helps people like me making dreams to come true!