Create <TD> ids dynamically using javascript in JSP

Question

This is the situation, i have a table who is generated dynamically according to the results of the DB and i have an input field with calendar displayed using JQuery, my problem is that if i have multiple rows of results if i change the value of a date in for example 3rd row i see the value of first line to be changed.

I guess this is happening because in my JQuery function i get ElementByClass and not by ID, so i tihink i have to find a way to 1) create id for each row /td of results and then 2) for each row call JQUery function.

How can i do that?

Following the code:

<table border ="1">
                <tr>
                    <th>Project name</th>
                    <th>Project Description</th>
                    <th>Customer for this project</th>
                    <th>Project Amount</th>
                    <th>Project Start Date</th>
                    <th>Project End Date</th>
                    <th>Payment Method</th>
                    <th>Payment Action</th>


                </tr>
               <c:forEach items="${cpayments}" var="payment" >

                   <tr>
                    <form method="post" action="myController" onSubmit="return confirm('are you sure you want to update this record?')">
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectName()}" name="projectNameEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectDescription()}" name="projectDescriptionEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getFkCustomer().getCustomerName()}" name="customerNameEdit"/></td>

                        <td><input value="${payment.amount}" name="amount"/></td> 
                        <fmt:formatDate value="${payment.getPaymentId().getPaymentDate()}" 
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedStartDate" />
                        <fmt:formatDate value="${payment.paymentExpire}"  
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedExpireDate" />
                        <td><input value="${theFormattedStartDate}" id="payment_date" name="startDate" class="datepicker"/></td>
                        <td><input value="${theFormattedExpireDate}"   id="paymentToDate" name="endDate" class="datepicker"/></td>
                        <td><input value="${payment.paymentMethod}" name="paymentMethod" /></td>
                        <td><input value="${payment.getPaymentId().getMyaction().getActionName()}" name="paymentAction"/></td>
                        <td><input  name="edit" type="submit" value="Edit" style="background-color:green;font-weight:bold;color:white;" ></td>
                         <td><input  name="edit" type="submit" value="Delete" style="background-color:red;font-weight:bold;color:white;" ></td>
                         <input type="hidden" name="<%=WebParamsList.FROMPAGE%>" value="resultPage">


                       <input type="hidden" name="actionIdForEdit" value="${payment.getPaymentId().getMyaction().getActionId()}"> 
                       <input type="hidden" name="projectIdForEdit" value="${payment.getPaymentId().getMyproject().getProjectId()}">
                        <input type="hidden" name="<%=WebParamsList.ACTION_NAME%>" value="editProject">
                    </tr>
                    </form>



               </c:forEach>
            </table>

<script>

            $(document).ready(function() {
                $(".datepicker").datepicker();
            });


    </script>

provide your jQuery function as well.

Suryaprakash Pisay
– Suryaprakash Pisay

2013-08-22 10:26:58 +00:00
Commented Aug 22, 2013 at 10:26 — Suryaprakash Pisay
– Suryaprakash Pisay, Commented Aug 22, 2013 at 10:26

Suryaprakash Pisay · Accepted Answer · 2013-08-22 11:04:32Z

In Order to generate dynamic id's for each td put attribute varStatus="status" in c:forEach Loop.

Same name to the datePicker is the problem. you need to create dynamic ids for each datePicker .

Below is the modified code.

 <c:forEach items="${cpayments}" var="payment" varStatus="status">

                   <tr>
                    <form method="post" action="myController" onSubmit="return confirm('are you sure you want to update this record?')">
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectName()}" name="projectNameEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectDescription()}" name="projectDescriptionEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getFkCustomer().getCustomerName()}" name="customerNameEdit"/></td>

                        <td><input value="${payment.amount}" name="amount"/></td> 
                        <fmt:formatDate value="${payment.getPaymentId().getPaymentDate()}" 
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedStartDate" />
                        <fmt:formatDate value="${payment.paymentExpire}"  
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedExpireDate" />
                        <td><input value="${theFormattedStartDate}" id="payment_date${status.index}" name="startDate${status.index}" class="datepicker"/></td>
                        <td><input  value="${theFormattedExpireDate}"   id="paymentToDate${status.index}" name="endDate${status.index}" class="datepicker"/></td>
                        <td><input value="${payment.paymentMethod}" name="paymentMethod" /></td>
                        <td><input value="${payment.getPaymentId().getMyaction().getActionName()}" name="paymentAction"/></td>
                        <td><input  name="edit" type="submit" value="Edit" style="background-color:green;font-weight:bold;color:white;" ></td>
                         <td><input  name="edit" type="submit" value="Delete" style="background-color:red;font-weight:bold;color:white;" ></td>
                         <input type="hidden" name="<%=WebParamsList.FROMPAGE%>" value="resultPage">


                       <input type="hidden" name="actionIdForEdit" value="${payment.getPaymentId().getMyaction().getActionId()}"> 
                       <input type="hidden" name="projectIdForEdit" value="${payment.getPaymentId().getMyproject().getProjectId()}">
                        <input type="hidden" name="<%=WebParamsList.ACTION_NAME%>" value="editProject">
                    </tr>
                    </form>



               </c:forEach>

And your jQuery Selector should be

$("[id^=payment_date]").datepicker();
$("[id^=paymentToDate]").datepicker();

i tried, ofc, but i cannot !!! it says that i need 15 reputation... i am new to this site and i don't how to get these reputation points :(

Collectives™ on Stack Overflow

Create <TD> ids dynamically using javascript in JSP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related