editor not displaying list after ajax call

[jpantona]

I've defined an editor for my column but the list of selection values is not displaying. I've confirmed that, after the ajax call, the JSON data is valid and the array is constructed correctly. In the focus() method for the autocomplete, I've confirmed that at the time focus happens, the data from the ajax call is correct and syntax is good. It seems like this is a problem where the async ajax call does not complete in time before the array is assigned to the source parameter of the autocomplete object. I've tried setting async : false on the ajax call to make sure it finished, but that did not have the desired affect.

Here is the column model definition for the particular column:

Code: [Select]

{title:"Apply Against (recoup)", width:150, dataType:"string", dataIndx: "apply_against", editor: { type: function (ui) { applyAgainstDropDownEditor(ui);}}},

Here is the function definition referenced in the above editor (note, the source value is jdata):

Code: [Select]

var applyAgainstDropDownEditor = function (ui) {
        //debugger;
        var $cell = ui.$cell,
            rowData = ui.rowData,
            dataIndx = ui.dataIndx,
            width = ui.column.width,
            cls = ui.cls;
        var dc = $.trim(rowData[dataIndx]);

        var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
            .width(width - 6)
            .appendTo($cell)
            .val(dc);

        $inp.autocomplete({
            source: jdata,
            minLength: 0
        }).focus(function () {
            //open the autocomplete upon focus
            $(this).data("uiAutocomplete").search($(this).val());
        });
    }

And this is how, earlier in the code, the jdata array gets defined and populated (in the onload event for the page):

Code: [Select]

var xrObjectId = jQuery('#contractObjId').val();
var xsnjson = "{ r_object_id : '" + xrObjectId + "',  encryptedUsername : 'IL9ll', encryptedPassword : 'apx6TrB+Gc', encryptedRepository : 'QlRDcYjMxV' }";
var xwebServiceURL = 'http://x.com/services/xDFS/AboveTheLineContractService';
var xsoapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.prodagio.com"><soapenv:Header/><soapenv:Body><ser:getContractServiceNames><json>' + xsnjson + '</json></ser:getContractServiceNames></soapenv:Body></soapenv:Envelope>';

var jdata = [];
$.ajax({
url: xwebServiceURL,
type: "POST",
dataType: "xml",
data: xsoapMessage,
processData: false,
contentType: "text/xml; charset=\"utf-8\"",
success : function(data, textStatus, jqXHR ) {
//alert(jqXHR.responseText);
xmlDoc = $.parseXML( jqXHR.responseText );
$xml = $( xmlDoc );
$rr = $xml.find( "return" );
if ($rr.text().toLowerCase().indexOf("error") > -1 ) {
  alert("Lookup unsuccuessful. An error occured: " + $rr.text());
} else {
//alert($rr.text());
try {
var rdata = $.parseJSON($rr.text());
} catch ( eeee ) {
alert("Lookup unsuccuessful. An error occured: " + eeee);
}
jdata = ' [ ';
var i = 0;
$.each(rdata,function(){
if ( i == 0 ) {
jdata = jdata + ' "' + this.objectName + '"';
} else {
jdata = jdata + ', "' + this.objectName + '"';
}
//alert(jdata);
i++;
});
jdata = jdata + ' ] ';
//alert(jdata);
}
},
error : function(jqXHR, textStatus, errorThrown) {
xmlDoc = $.parseXML( jqXHR.responseText );
$xml = $( xmlDoc );
$rr = $xml.find( "return" );
if ($rr.text().toLowerCase().indexOf("error") > -1 ) {
  alert("Report unsuccuessful. An error occured: " + textStatus + " " + $rr.text());
}
}
});


[paramvir]

When it's not sure that the array would be available before applyAgainstDropDownEditor is called then you may use lazy loading e.g. assign URL instead of array to source parameter of autocomplete:


http://jqueryui.com/autocomplete/#remote

[jpantona]

The key to resolving this was understanding that the autocomplete source property is a function that  has two params, request and a callback, once the response comes back you need to call the callback.

Code: [Select]

$inp.autocomplete({
            source: function (request, callback) {
                  ... code here, including jquery ajax call....
             
                  callback(xjdata);
             }