CODEWITHSUNDEEP
jquerygrails
biniam
biniam

Reputation: 8199

Edit/Update Page Implementation in JQuery and Grails

I have a page with a form where a user enters first name and last name. When the 'Edit' button is clicked, I want the button's name to change to 'Update' and the textboxes to become editable.

Then, when the user finishes editing the fields, I want to call a controller method in Grails.

What I want is to call the controller method WHEN 'UPDATE' BUTTON IS CLICKED (NOT WHEN 'EDIT' BUTTON IS CLICKED).

Here is what I have implemented so far.

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

Upvotes: 0

Views: 192

Answers (2)

biniam
biniam

Reputation: 8199

Here is the solution!

I put the edit button outside the tag and when the edit button is clicked, it calls a JQuery function.

The update button is inside tag and it calls a controller action.

It works fine and I think this is the best way of implementing this.

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

Upvotes: 0

tissei
tissei

Reputation: 111

if you dont want it to be asynchronous, you can put the edit buttom outside your form and when you click on it, you hide the button and show your update button that is inside your form, after just submit the info to the controller and action set on the form.

Upvotes: 1

Related Questions