Question

我有一个页面，其中包含用户输入名字和姓氏的表单。当编辑＆＃39;单击按钮，我希望按钮的名称更改为“更新”按钮。和文本框变得可编辑。

然后，当用户完成编辑字段时，我想在Grails中调用控制器方法。

我想要的是调用控制器方法WHEN＆＃39; UPDATE＆＃39;按钮被点击（不是在编辑＆＃39;按钮被点击的时候）。

这是我到目前为止所实施的内容。

<div>
    <g:if test="${customerInstance?.firstName}">
        First Name:
        <g:textField name="firstName" value="${customerInstance?.firstName}" disabled='disabled' class='editableField'/>
    </g:if>

    <g:if test="${customerInstance?.lastName}">
        Last Name:
        <g:textField name="lastName" value="${customerInstance?.lastName}" disabled='disabled' class='editableField'/>
    </g:if>
</div>

<div>
    <g:form>
        <fieldset class="buttons">
            <g:submitButton id="editButton" name="edit" value="Edit"/>
        </fieldset>
    </g:form>
</div>


<script>
    $(document).ready(function(){

        $('#editButton').click(function(){
            $('.editableField').prop('disabled', false);
            $('#editButton').val('Update Profile');
        });
    });
</script>

Answer 1

如果您不希望它是异步的，您可以将编辑按钮放在表单之外，当您单击它时，您隐藏按钮并显示表单内的更新按钮，只需将信息提交给在表格上设置控制器和动作。

Answer 2

这是解决方案！

我将编辑按钮放在标签之外，当单击编辑按钮时，它会调用JQuery函数。

更新按钮位于标签内部，并调用控制器操作。

它工作正常，我认为这是实现这一目标的最佳方式。

<script>
   $(document).ready(function(){

        // Updating Profile
        $('#editProfile').click(function(){

           // Make fields editable
           $('.editableField').prop('disabled', false);

           $('.editableField').css("background-color", "yellow");

           // hide the edit button div
           $('#updateProfileDiv').show();

           // show the update button div
           $('#editProfileDiv').hide();
        }); 
   });
</script>


<!-- Inside the body tag-->
<g:form action="updateProfile" >
     <div id="one">
       <g:if test="${customerInstance?.firstName}">
           <div class="fieldcontain">
               <label for="firstName">
                   <g:message code="admin.customer.profile.firstName.label" default="First Name" />:
               </label>
               <g:textField name="firstName" value="${customerInstance?.firstName}"    disabled='disabled' class='notEditableField'/>
           </div>
       </g:if>

       <g:if test="${customerInstance?.lastName}">
           <div class="fieldcontain">
                <label for="lastName">
                      <g:message code="admin.customer.profile.lastName.label"  default="Last Name" />:
                </label>
                <g:textField name="lastName" value="${customerInstance?.lastName}" disabled='disabled' class='notEditableField'/>
           </div>
       </g:if>

       <div id="updateProfileDiv" style="display:none">
           <fieldset class="buttons">
               <g:hiddenField name="id" value="${customerInstance?.id}" />

               <g:submitButton class="edit" name="updateProfile" 
      value="${message(code: 'admin.customer.profile.update.profile.button.label', default: 'Update Profile')}"/>
          </fieldset>
       </div>

</g:form>  <!-- end of g:form tag-->

<div id="editProfileDiv">
    <fieldset class="buttons">
       <g:submitButton class="edit" id="editProfile" name="editProfile" 
    value="${message(code: 'admin.customer.profile.edit.profile.button.label', default: 'Edit Profile')}"/>
   </fieldset>
</div>

在JQuery和Grails中编辑/更新页面实现

2 个答案: