How to use bootstrap alerts instead of jqgrid alerts

Question

How to replace jqgrid alert messages(successfully added,deleted) to bootstrap alerts?I am using JQGRID 5.2.1. As we use following code in jqgrid for alerts

 if (response.responseText) {  
         alert(response.responseText);  
                        } 

Answer 1

First of all I want to remind, that alert will be used by free jqGrid extremely seldom and only in critical situations, for example, if the grid can't be created at all.

On the other side, one could have the requirement don't use alert as common policy of a company and as common requirement to every JavaScript modules. It will corresponds to the polity of some web browsers (see the article for example).

One more example of requirement to replace alert usage will be creating unit tests, which reproduces some errors explicitly. It would be helpful to test the existence of an error only without displaying blocking alert .

In any way free jqGrid allows to define $.jgrid.defaults.fatalError method, which will be used by jqGrid instead of alert . For example, one can use the code like below

$.jgrid.defaults = $.jgrid.defaults || {};
$.jgrid.defaults.fatalError = function (errorText) {
    $("body").prepend('<div class="alert alert-danger alert-dismissable">' +
        '<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>' +
        '<h4 class="alert-heading">Error</h4>' +
        '<p>' + errorText + '</p>' +
      '</div>').alert()
        .on('closed.bs.alert', function () {
            $(this).remove();
        })          
};

before creating of any grid.

https://jsfiddle.net/OlegKi/c70pfv6r/ is a simple grid, which uses Bootstrap CSS. I included $.jgrid.defaults.fatalError in the code, but it will be not really used. I modified the demo to include colNames parameter, which length don't corresponds the length of colModel parameter: https://jsfiddle.net/OlegKi/c70pfv6r/1/ . jqGrid can't create the grid and it uses alert in such cases. One the other side one will see the following div instead:

Answer 2

I think there is a much easer way to do this. In case of Guriddo jqGrid as declared in the question it is possible to use the build in common function $.jgrid.info_dialog like this

if (response.responseText) {  
         $.jgrid.info_dialog('My Title', response.responseText, 'Close', { styleUI : 'Bootstrap'});

More on the common Guriddo jqGrid functions you can look here