Представление формы JQuery с Sucess и сообщением об ошибке

Question

Я делаю представление и проверку формы, используя jQuery и с сторон серверов, я получаю ответ в формате JSON ..

Я показываю сообщение в диалоговом окне jQuery, но не в состоянии показать сообщение с сервера ....

Мой подход:

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

Моя разметка:

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

JSON String Я получаю, если Spog существует в базе данных:

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

Обновление 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>

Разметка:

<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

Как отмечает @SAM, вам нужно отрегулировать ваш вызов успеха, и вам также нужно немного настроить свой HTML.

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

Тогда меняются 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

Добавьте следующее выше «успех»: datatype: "json",

Затем измените успех к чему-то вроде:

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

В основном вам нужно;
а) Скажите свой код, что ваш сервер будет возвращать JSON (и поэтому его следует оценить)
б) Сделайте что-нибудь с этим JSON - например, вытащите сообщение и добавьте его в свой диалоговый окно

Пожалуйста, поймите, что вышеуказанный код - это только предложение, и я не проверил его!