soumission du formulaire jQuery avec succès et un message d'erreur

Question

Je suis en train de faire la soumission et validation formulaire en utilisant jQuery et du côté serveur, je reçois une réponse au format JSON ..

J'affiche le message dans une boîte de dialogue jQuery mais pas en mesure de montrer le message du serveur ....

Mon approche:

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

Mon balisage:

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

string JSON Je reçois si SPOG existait dans la base de données:

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

Mise à jour 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

Notes Comme @ Sam, vous devrez ajuster votre rappel de succès, et vous aurez besoin aussi d'ajuster votre HTML un peu.

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

Alors le changement 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

Ajoutez ce qui suit ci-dessus "succès": datatype: "json",

Puis changer succès à quelque chose comme:

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

Fondamentalement, vous devez;
a) Dites votre code que votre serveur sera de retour JSON (et il devrait donc eval)
b) Faites quelque chose avec ce JSON - par exemple retirer le message et l'ajouter à votre boîte de dialogue

S'il vous plaît comprendre que le code ci-dessus est seulement une suggestion et je l'ai pas testé!