Grails,使用ajax以模态提交表单

时间:2013-07-01 04:56:53

标签: ajax forms grails twitter-bootstrap modal-dialog

现在我可以在twitter bootstrap模式中呈现注册表单,在其中输入数据,如果数据没有通过约束,表单将正确呈现并说明约束不通过(通过错误消息)

但问题是,我正在使用的formRemote最终“传递”,即使约束未经过验证且我获得的视图包含错误消息。

基本上,我创建了一个模态,然后将data-remote设置为包含此代码的gsp:

<%@ page import="security.User" %>
<html>
    <head>
        <r:layoutResources />
        <g:set var="entityName" value="${message(code: 'user.label', default: 'User')}" />
        <title><g:message code="default.create.label" args="[entityName]" /></title>
    </head>
    <body>
        <g:hasErrors bean="${userInstance}">
        <ul class="errors" role="alert">
            <g:eachError bean="${userInstance}" var="error">
            <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
            </g:eachError>
        </ul>
        </g:hasErrors>
        <g:formRemote name="ajaxSignupForm" url="[action:'save',controller:'user']" update="signupModal .modal-body">
            <div class="fieldcontain ${hasErrors(bean: userInstance, field: 'username', 'error')} required">
                <label for="username">
                    <g:message code="user.username.label" default="Username" />
                    <span class="required-indicator">*</span>
                </label>
                <g:textField name="username" required="" value="${userInstance?.username}"/>
            </div>

            <div class="fieldcontain ${hasErrors(bean: userInstance, field: 'password', 'error')} required">
                <label for="password">
                    <g:message code="user.password.label" default="Password" />
                    <span class="required-indicator">*</span>
                </label>
                <g:passwordField name="password" required="" value="${userInstance?.password}"/>
            </div>

            <div class="fieldcontain ${hasErrors(bean: userInstance, field: 'confirmPassword', 'error')} required">
                <label for="confirmPassword">
                    <g:message code="user.confirmPassword.label" default="Confirm Password" />
                    <span class="required-indicator">*</span>
                </label>
                <g:passwordField name="confirmPassword" required="" value="${userInstance?.confirmPassword}"/>
            </div>
            <g:submitButton name="create" class="btn btn-success" value="Create Account" />
        </g:formRemote>


            <div style='display: none; text-align: left;' id='signupMessage'></div>
        <r:layoutResources />
    </body>
</html>

update="signupModal .modal-body"块正在更新此gsp所包含的模态。我知道这是一些令人讨厌的逻辑,所以我能做些什么来使这更好并且实际上正确执行?

1 个答案:

答案 0 :(得分:0)

我更喜欢将formRemote包含在div中。然后设置update =“formParent”。

E.g。

<div id="formParent" ... update="signupModal">
   <g:formRemote
   ...
</div>