The Grails modal dialog box does not appear when the model template is null

advertisements

I am trying to make a reusable template that I can use in both cases, when the model provided to it is null, and when it isn't. I don't know if it is best practice to try and use a template for two different cases but I just thought it might be neat to reuse code. When a model is provided, text fields will be auto populated. When it isn't they should be blank. This template is inside a modal dialog that I am using jQuery TOOLS library to show.

The problem I am having is that the modal dialog doesn't pop up when the model provided to the template is null. The desired result is that when a model is provided, text fields will be auto populated allowing the user to edit and save the record, whereas if a model isn't provided, the text fields will be blank and the user can fill them in to create a new record. But I can't even get the modal div to show when the model is blank. Shouldn't it still show with the static content at least? Like the text field labels and the text fields themselves? Here is the the markup concerned:

<div class = "modal" id = "recordDetails">
        <div id="details"></div>
        <button id="save" class="close" type="button"/> Save </button>
        <button id="cancel" class="close" type="button"> Cancel </button>
        <div id="error_messages"></div>
    </div>

"details" is the div into which I am rendering my template using this controller action:

def displayRecordDetails() {
        println "<><><> Displaying record details."
        def recordToEdit = IndividualRecord.findWhere(batchID: selectedBatch.id, uniqueId: params.uniqueId, secondaryId: params.secondaryId)
        println "<><>< Record to edit: " + recordToEdit
        render(template: 'detailsScreen', model: [recordToEdit: recordToEdit])
    }

and here is the template itself that is rendered into the "details" div:

<h2><u> Edit Record Details</u></h2>
<div id=container>
    <g:formRemote name="editIndivRecForm" url="[controller: 'customer', action:'saveEditedIndividualRecord']">
        <div style="text-align: left">
            <label>Unique ID:</label>&nbsp<g:textField name="uniqueId" disabled="true" style="border-radius: 5px" value="${recordToEdit ? recordToEdit.uniqueId : '' }"></g:textField><br>
            <label>Secondary ID:</label>&nbsp<g:textField name="secondaryId" disabled="true" style="border-radius: 5px" value="${recordToEdit ? recordToEdit.secondaryId : '' }"></g:textField><br>
        </div>
        <hr>
        <div style="text-align: left">
            <label>First Name:</label>&nbsp<g:textField name="firstName" style ="border-radius: 5px" value="${recordToEdit ? recordToEdit.names.first().firstName : ''}"></g:textField>&nbsp&nbsp
            <label>Middle Name:</label>&nbsp<g:textField name="middleName" style ="border-radius: 5px" value="${recordToEdit ? recordToEdit.names.first().middleName : ''}"></g:textField>&nbsp&nbsp
            <label>Last Name:</label>&nbsp<g:textField name="lastName" style ="border-radius: 5px" value="${recordToEdit ? recordToEdit.names.first().lastName : ''}"></g:textField><br>
            <label>Date of birth(mm-dd-yyyy):</label>&nbsp<g:textField name="dateOfBirth" style ="border-radius: 5px"
                    value="${recordToEdit?.dateOfBirth ? Date.parse( 'EEE MMM d HH:mm:ss Z yyyy', recordToEdit.dateOfBirth).format( 'dd-MM-yyy' ) : ''}"></g:textField><br>
        </div>
        <hr>
        <div style="text-align: left">
            <label>Citizenship(two letter country code):</label>&nbsp<g:textField name="citizenship" style ="border-radius: 5px" value="${recordToEdit ? recordToEdit.citizenship : ''}"></g:textField><br>
            <label>Citizenship Proof:</label>&nbsp<g:textField name="citizenComments" style ="border-radius: 5px" value="${recordToEdit ? recordToEdit.citizenshipComments : ''}"></g:textField><br>
            <label>Phone(aaa-bbb-cccc):</label>&nbsp<g:textField name="phone" style ="border-radius: 5px" value="${recordToEdit?.telephones?.getAt( 0 ) ?: ''}"></g:textField><br>
        </div>
        <hr>
        <div style="text-align: left">
            <label>Address:</label>&nbsp<g:textField name="address" style ="border-radius: 5px"
                    value="${recordToEdit?.addresses?.first()?.address ? recordToEdit.addresses.first().address : ''}"></g:textField><br>
            <label>City or Town:</label>&nbsp<g:textField name="cityTown" style ="border-radius: 5px"
                    value="${recordToEdit?.addresses?.first()?.cityTown ? recordToEdit.addresses.first().cityTown : ''}"></g:textField><br>
            <label>Country(two letter country code):</label>&nbsp<g:textField name="country" style ="border-radius: 5px"
                    value="${recordToEdit?.addresses?.first()?.countryCode ? recordToEdit.addresses.first().countryCode : ''}"></g:textField><br>
        </div>
        <hr>
        <label>Comments:</label><br>
        <g:textArea name="generalComments" rows="5" cols="50" value="${recordToEdit?.generalComments}"/><br>
        <g:submitButton name="submit"/>
    </g:formRemote>
</div>

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

        $('#cancel').click(function () {
            $('#editIndivRecForm').reset;
        });

      //    $('#submit').click(function () {
            // $('.modalInput').overlay().close();
      //    });

        $('#save').click(function () {
            console.log('save');
            $("#submit").trigger("click");
            $('#editIndivRecForm').reset;

        });
    });
</script>

<style>
    #uniqueId {
        width: 90%;
    }

    #submit {
        visibility: hidden;
    }
</style>

The two cases that launch this modal are when the 'edit' icon-button is pressed on any row of a table to edit that record (in this case model is provided). Or when the 'new' button is pressed when new record creation is desired(model not provided). See photo below.


Your 'new' button should look like this:

<button id = "new" class = "modalInput" rel = "#recordDetails"> New </button>