jqgrid how to show server side messages

Question

I am using jqGrid to show data in tabular format, using JSP and servlet.

EDIT

I want to show errors from server, when operations like insert, update, delete are performed. (datatype: "xml")

JQGrid

jQuery("#list10_d").jqGrid({
                height:250,
                width:600,
                url:'Assignment?action=Assign',
                datatype: "xml",
                colNames:['Sr. No.','PID',  'DATE',  'EMPID'],
                colModel:[{name:'srNo',index:'srNo', width:30,sortable:false},
                           {name:'PID',index:'PID',width:0, sortable:true,editable:false},
                           {name:'DATE',index:'DATE', width:75,sortable:true,editable:true,editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({dateFormat:"dd-M-yy",showButtonPanel: true,changeYear: true,changeMonth: true}).attr('readonly','readonly'); }, 200); }}},
                           {name:'EMPID',index:'EMPID', width:150,sortable:true,editable:true}
                           ],
                rowNum:10,
                rowList:[10,20,50,100],
                pager: '#pager10_d',
                sortname: 'PID',
                viewrecords: true,
                sortorder: "asc",

                    },
                multiselect: true,
                editurl: "Assignment?action=Edit",
                caption:"Assignment"
            } ).navGrid('#pager10_d',{edit:false,add:true,del:false,addtext:'Assign '},
                    {},
                    {modal:true,jqModal: false,closeOnEscape:true,savekey: [true,13],closeOnEscape:true, recreateForm: true,width:500,mtype:'POST', url: 'Assignment',editData:{action: 'Assign',PID: function () {return PID;}}, 
                afterSubmit: function (response) {
                        alert('After Submit \n' +'statusText: '+ response.statusText);
                        var myInfo = '<div class="ui-state-highlight ui-corner-all">'+
                                     '<span class="ui-icon ui-icon-info" ' +
                                         'style="float: left; margin-right: .3em;"></span>' +
                                     response.statusText + 'Inserted'+
                                     '</div>',
                             $infoTr = $("#TblGrid_" + $.jgrid.jqID(this.id) + ">tbody>tr.tinfo"),
                            $infoTd = $infoTr.children("td.topinfo"); 
                        $infoTd.html(myInfo);
                        $infoTr.show();

                        // display status message to 3 sec only
                        setTimeout(function () {
                            $infoTr.slideUp("slow");
                        }, 5000);

                        return [true, "", ""]; // response should be interpreted as successful
                    },
                    errorTextFormat: function (response) {
                    alert('Error Text Format: \n' +'statusText: '+ response.statusText);

                        return '<span class="ui-icon ui-icon-alert" ' +
                                     'style="float:left; margin-right:.3em;"></span>' +
                                    response.statusText;},
                    {closeOnEscape:true, recreateForm: true,mtype: 'POST',url: 'Assignment',delData: {action: 'Delete',PID: function () {return PID;}}},
                    {}) ;

Servlet Code

if(request.getParameter("action").equalsIgnoreCase("Assign"))
        {
            PID = request.getParameter("PID");
            String DATE= request.getParameter("DATE");
            String EMPID= request.getParameter("EMPID");

            String query = "insert into ASSIGN(PID,DATE,EMPID) values('"+ PID +"','"+ DATE +"','"+ EMPID"')";
            boolean b = insert.InsertData(query);
            if(b)
            {
                System.out.println("New record added successfully! : "+query);
                response.setContentType("text/xml");
                response.setCharacterEncoding("UTF-8");

                //response.sendError(200, "success");
                response.setStatus(200, "Inserted successfully");

            }
            else
            {
                System.out.println("Failed to add Record! : "+query);
                response.setContentType("text/xml");
                response.setCharacterEncoding("UTF-8");

                //response.sendError(399, "not Inserted successfully");   
                response.setStatus(404, "Error while inserting");   
            }           
        }//INSERT

for above example

• after inserting record from jqgrid, then No message is shown in grid if record is inserted successfully
• error Status: 'Unauthorized'. Error code: 401 is shown if servlet fails to insert record in database.

My Question is that:

• after inserting record from jqgrid, if the record is inserted then how should i show message giving information to user that data is inserted.
• and how should I give message to user that Error while inserting (which error code should i use for this?)

Thanks in advance.....

Answer 1

I suggested in the old answer and in another one to use existing hidden row of grid form (tr.tinfo) to display information which is not error. Because the answers are not well known I repeat the same information here, but I'll try to explain all more detailed.

First of all it's important to understand which elements has the standard Edit/Add form. Using Developer Tools of IE or Chrome, Firebug or many other tool one can easy find out that the Add/Edit form created by jqGrid contains two hidden rows on top of the form:

The first row will be used per default as the place for error message. One can use errorTextFormat to customize the information a little.

If the server response contains error HTTP status code (>=400) then the callback errorTextFormat will be called and you can use

errorTextFormat: function (response) {
    return response.responseText;
}

or something like

errorTextFormat: function (response) {
    return '<span class="ui-icon ui-icon-alert" ' +
                 'style="float:left; margin-right:.3em;"></span>' +
                response.responseText;
}

to display error message like

In the same way one can use afterSubmit callback to display status message after submitting of edited/added data if the server response contains successful HTTP status code. The implementation of afterSubmit could be about the following

afterSubmit: function (response) {
    var myInfo = '<div class="ui-state-highlight ui-corner-all">'+
                 '<span class="ui-icon ui-icon-info" ' +
                     'style="float: left; margin-right: .3em;"></span>' +
                 response.responseText +
                 '</div>',
        $infoTr = $("#TblGrid_" + $.jgrid.jqID(this.id) + ">tbody>tr.tinfo"),
        $infoTd = $infoTr.children("td.topinfo");
    $infoTd.html(myInfo);
    $infoTr.show();

    // display status message to 3 sec only
    setTimeout(function () {
        $infoTr.slideUp("slow");
    }, 3000);

    return [true, "", ""]; // response should be interpreted as successful
}

The code will display the status message for 3 sec only abd then uses jQuery.slideUp animation to hide it. It will look like

I hope it's what you need.

Answer 2

I have done somthing similar on an edit call to my server so I think this would work in a very similar manner to an add.

On the controller after an edit/delete/add call you would determine if there is a message to be passed to the user and if so pass it via the JSON (XML in your case) back to the grid.

Ex

    if (infoDialogTrigger) { 
       return Json(new { success = true, showMessage = true, message = "Updating your Inventory and we are displaying this info box" }); 
    }//if
    else { 
       return Json(new { success = true, showMessage = false, message = "" }); 
    }//else

In your jqGrid you would have your edit/delete/add function:

    function EditCollectionItem (rowid, grid){
        $(grid).jqGrid('editGridRow', rowid,
        {
            viewPagerButtons: false,
            editData: { },
            afterComplete: function (response) {
                var DialogVars = $.parseJSON(response.responseText); //parse the string that was returned in responseText into an object
                //if there was a failure with the update, or there was information to pass to the user
                if (!DialogVars.success || DialogVars.showMessage) {
                    alert(DialogVars.message);
                }
            } //afterComplete
        }); //$(grid).jqGrid('editGridRow
    }//function EditCollectionItem (rowid, grid){

So in the above example if the operation was a failure you could show a message with a success = false or if the operation was completed but you wanted to pass some extra information to the user you could as well with sucess = true && showMessage = true.

This is a JSON example of an edit but the concepts and logic should be the same for XML and an add/delete operation.