New row in InPlaceEditor Component not editable

Question

I'm new to JQuery and tapestry.... I mean to add a new row to my InPlaceEditor and then make it editable using the following:

$(document).ready(function () {
    $("#addnewrow").click(function () {

        var prompt = "Please enter new data";
        var oTable = $("#datatable").dataTable();
        var a = oTable.fnAddData([prompt , "Yes" ]);
        var erow = oTable.fnSettings().aoData[ a[0] ].nTr
        oTable.fnUpdate( erow.getElementsByTagName("td")[0].innerText, erow, 0, false );
        oTable.fnUpdate( erow.getElementsByTagName("td")[1].innerText, erow, 1, false );
        oTable.fnDraw();

         return false;
    });
});

But the new row I just added is not editable!

Reading around the internet I found the solutions to the problem: (http://bit.ly/KNf92c)

Add the jEditable event controller to the new row
Use jQuery's live() option ( http://docs.jquery.com/Events/live ) to assign the editable event to row
Reinitialize the jeditable after i added a row.

How can I do this the tapestry way?

what do you mean "the tapestry way" .. your question only describes your use of jquery... — pstanton, Jul 01 '12 at 22:32
do you mean something like this: http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/formloop1 — pstanton, Jul 04 '12 at 00:42

score 0 · Answer 1 · answered Jul 03 '12 at 15:41

Okay after yet more researching I see I was way off. I apologize for being unclear. I really want to post my solution because I am seeing the same problem with no concrete solution in many places all over the internet.

The following allows me to add a new row to my datatable AND make it editable with JEditable AND have my tapestry page class handle the processing of the newly added data via the Tapestry-JQuery InPlaceEditor (which I realize isn't exclusive to tapestry).

Also of note is if I have a page class called foo.java and in my page class a function called "bar", the tapestry way to reference this via a link is "./foo:bar".

Cheers

In clientprequalificationlist.js:

$(document).ready(function () {
$("#addnewrow").click(function () {

    //Create a new row for our datatable
    var prompt = "Please enter new data";
    var oTable = $("#datatable").dataTable();
    var rowData = oTable.fnAddData([prompt , "Yes" ]);

    //Make new row editable
    var oSettings = oTable.fnSettings();
    $('td', oSettings.aoData[ rowData[0] ].nTr).editable('./clientprequalificationlist:setPrequalification' , {
        callback:function (value, settings) {
                $(this).editable("destroy");
        },
        "type" : "text",
        "tooltip" : "Click to edit...",
        submit : "Save",
        cancel:"Cancel",
        "onblur":"cancel",
        "submitdata":function (value, settings) {
            return {
                "row_id":this.parentNode.getAttribute('id'),
                "column":oTable.fnGetPosition(this)[2]
            };
        }
    });

    return false;
});
});

In clientprequalificationlist.java:

@OnEvent(component = "Prequalification", value = InPlaceEditor.SAVE_EVENT)
void setPrequalification(int id, String value)
{
    if( value.equals("Please enter new data"))
    {
        alertManager.alert(Duration.TRANSIENT, Severity.INFO, "The new client prequalification was not saved. Please enter new data.");
        return;
    }
    ClientPrequalification clientPrequalification = companyLogic.getClientPrequalificationByID(id);

    if (clientPrequalification == null){
        clientPrequalification =  new ClientPrequalification();
    }

    clientPrequalification.setPrequalification(value);
    companyLogic.storeClientPrequalification(clientPrequalification);
}

In clientprequalificationlist.tml:

<t:form t:id="Prequal" t:autofocus="true">
<t:alerts/>
<t:jquery.datatable
        model="Model"
        source="Source"
        row="row"
        options="Options"
        mode="literal:false"
        exclude="clientPrequalificationId">

    <p:prequalificationCell>
        <div t:id="prequalification"
             t:type="jquery/inPlaceEditor"
             value="row.prequalification"
             t:context="row.clientPrequalificationId"/>
    </p:prequalificationCell>

    <p:enabledCell>
        <t:eventlink t:id="toggle" context="row.clientPrequalificationId">${row.enabled}</t:eventlink>
    </p:enabledCell>
</t:jquery.datatable>

</t:form>

 <a class="btn btn-primary" href="#" id="addnewrow"><i class="icon-lock icon-white"/>  Add Client Prequalification</a>

New row in InPlaceEditor Component not editable

1 Answers1