Possible bug, and a request to attempt to duplicate it

Korben Dallas

I may have found a bug that prevents some functions in DataTables and Editor from accepting selectors that are created via concatenation.

e.g. that fails:

$.post("/script.php", { 
            dataType: "text"
}, 
function(data){
    //data is the name of a row ID# (row_id_2)
    var fkey = data
},"text");

//concatenate selector "#"+fkey
editor.edit( "#"+fkey, { focus: 1 }); 

//this displays the intended ID selector as: #row_id_2
console.log("#"+fkey) 

e.g. that works:

var fkey = "row_id_2";

//concatenate selector "#"+fkey
editor.edit( "#"+fkey, { focus: 1 }); 

//this displays the intended ID selector as: #row_id_2
console.log("#"+fkey) 

In a nutshell: When I return text from a jQuery .post() and concatenate the returned value to be an ID selector as in the first example, even though it is valid as reported by console.log(), the editor API function does not work. If I concatenate a variable I define manually as in the second example the function works and the expected output appears in the console. I have also recreated this odd behavior with DataTables row() for instance.

Most curiously, in my preparation to report this as a bug, I created a test case at http://live.datatables.net that uses my (mostly) identical code and I cannot recreate the problem. It works! I have to say "mostly identical" because of some possibly important differences:

1) Where this does not work, I am using jQuery v3.2.0, UI v1.12.1 and jQueryUI specific versions of Datatables and etc:

https://datatables.net/download/#ju/dt-1.10.16/e-1.7.3/b-1.5.1/sl-1.2.5

2) At http://live.datatables.net the jQuery UI versions of Datatables and etc are not available, and the version of Editor is only v1.5.6.

Would it be possible for you to update the live editor to include your current jQueryUI versions/helpers or, at least the latest Editor v1.7.3?

Thanks!

allan

$.post("/script.php", {
            dataType: "text"
},
function(data){
    //data is the name of a row ID# (row_id_2)
    var fkey = data
},"text");
 
//concatenate selector "#"+fkey
editor.edit( "#"+fkey, { focus: 1 });
 
//this displays the intended ID selector as: #row_id_2
console.log("#"+fkey)

This fails because $.post is async. The editor.edit( ... ) and the rest of the code will execute before the fkey variable is assigned.

If you want to get data via Ajax and then use it, you need to use it inside the callback - e.g.:

$.post("/script.php", {
            dataType: "text"
},
function(data){
    //data is the name of a row ID# (row_id_2)
    var fkey = data
 
    //concatenate selector "#"+fkey
    editor.edit( "#"+fkey, { focus: 1 });
 
    //this displays the intended ID selector as: #row_id_2
    console.log("#"+fkey)
},"text");

You could make the Ajax call in jQuery synchronous, but that's not a great move in terms of performance or user experience since it blocks the rest of the Javascript thread until the Ajax request is answered.

Regarding Editor on the live page, it always pulls in the latest version - I've just not updated the label for it in some time!

Allan

Korben Dallas

async

Doh!

Sometimes I also forget that callback functions are our friends.

Thanks Allan!