Question

I’m struggling with it for some time with no results. I want data entered in a form and submitted to be rendered as a new row of a table being on the same page (without the page reload). What I currently have is an item model with several fields,
a controller with saveItem action:

public static void saveItem(@Valid SoldItem item) {...

, and of course the form:

<tr class="itemNew">
    <td>
        <input type="image" id="saveItem" name="&{'Save'}" alt="&{'Save'}" height="16" src="/public/images/001_06.png" form="itemsTable"/>
        <a href="#/cancelEdits"><image id="cancelEdits" src="/public/images/001_05.png" alt="&{'Cancel'}" title="&{'Cancel'}" height="16"></a>
    </td>

    <td>
        <div class="item">
            <input class="itemDesc" type="text" size="30" name="item.item.name" placeholder="&{'item.name'}" />
        </div>
        <div class="item">
            <textarea class="itemDesc" rows="2" cols="30" name="item.item.description" placeholder="&{'item.description'}" ></textarea>
        </div>
    </td>

….

with some JavaScript:

    this.post('#/saveItem', function (context) {
        var item_def = new Sammy.Object();
        context.log('saveItem - params = ' + this.params);
        context.log('saveItem - form_fields = {');
        //for ( var item in this.params.keys()) {
        var items = this.params.keys(true);
        for ( var i = 0; i < items.length; i++) {
            var item = items[i];
            context.log('item: ' + item);
            if(item.match(/^item\./)) {
                item_def[':'+ item] = this.params[item];
            }
        }
        context.log('}');
        context.log('item_def: ' + item_def);
        var action = #{jsAction @Invoices.saveItem(item_def) /};
        context.log('action: ' + action({item: item_def}));
        this.partial(action({item: item_def}));
    });

The latter is a Sammy.js fragment but this seems to be irrelevant to the case. What I get is totally nothing. Here is the sample of the last two log entries:

[Fri Jun 10 2011 01:30:51] item_def: Sammy.Object: {":item.item.name": aaa,":item.item.description": dsfsd,":item.retailPrice": dsfs,":item.rebate": sdf,":item.quantity": dsf,":item.vatRate": d,":item.notes": ds}
[Fri Jun 10 2011 01:30:51 ] action: /invoices/saveitem

The documentation of jsAction does not cover such issue, and I couldn’t find any example, so please help me with it.

Answer 1

So the solution I came up with is:

    this.post('#/saveItem', function (context) {
        var items = this.params.toHash();
        var action = #{jsAction @Invoices.saveItem() /};
        this.send($.post, action(), items)
            .then(function(contents) {
                this.swap(contents);
            });
    });

Some explanation I’ve found on the playframework group. When posting from a form there is no need to create full query URL. All the parameters should be sent as the post body. The above example shows use of Sammy.js framework (within Play! framework) and it works pretty well.