Question

So, the _form.gsp template associated with my create.gsp creates an initial table from a template for the row as follows:

<table id="myTable">
<!-- define table headers here -->
<g:each var="i" in="${1..5}">
    <g:render template="tableRow" model="['i': i]" />
</g:each>
</table>

What I’d like to do is add a button or a link underneath that table that let’s you add five more rows, while keeping all the data you’ve entered in the form so far.

I can see how that’s possible in “pure” javascript, but I’d basically have to repeat the _myTable.gsp HTML in my javascript file. I’d like to avoid that (DRY, etc.).

How can I do that?

Edit
So, I tried Gregg’s solution (below). Here’s what I came up with.

The Controller has an action:

def addMoreRows() {
    println params
    def i = params.rowNumber + 1
    def j = i+5
    println "i is set to " + i
    render(template: "foapRow", bean:i, var:i, model: ['rowStart': i, 'rowEnd': j])
    }

The create.gsp page calls the _form.gsp as normal, adding a rowStart and a rowEnd to the model.

create.gsp

<g:render template="form" model="['userId':userId, 'rowStart':1, 'rowEnd':5]"/>

*_form.gsp*, in turn, passes those parameters on to the row template, and creates a link to call the above controller action. It also has the javascript Gregg recommended:

<script type="text/javascript">
    $("#addRowsLink").on("click", function(e) {
        e.preventDefault();
            $.get("/Controller/addMoreRows", function(html) {
                $("#theTableInQuestion>tbody").append(html);
            });
        });
    </script>
    <table>
    ...
        <g:render template="tableRow" model="['rowStart':1, 'rowEnd':5]"/>
    </table>
    <g:remoteLink id="addRowsLink" action="addMoreRows" update="theTableInQuestion" onSuccess="addRows(#theTableInQuestion, data, textStatus)" params="['rowNumber':data]">Add More Rows</g:remoteLink>

The *_tableRow.gsp* begins and ends with:

<g:each var="i" in="${rowStart..rowEnd}">
    <tr>
    ...
    </tr>
</g:each>

From a previous attempt, I have this function in my included javascript file:

function addRows(tableId, rowCode, status) {
    $(tableId + ' tr:last').after(rowCode);
}

Right now, when I click the “Add More Rows” link, I still get taken to a new page, and it only has one row on it.

Answer 1

One possible solution. You’re going to need to change your template so it does the looping:

GSP:

<table id="myTable">
<tbody>
    <g:render template="tableRows" model="[loopCount:loopCount, moreData:moreData]" />
</tbody>
</table>

Template:

<g:each in="${loopCount}" var="idx">
  <tr>
     <td>.....</td>
     ......
  </tr>
</g:each>

JavaScript:

$("#someButtonId").on("click", function(e) {
  e.preventDefault();
  $.get("/controller/someAction", function(html) {
    $("#myTable>tbody").append(html);
  });
});

Controller:

def someAction = {
  // logic here
  render template: "tableRows", model="[loopCount: 5, moreData:moreData]"
}

You could also submit all the data in your table to the server every time and refresh the entire page, adding logic to loop over some variable number of rows. But you would need to collect all that data on the server and make sure it gets put back in the request.

There’s probably a dozen ways to do this so don’t be surprised if you get that many answers. :o)