2013-01-18 14 views
5

Sto utilizzando jqGrid per mostrare i dati in formato tabulare, utilizzando JSP e servlet.jqgrid come mostrare i messaggi lato server

EDIT

voglio mostrare gli errori da server, quando vengono eseguite operazioni come insert, update, delete. (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 Codice

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 

per esempio precedente

  • dopo inserting record da jqGrid, poi No message is shown nella griglia se il record è inserted successfully
  • error Status: 'Unauthorized'. Error code: 401 viene visualizzato se il servlet non riesce a inserire record nel database.

mia domanda è che:

  • dopo inserting record da jqGrid, se il record viene inserito allora come devo mostrare un messaggio di fornire le informazioni di utente che si inserisce i dati.
  • e come dovrei dare messaggio a utente che Error while inserting (che error code devo usare per questo?)

Grazie in anticipo .....

risposta

5

Ho suggerito in the old answer e in another one di utilizzare la riga della griglia nascosta esistente (tr.tinfo) per visualizzare informazioni che non sono errori.Poiché le risposte non sono ben note, ripeto qui le stesse informazioni, ma cercherò di spiegarle in modo più dettagliato.

Prima di tutto è importante capire quali elementi hanno il modulo Modifica/Aggiungi standard. Utilizzando strumenti di sviluppo di IE o Chrome, Firebug o molti altri strumenti si può facilmente scoprire che l'Add/modulo Modifica creato da jqGrid contiene due righe nascoste sulla parte superiore del modulo:

enter image description here

La prima la riga verrà utilizzata per impostazione predefinita come posizione per il messaggio di errore. Si può usare errorTextFormat per personalizzare un po 'le informazioni.

Se la risposta del server contiene errore codice di stato HTTP (> = 400), allora il callback errorTextFormat sarà chiamata ed è possibile utilizzare

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

o qualcosa di simile

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

per visualizzare il messaggio di errore come

enter image description here

Allo stesso modo, è possibile utilizzare la richiamata afterSubmit per visualizzare il messaggio di stato dopo aver inviato i dati modificati/aggiunti se la risposta del server ha esito positivo HTTP status code. L'attuazione di afterSubmit potrebbe essere di circa il seguente

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 
} 

Il codice viene visualizzato il messaggio di stato per 3 secondi solo abd utilizza quindi jQuery.slideUp animazione per nasconderlo. Sembrerà

enter image description here

Spero che sia quello che vi serve.

+0

grazie per la risposta (e +1), ci proverò oggi. – Bhushan

+0

@Bhushan: prego! – Oleg

+0

Ho aggiornato la mia domanda, dopo aver implementato il tuo codice, ora i messaggi sono mostrati in cima al modulo come mostrato nell'immagine, ma vengono mostrati solo i codici di stato, come quando sono inseriti con successo solo 'OK' è mostrato, e quando non è stato inserito quindi viene mostrato solo 'Not Found', ma non sono in grado di mostrare il messaggio' custom' inviato dal servlet in forma .. sto facendo un errore durante l'invio dell'errore da servlet in grid? ogni aiuto sarà apprezzato ... – Bhushan

3

ho fatto somthing simili in una chiamata di modifica al mio server quindi penso che funzionerebbe in modo molto simile ad un add.

Sul controller dopo una chiamata di modifica/cancellazione/aggiunta si determina se è presente un messaggio da trasmettere all'utente e, in caso affermativo, passarlo sulla griglia tramite il JSON (XML nel proprio caso).

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 

Nella tua jqGrid si dovrebbe avere il vostro modificare/cancellare/aggiungere funzioni:

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){ 

Così, nell'esempio di cui sopra, se l'operazione è stata un fallimento si potrebbe mostrare un messaggio con a success = false o se l'operazione è stata completata ma si desiderava passare alcune informazioni aggiuntive all'utente si potrebbe pure con sucess = true & & showMessage = true.

Questo è un esempio JSON di una modifica ma i concetti e la logica dovrebbero essere gli stessi per XML e un'operazione di aggiunta/eliminazione.