jqgrid dataurl completion event

Question

I am using jQuery to get a list of suppliers for a part number. I then want to load some extra data about the supplier/part number combination once the edit form appears. The problem is that the dataurl method (which I am calling in the beforeInitData method) to get the suppliers does not complete before the beforeShowForm method executes. Therefore I do not have a supplier to look up when the form first loads. Is there a way to run the function after the dataUrl method completes to get the extra data?

I have tried JQGrid editoptions dataurl not using ajax get? and got it going but I know there will be conflicts because the ajaxSelectOptions method gets called for every request and sometimes my requests will be coming from different places with different requirements.

Here is the code that I am using for my grid:

jQuery("#receiptPartsTable").jqGrid('editGridRow',"new",
{
    height:400,
    width:800,
    reloadAfterSubmit:false,
    recreateForm: true,
    beforeInitData: function(form)
    {
        var selectedPart = rowData.part;
        var selectedPartQty = rowData.qty;
        //Getting list of suppliers
        $("#receiptPartsTable").jqGrid('setColProp', 'supplier', { editoptions:{dataUrl:'getSuppliersForPart.php?part=' + rowData.part} });
    },
    beforeShowForm: function(form)
    {
        var selectedPart = rowData.part;
        var selectedPartQty = rowData.qty;
        $('#part').val(selectedPart);
        $('#qty').val(selectedPartQty);

        //$('#supplier').val() is not set yet; 
        var supplier = $('#supplier').val(); 

        //This method is getting called before there is a supplier
        getPartDetails(rowData.part, supplier);

        //Set up onChange listener. After selecting a supplier, get the part details
        $('#supplier').change(function() {
            var supplier = $('#supplier').val();
            getPartDetails(selectedPart, supplier);
        });
    }

Answer 1

You posted no definition of jqGrid which you use. The context in which you execute the above code is also not quite clear. Do you get rowData before from the currently selected row? Where you define it?

Nevertheless I think that you went in the correct direction and that you found already the correct way to solve the problem. The usage of complete callback of ajaxSelectOptions is probably the only way which you can use. You wrote about some "conflicts", but not posted more details.

I would recommend you to examine properties of this inside of complete callback. jqGrid set context option (see the line) of the $.ajax call (exactly like in the answer which you already found yourself). So you can use this.elem, this.options and this.vl inside of complete callback. this.vl is the value from the cell in case if editing of existing row. Typically it's the name of the option which will be selected. this.options has tree important properties which you can use: this.options.dataUrl, this.options.id, this.options.name. In case of form editing are the values this.options.id and this.options.name the same. In case of inline editing this.options.id will have rowid and _ ad the prefix. It gives you the possibility to execute different code inside of complete callback for different selects where you use dataUrl.

One more remark. In the most cases you can remove call of setColProp from the beforeInitData and use the approach suggested in the answer and the another one:

ajaxSelectOptions: {
    data: {
        id: function () {
            return $("#receiptPartsTable").getGridParam('selrow');
        },
        part: function () {
            return rowData.part;
        }
    },
    complete: function (jqXHR, textStatus) {
        var columName = this.options.name, response = jqXHR.responseText;
        ...
    }
}

You can use just editoptions: {dataUrl: "getSuppliersForPart.php"} The URL will be appended with part and id parameters (see the above code). Instead of id you could use getRowData to get content from other columns based of rowid of currently selected row for example.