ajax - Loading template in a form grails

Question

I want to create a form that has fields (phone, email, password), see exact layout here. The form should display all as labels unless edit btn is clicked, then label will become textbox. Since grails button has no visibility/read only property I opted for remoteaction button. My prob is I can't seem to display all with in the form including the template I made (no unless I click edit btn, that is the time the label/text field shows) but not on first load.

templates: Email:

    <g:if test="${!isEditEmail}">
              <td id="email">${profileInstance?.email}</td></g:if>
        <g:else>
            <td><g:textField name="emailTxt" value="${profileInstance?.email}" />
  </td></g:else>

Phone

    <g:if test="${!isEditPhone}">
              <td id="email">${profileInstance?.phone}</td></g:if>
        <g:else>
            <td><g:textField name="emailTxt" value="${profileInstance?.phone}" />
            </td></g:else>

Snippet code from My GSP called "profile" for Phone:

    <th scope="row"><label for="profileEditPhone">Phone:</label></th>

     <td id="showPhoneText"></td>

    <td><g:actionSubmit id="btnEditPhone"  action="setPhoneTxtAreaVisible" update="showPhoneText" value="${message(code: 'default.button.edit.label', default: 'Edit')}" /></td>

  </tr>

here is my code:

def setPhoneTxtAreaVisible=
    {
        def employeeId= params.employeeId

        MySession session = MySession.getMySession(request, params.employeeId)
        isEditPhone=true
        profileInstance = session.profileInstance

        render(template:"/layouts/phoneProfile", model:[profileInstance:session.profileInstance, isEditPhone:true])


    }

this is working great but the output is the <td id="showPhoneText"></td> has no value or display in the GSP (profile) unless I click the button "btnEditPhone".

So I changed my code to:

def profile=
    {
        def employeeId= params.employeeId


    MySession session = MySession.getMySession(request, employeeId)

    //findAllByCmCaseIdCmCase
    def employee = Employee.get(employeeId as Long)
    def empUser = EmployeeUser.findByEmployeeIdEmployee(employee)
    profileInstance = new Profile();
    profileInstance.id=employeeId as Long
    profileInstance.userName  = empUser.useridUsers.username
    profileInstance.password = empUser.useridUsers.passwordText
    profileInstance.email = employee.emplEmailAddr
    profileInstance.employeeName = employee.formatFirstLastName()
    profileInstance.phone = employee.formattedEmplWorkTelNbr()
    session.profileInstance = profileInstance

    if(profileInstance)
    {

        render(template:"/layouts/phoneProfile", model:[profileInstance:session.profileInstance, isEditPhone:false])
    }

    return [profileInstance: profileInstance, mySession: session, isEditEmail:false]
}

-not working great, only renders the phone template.

So I changed my html code to this instead of using update

<tr>
        <th scope="row"><label for="profileEditPhone">Phone:</label></th>
           <td ><g:render template="/layouts/phoneProfile" /></td>

        <td> <g:submitToRemote action="setPhoneTxtAreaVisible" value="${message(code: 'default.button.edit.label', default: 'Edit')}"  /></td>
        <td>&nbsp;</td>

      </tr>

- not working as I want.

Question: How do I display the Profile page, with all the templates already there on FIRST LOAD without me having to click edit btn?