jQuery modulo di presentazione con successo e il messaggio di errore

Question

che sto facendo modulo di presentazione e validazione utilizzando jQuery e dal lato server sto ottenendo una risposta in formato JSON ..

Io sono la visualizzazione del messaggio in una finestra di dialogo jQuery ma non in grado di mostrare il messaggio dal server ....

Il mio approccio:

<script type="text/javascript">
//<![CDATA[
    $.validator.setDefaults({
    submitHandler: function() { 
        var spogName         = $("input#spogname").val();
        var spogDis            = $("input#spogdescription").val();
        var dataString         ='&spogName='+ spogName +'&spogDescription=' + spogDis;
        $.ajax({
            url: "/cpsb/spogMaster.do?method=addSpog",    
            type: "POST",        
            data: dataString,        
            cache: false,
            success: function() {  
                $("#dialog-message").dialog({
                    resizable:false,
                    height:180,
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $(this).dialog('close');
                        }
                    }
                });

               },   

           error: function() {
           }                    
        });
    },
    highlight: function(input) {
        $(input).addClass("ui-state-highlight");
    },
    unhighlight: function(input) {
        $(input).removeClass("ui-state-highlight");
    }
});

$(document).ready(function() {
    navMenu();
    $("#spogForm").validate({
        rules: {
            spogname:{
            required: true
            }
        },
        messages: {
            spogname: "Please enter the Spog Name"
        }
    });

    $(":submit").button();
});
//]]>
</script>

Il mio markup:

<div id="dialog-message" title="Spog Message" style="display:none;">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
         Spog added successfully!
    </p>
</div>
<div id="header"><jsp:include  page="../menu_v1.jsp"/></div>
<div id="mainContent">
<div id="spog_form">
  <form class="cmxform" id="spogForm" method="post" action="/cpsb/spogMaster.do?method=addSpog">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">ADD SPOG</legend>
        <p>
            <label for="spogname">Spog Name (required)</label>
            <input id="spogname" name="spogName" class="required ui-widget-content" minlength="2" />
        </p>
        <p>
            <label for="spogdescription">Spog Description </label>
            <input id="spogdescription" name="spogDescription" class="spogD ui-widget-content" />
        </p>

        <p>
            <button class="submit" type="submit">Submit</button>
        </p>
    </fieldset>
</form>
</div>
</div>
</body>

stringa JSON sto ottenendo se SPOG esisteva nel database:

{"messageId":"errorMessage","message":"spog found with Name 10000 Description nuts"}

Aggiornamento 1:

<script type="text/javascript">
//<![CDATA[
    $.validator.setDefaults({
    submitHandler: function() { 
        var spogName         = $("input#spogname").val();
        var spogDis            = $("input#spogdescription").val();
        $.ajax({
            url: "/cpsb/spogMaster.do?method=addSpog",    
            type: "POST",    
            datatype:'json',    
            data: {
                method:"addSpog",
                spogName:spogName,
                spogDescription:spogDis
            },    
            cache: false,
            success: function(data) {
              if ( data.messageId === 'errorMessage' ) {
                // server responded with an error, show the error placeholder
                // fill in the error message, and spawn the dialog
                $("#dialog-message")
                  .find('.success').hide().end()
                  .find('.error').show()
                    .find('.message').text( data.message ).end()
                    .end()
                  .dialog({
                    resizable:false,
                    height:180,
                    modal: true,
                    buttons: {
                      Ok: function() {
                        $(this).dialog('close');
                      }
                    }
                  });
              } else {
                // server liked it, show the success placeholder and spawn the dialog
                $("#dialog-message")
                  .find('.error').hide().end()
                  .find('.success').show().end()
                  .dialog({
                    resizable:false,
                    height:180,
                    modal: true,
                    buttons: {
                      Ok: function() {
                        $(this).dialog('close');
                      }
                    }
                  });
              }
            }
        });
    },
    highlight: function(input) {
        $(input).addClass("ui-state-highlight");
    },
    unhighlight: function(input) {
        $(input).removeClass("ui-state-highlight");
    }
});

$(document).ready(function() {
    navMenu();
    $("#spogForm").validate({
        rules: {
            spogname:{
            required: true
            }
        },
        messages: {
            spogname: "Please enter the Spog Name"
        }
    });


    $(":submit").button();
});
//]]>
</script>

Markup:

<div id="dialog-message" title="Spog Message" style="display:none;">
    <p class="success">
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
         Spog added successfully!
    </p>
    <p class="error">
        An error occurred while adding spog: 
        <span class="message"></span>
    </p>
</div>

Answer 1

Come note @ Sam, avrete bisogno di regolare la richiamata successo, e si sarebbe anche bisogno di regolare il codice HTML un po '.

<div id="dialog-message" title="Spog Message" style="display:none;">
    <p class="success">
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
         Spog added successfully!
    </p>
    <p class="error">
        An error occurred while adding spog: 
        <span class="message">placeholder</span>
    </p>
</div>

Poi il cambiamento JS ...

success: function(data) {
  if ( data.messageId && data.messageId === 'errorMessage' ) {
    // server responded with an error, show the error placeholder
    // fill in the error message, and spawn the dialog
    $("#dialog-message")
      .find('.success').hide().end()
      .find('.error').show()
        .find('.message').text( data.message ).end()
        .end()
      .dialog({
        resizable:false,
        height:180,
        modal: true,
        buttons: {
          Ok: function() {
            $(this).dialog('close');
          }
        }
      });
  } else {
    // server liked it, show the success placeholder and spawn the dialog
    $("#dialog-message")
      .find('.error').hide().end()
      .find('.success').show().end()
      .dialog({
        resizable:false,
        height:180,
        modal: true,
        buttons: {
          Ok: function() {
            $(this).dialog('close');
          }
        }
      });
  }
},

Answer 2

Aggiungere il seguente sopra "successo": datatype: "json",

Poi cambia successo a qualcosa di simile:

success: function(data) {  
    $("#dialog-message").append('<p>'+data.message+'</p>').dialog({
        resizable:false,
        height:180,
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog('close');
            }
        }
    });
},

Fondamentalmente è necessario;
a) Informi il codice che il vostro server sarà il ritorno JSON (e pertanto dovrebbe eval esso)
b) fare qualcosa con quella JSON - per esempio tirare fuori il messaggio e aggiungerlo alla tua finestra di dialogo

Vi preghiamo di comprendere che il codice di cui sopra è solo un suggerimento e non ho provato!