jqgrid how to show server side messages

java, javascript, jqgrid, response, servlets

Solution

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.

Problem

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.....

Original source

Related problems