jqGrid set dataURL Dynamically after Edit Form Loads

Question

I am using jqGrid 4.15.6-pre - free jqGrid:

I have two dropdown list in my edit form. Both are populated from server using the setColProp in the onSelectRRow function.

What I want to do reload the second dropdown list if the value in the first dropdown is changed.

I need to do this without having to close the edit form.

Answer 1

The example below uses the Guriddo jqGrid. You maybe can adapt it to the forked version - free-jqgrid.

    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: 'data.json',
            editurl: 'clientArray',
            datatype: "json",
            colModel: [
                {
                    label: 'Customer ID',
                    name: 'CustomerID',
                    width: 75,
                    key: true
                },
                {
                    label: 'Company Name',
                    name: 'CompanyName',
                    width: 140,
                    editable: true // must set editable to true if you want to make the field editable
                },
                {
                    label : 'Phone',
                    name: 'Phone',
                    width: 100,
                    editable: true
                },
                {
                    label: 'Postal Code',
                    name: 'PostalCode',
                    width: 80,
                    editable: true
                },
                {
                    name: 'Country',
                    width: 200,
                    editable: true,
                    edittype: "select",
                    editoptions: {
                        value: "USA:USA;UK:UK;Canada:Canada"
                    }
                },
                {
                    name: 'City',
                    width: 200,
                    editable: true,
                    edittype: "select",
                    editoptions: {
                        value: "Select a City"
                    }
                }
            ],
            loadonce: true,
            viewrecorde: true,
            width: 780,
            height: 200,
            rowNum: 10,
            pager: "#jqGridPager"
        });

        $('#jqGrid').navGrid('#jqGridPager',
            // the buttons to appear on the toolbar of the grid
            { edit: true, add: false, del: false, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
            // options for the Edit Dialog
            {
                editCaption: "The Edit Dialog",
                recreateForm: true,
                closeAfterEdit: true,
                viewPagerButtons: false,
                afterShowForm: populateCities,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText
                }
            },
            // options for the Add Dialog
            {
                closeAfterAdd: true,
                recreateForm: true,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText
                }
            },
            // options for the Delete Dailog
            {
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText
                }
            });

        // This function gets called whenever an edit dialog is opened
        function populateCities() {
            // first of all update the city based on the country               
            updateCityCallBack($("#Country").val(), true);
            // then hook the change event of the country dropdown so that it updates cities all the time
            $("#Country").bind("change", function (e) {
                updateCityCallBack($("#Country").val(), false);
            });
        }

        function updateCityCallBack(country, setselected) {
            var current = $("#jqGrid").jqGrid('getRowData',$("#jqGrid")[0].p.selrow).City;
            $("#City")
                 .html("<option value=''>Loading cities...</option>")
                 .attr("disabled", "disabled");

            $.ajax({
                url: country+".html",
                type: "GET",
                success: function (citiesHtml) {
                    $("#City")
                         .removeAttr("disabled")
                         .html(citiesHtml);
                    if(setselected) {
                        $("#City").val( current );
                    }
                }
            });
        }

    });

Real-time example is here