2013-01-18 27 views
5

Używam jqGrid do wyświetlania danych w formacie tabelarycznym, przy użyciu JSP i servlet.jqgrid, jak wyświetlać komunikaty po stronie serwera

EDIT

chcę pokazać błędy z serwera, gdy operacje takie jak insert, update, delete są wykonywane. (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;}}}, 
        {}) ; 

kod serwletu

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 

w powyższym przykładzie

  • po inserting płyty z jqGrid, następnie No message is shown w sieci, jeśli rekord jest
  • error Status: 'Unauthorized'. Error code: 401 jest wyświetlany, jeśli serwlet nie może wstawić rekordu do bazy danych.

moje pytanie jest, że:

  • po inserting rekordu z jqGrid, czy rekord jest wstawiany potem jak mam pokazać wiadomość podając informację użytkownikowi, że dane jest włożona.
  • i jak mam dać wiadomość do użytkownika, który Error while inserting (co error code należy użyć do tego?)

góry dzięki .....

Odpowiedz

5

Zaproponowałem, aby w the old answer i another one użyć istniejącego ukrytego wiersza formularza siatki (tr.tinfo), aby wyświetlić informacje, które nie są błędem.Ponieważ odpowiedzi nie są dobrze znane, powtarzam te same informacje tutaj, ale postaram się wyjaśnić wszystko bardziej szczegółowo.

Przede wszystkim ważne jest, aby zrozumieć, które elementy mają standardowy formularz Edycja/Dodaj. Korzystanie z narzędzia dewelopera IE lub Chrome Firebug lub wielu innych narzędzi można łatwo dowiedzieć się, że Dodawanie/Edycja postać stworzona przez jqGrid zawiera dwa ukryte wiersze na górze formularza:

enter image description here

Pierwszy wiersz będzie domyślnie używany jako miejsce na komunikat o błędzie. Można użyć errorTextFormat, aby trochę dostosować informacje.

Jeśli odpowiedź serwera zawiera błędu HTTP kod stanu (> = 400) a następnie zwrotna errorTextFormat będą nazwie i można korzystać

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

lub coś podobnego

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

aby wyświetlić komunikat o błędzie jak

enter image description here

W ten sam sposób można użyć wywołania zwrotnego afterSubmit, aby wyświetlić komunikat o statusie po przesłaniu edytowanych/dodanych danych, jeśli odpowiedź serwera zawiera pomyślną HTTP status code. Realizacja afterSubmit może być o następującym

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 
} 

Kod zostanie wyświetlony komunikat o statusie 3 sek tylko abd następnie wykorzystuje jQuery.slideUp animację, aby ją ukryć. Będzie to wyglądać

enter image description here

Mam nadzieję, że to, co trzeba.

+0

dzięki za odpowiedź (i +1), spróbuję tego już dziś. – Bhushan

+0

@Bhushan: Nie ma za co! – Oleg

+0

Mam zaktualizowane moje pytanie, po zaimplementowaniu twojego kodu, teraz wiadomości są pokazane na górze formularza, jak pokazano na obrazku, ale pokazany jest tylko kod statusu, tak jak w przypadku wstawienia z powodzeniem pokazane jest tylko 'OK', a gdy nie udało się wstawić wtedy wyświetlane jest tylko 'Not Found', ale nie mogę wyświetlić komunikatu' custom' wysłanego przez serwlet w formularzu. Czy robię błąd podczas wysyłania błędu z serwletu do siatki? każda pomoc zostanie doceniona ... – Bhushan

3

Zrobiłem somthing podobnych na wezwanie edycji na mój serwer, więc myślę, że działałoby to w sposób bardzo podobny do dodania.

Na kontrolerze po wywołaniu edycji/usunięcia/dodania można ustalić, czy jest komunikat do przekazania użytkownikowi, a jeśli tak, to przekazać go przez JSON (XML w twoim przypadku) z powrotem do siatki.

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 

w twojej jqGrid byś mieć edytować/usunąć/dodać funkcję:

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

więc w powyższym przykładzie, jeśli operacja zakończyła się niepowodzeniem można pokazać komunikat z a success = false lub jeśli operacja została zakończona, ale użytkownik chciał przekazać użytkownikowi dodatkowe informacje, które można również uzyskać, podając sucess = true & & showMessage = true.

To jest przykład edycji JSON, ale koncepcje i logika powinny być takie same dla XML i operacji dodawania/usuwania.