Providing edit and delete button for each row of a table using display tag

I am using display tag to display data in a table on a JSP (using struts 2). Now I want to give two links for each row, one for editing & one for deleting the row.

My jsp structure and what I am currently trying is :

<s:url id="editReport" action="editReport" />
<sd:div href="%{editReport}" listenTopics="editReport" formId="actionForm" showLoadingText="false" preload="false">
    <s:url id="updLists" action="updLists" />
    <sd:div href="%{updLists}" listenTopics="updLists" formId="enterDayReport" showLoadingText="false" preload="false">
        <s:form id="enterDayReport" action="enterDayReport">
            <sd:autocompleter  label="Customer " name="customer" list="customerList"  valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <sd:autocompleter  label="Contact "  name="contact"  list="contactList"   valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <s:select          label="Stage "    name="stage"    list="stageList"     headerKey="0" headerValue="Select" />
            <s:select          label="Type "     name="type"     list="typeList"      headerKey="0" headerValue="Select" />
            <sd:datetimepicker label="Date"      name="date"     formatLength="small" displayFormat="dd - MMM - yyyy"/>
            <s:textarea        label="Summary"   name="summary"  cols="40" rows="10"/>
            <s:submit          value="Save Report"/>
        </s:form>
    </sd:div>
</sd:div>

<s:url id="deleteReport" action="deleteReport" />
<sd:div href="%{deleteReport}" listenTopics="deleteReport" formId="actionForm" showLoadingText="false" preload="false">
    <disp:table name="dayReportsList" export="true" class="dataTable">
        <disp:column property="contactCode" title="Contact"/>
        <disp:column property="customerCode" title="Customer"/>
        <disp:column property="stage" title="Stage"/>
        <disp:column property="type" title="Type"/>
        <disp:column property="summary" title="Summary"/>
        <disp:column property="reportDate" title="Date" format="{0,date,dd-MMM-yyyy}" />
        <disp:column property="rowId" href="%{editReport}" paramId="rowID" paramProperty="rowId" title="Action">
            <s:form id="actionForm" name="actionForm">
                <s:hidden id="rowId" name="rowId" value="%{rowId}"/>  // This is not getting populated.
                <s:a onclick="dojo.event.topic.publish('editReport')">Edit<s:property value="rowId"/></s:a><br>
                <s:a onclick="dojo.event.topic.publish('deleteReport')">Delete</s:a>
            </s:form>
        </disp:column>
    </disp:table>
</sd:div>

The problem I am facing here is that, the name of the form associated with every row in the display tag is same. So when I try to access the rowId variable in my action class, I get the value of the first row's rowId only, no matter the button of which row is clicked.

I have seen some examples on stack overflow and google which use URL rewriting, but I don't want to use that.

Please advise.

Thanks!!

Answers


I think it boils down to how you publish events using dojo. I don't know well how dojo works, but your buttons do

dojo.event.topic.publish('editReport')

so I don't see how the subscriber to the "editReport" event could know which row you're trying to delete, and thus which row it must delete.

The documentation for publish shows that an argument may be passed to the publish function. Pass the rowId as argument to the subscribe function, and use this argument in the function editing/deleting the row.

Edit:

The end of the page http://struts.apache.org/2.1.8/docs/ajax-div-template.html shows an example which dynamically changes the href of a div and then refreshes the div. I would use a similar strategy: Have a unique form (rather than one form per row) to edit (or delete) the report in your page. Have each row link publish an event to a topic with the row ID as argument. Have the JavaScript function listening to the topic dynamically change the value of the hidden rowId field of the unique form, and then tells the div to refresh itself.


For those still stuck on what is to be done, here is what I finally did to get it working.

The JSP:

<s:url id="editReport" action="editReport" />
<sd:div href="%{editReport}" listenTopics="editReport" formId="actionForm" showLoadingText="false" preload="false">
    <s:url id="updLists" action="updLists" />
    <sd:div href="%{updLists}" listenTopics="updLists" formId="enterDayReport" showLoadingText="false" preload="false">
        <s:form id="enterDayReport" action="enterDayReport">
            <sd:autocompleter  label="Customer " name="customer" list="customerList"  valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <sd:autocompleter  label="Contact "  name="contact"  list="contactList"   valueNotifyTopics="updLists" autoComplete="false" searchType="substring"/>
            <s:select          label="Stage "    name="stage"    list="stageList"     headerKey="0" headerValue="Select" />
            <s:select          label="Type "     name="type"     list="typeList"      headerKey="0" headerValue="Select" />
            <sd:datetimepicker label="Date"      name="date"     formatLength="small" displayFormat="dd - MMM - yyyy"/>
            <s:textarea        label="Summary"   name="summary"  cols="40" rows="10"/>
            <s:hidden          id="filedOnDate"  name="filedOnDate"/>
            <s:submit          value="Save Report"/>
        </s:form>
    </sd:div>
</sd:div>

<s:url id="deleteReport" action="deleteReport" />
<sd:div href="%{deleteReport}" listenTopics="deleteReport" formId="actionForm"  showLoadingText="false" refreshOnShow="true" preload="false">
    <s:form id="actionForm" name="actionForm" action="">
        <disp:table uid="dayReport" name="dayReportsList" export="true" class="dataTable">
            <disp:column property="contactCode" title="Contact"/>
            <disp:column property="customerCode" title="Customer"/>
            <disp:column property="stage" title="Stage"/>
            <disp:column property="type" title="Type"/>
            <disp:column property="summary" title="Summary"/>
            <disp:column property="reportDate" title="Date" format="{0,date,dd-MMM-yyyy}" />
            <disp:column title="Action">
                <s:a href="" onclick="editEvent(event,%{#attr.dayReport.rowId});">Edit</s:a><br>
                <s:a href="" onclick="deleteEvent(event,%{#attr.dayReport.rowId});">Delete</s:a>
            </disp:column>
        </disp:table>
        <s:hidden id="rowId" name="rowId"/>
    </s:form>
</sd:div>

The JS file:

function editEvent(e,rowId)
{
    dojo.byId('rowId').value=rowId;
    dojo.event.topic.publish('editReport');
}

function deleteEvent(e,rowId)
{
    dojo.byId('rowId').value=rowId;
    dojo.event.topic.publish('deleteReport');
}

This is what is happening here:

When the edit or delete is clicked, the respective function in js is called (and the rowId is passed along). Each function first sets the value of the hidden field to the rowId value (which comes as a parameter to the function), then it punlishes a topic. When the topic is published the repective div calls an action and gets refreshed with new contents. Here I have mentioned the form id of the form in the div tag, so that the action has the value of the hidden field, which has been set to rowId in javascript.

Hope this Helps

Kanishk


Need Your Help

Asp.Net validation check at client side

asp.net validation

I am validating data at client side in asp.net validator by using following code snipet.

Validating the Numerical Order of 2D Array

java arrays

So, I have a 2D array with columns that are supposed to be sorted in numerical order. However, I want to make sure that the user's input conforms to this rule. This piece of code was my attempt to

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.