Проверка формы Grails JQuery Ajax - PullRequest
       0

Проверка формы Grails JQuery Ajax

8 голосов
/ 11 октября 2011

У меня есть модальное диалоговое окно, в котором я загружаю форму из gsp, и я изо всех сил пытаюсь найти правильное решение для формы на основе ajax с проверкой JSON вкл.сообщение об успешном завершении, например сообщение о флеш-области:

$('#calendar_form').live('click', function () {
        $.modal({
            ajax: './form'
            , title: '${message(code:'calendar.main.addAppointment')}'
            , overlayClose: true
        });
    });

В этой форме у меня есть следующий JS:

$(document).ready(function() {
    $('#form1').submit(function() {

        $.ajax({
            type: 'POST',
            url: '${createLink(action:'post')}',
            data: $("#form1").serialize(),
            success: function(result) {
                alert(result);
            }
        });
    });
});

Я возвращаю ответ JSON, если он успешен, и когда происходит ошибкаМне нужен Ajax, иначе мой модальный диалог исчезает из-за нового запроса.

Итак, вот мои вопросы:

  • Как я реагирую на сбои, которые происходят во время моей проверки в моем контроллере?
  • Какие коды ошибок http нужно использовать для проверки ошибок в моем контроллере?
  • Как обновить определенные поля сообщениями об ошибках в моей форме?
  • Какобновить флэш-часть моей страницы для отображения сообщения об успехе?
  • Как можно обновить другие части страницы после успеха?

Спасибо!

Ответы [ 2 ]

19 голосов
/ 11 октября 2011

Есть много разных способов сделать это и, возможно, 1 или более плагинов, чтобы вы могли работать. Однако я покажу вам, как я вообще с этим справляюсь. У меня есть объект, который выглядит следующим образом ...

class AjaxPostResponse {
  boolean success
  String message
  String html
  def domainObject
  def errors = [:] 
}

Это объект, который я отображаю как JSON. Таким образом, если есть ошибки проверки, успех становится ложным, и я добавляю все ошибки в карту ошибок. Я делаю это в сервисе, и этот метод выглядит так:

def preparePostResponse(domainInstance) {
    def g = grailsApplication.mainContext.getBean('org.codehaus.groovy.grails.plugins.web.taglib.ApplicationTagLib')
    def postResponse = new AjaxPostResponse(domainObject: domainInstance)
    if (domainInstance.hasErrors()) {
      g.eachError(bean: domainInstance) {
        postResponse.errors."${it.field}" = g.message(error: it)
      }
      postResponse.success = false
      postResponse.message = "There was an error"
    } else {
      postResponse.success = true
      postResponse.message = "Success"
    }
    return postResponse
}

Так что мой контроллер выглядит примерно так

def save = {
  def someObjInstance = new SomeObj(params)
  someObjInstance.save(flush:true)
  render myService.preparePostResponse(someObjInstance) as JSON
}

В моем клиентском коде я делаю что-то вроде этого (используя плагин формы jQuery, но это также будет работать с универсальным методом $ .ajax / $ .post / $ .get ...

$(formElement).ajaxSubmit({
    dataType: 'json',
    success: function(jsonData) {
      if (jsonData.success) {
        // do good stuff
      } else {
        // bad stuff happened
        showErrors(jsonData.errors);
      }
    }
});

И моя функция showErrors

function showErrors(errors, element) {
    var errorList = $("<ul>");
    for (field in errors) {
        errorList.append("<li>" + errors[field] + "</li>")
        $('input[name=' + field + ']').addClass('error');
    }
    if (!element) {
        $(".errors").html("").append(errorList).show(500);
    } else {
        $(element).html("").append(errorList).show(500);
    }
}

Надеюсь, это поможет.

2 голосов
/ 14 мая 2012

Принятый ответ хорош, и я за сервис-ориентированный подход. Однако с контроллерами Ajax я считаю, что иногда требования очень просты, и обработка ошибок и постоянство могут быть сделаны прямо в контроллере. Хороший вкладчик для добавления ваших приятных ошибок i18n в коллекцию:

if (!yourdomain.validate())
 {
     errors.addAll(yourdomain.errors.allErrors.collect {message(error: it)})
 } else {
     yourdomain.save(); //etc . . .
}

Затем верните JSON следующим образом

render(contentType: "text/json") {
     if (errors)
     {
         success = 'false'
         errorList = errors
     } else {
         success = 'true'
         //otherstuff
     }
}

И ваш JavaScript (Grails 2 содержит ошибку документации, поэтому используйте 'data', а не 'e', ​​если вы используете JQuery по умолчанию.

Позвони своему Аяксу

<g:formRemote /*or remoteLink */ ...your URL, etc... onSuccess="doResponse(data)">
<div class="alert" style="display: none" id="error"></div>

И обработать ответ

<g:javascript>
        function doResponse(data) {
            if (data.success == 'true') {
                //success stuff
            } else {
                var errorList = $('<ul class="errors">');
                for (var i = 0; i < data.errorList.length; i++) {
                    errorList.append('<li>' + data.errorList[i] + "</li>");
                }

                $('#error').html(errorList);
                $('#error').show();
            }

        }
   </g:javascript>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...