jqGrid display default “loading” message when updating a table / on custom update

Question

I have a case where I need to update a jqgrid based on some search criteria which the user selects. I can get the data to update , but I would want the loading message to show while the new data is being fetched. Can someone please let me know how to get that working ?

Current code follows

var ob_gridContents = $.ajax( {
 url : '/DisplayObAnalysisResults.action?getCustomAnalysisResults',
 data :  "portfolioCategory="+ $('#portfolioCategory').val() 
 +"&subPortfolioCategory="+ $('#subPortfolioCategory').val()
 + "&subportfolio=" + $('#subportfolio').val(),
 async : false
 }).responseText;
 var ob_Grid = jQuery('#OBGrid')[0];
 var ob_GridJsonContents = eval('(' + ob_gridContents + ')');
 $('#ob_Grid').trigger("reloadGrid"); 
 ob_Grid.addJSONData(ob_GridJsonContents);
 ob_Grid = null;
 ob_GridJsonContents = null;
}

Answer 1

If I correct understand what you will, I can recommend you to use jQuery blockUI plugin (http://malsup.com/jquery/block/). Then you don’t need more to use "async : false" parameter of $.ajax function and do something like following:

var WaitMsg = function () {
    jQuery('#main').block({ message: '<h1>Die Daten werden vom Server geladen...</h1>' });
};
var StopWaiting = function () {
    jQuery('#main').unblock();
};

WaitMsg();
$.ajax({url : '/DisplayObAnalysisResults.action?getCustomAnalysisResults',
        data: jQuery.param({portfolioCategory: $('#portfolioCategory').val(),
                            subPortfolioCategory: $('#subPortfolioCategory').val(),
                            subportfolio: $('#subportfolio').val()}),
        complete: function (data, status) {
            if (status === "success" || status === "notmodified") {
                var ob_GridJsonContents = jQuery.parseJSON(data.responseText);
             ...
            }
            StopWaiting();
        },
        error: function (xhr, st, err) {
            // display error information
            StopWaiting();
        }
});

I recommend you don’t build parameters with the way like

"portfolioCategory="+ $('#portfolioCategory').val() +"&subPortfolioCategory="+ $('#subPortfolioCategory').val() + "&subportfolio=" + $('#subportfolio').val()

because you can receive encoding problems, if data returned by .val() have some special characters. You could use JavaScript function encodeURIComponent in such cases (like encodeURIComponent($('#portfolioCategory').val())) or jQuery.param function if you construct a string like p1=val1&p2=val2&...pN=valN.

Best regards
Oleg