How to dynamically change the id of a text element inside iterate logic in JSP?

Question

Here is the code I used:

<% int  number=0 %>  
<logic:iterate name="sample" id="sample1" property="lstWaferRequests" indexId="rowid"> 
<tr>
     <% number= (rowid.intValue())+1;%> 
<td>
    <html-el:text name="sample1" property="strExpDate" styleId='<%="Date"+number%>'/>   
</td>

<script>
    var x=document.getElementById("<%="Date"+number%>");
</script>

<a href="javascript:show_calendar(x,'');">
    <img src="images/calendar.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
</td>
</tr>
</logic:iterate>

I tried to increment a variable(number) and add it to the id of sample1 textboxbut the id is not changing for the next iteration. I checked it using the Inspect Element option in IE11.

I used setatttribute() method in javascript to set ID but I got an error that,

object does not support setattribute method.

I need to change the ID of the text box which stores the date value(sample1) dynamically since I need to pass it as an argument to show_calendar method.

Please advise.

Thank You :) I will try that but is there a way to change the argument which is been passed to the JavaScript method dynamically?? — Tommy, Apr 05 '16 at 12:47
I found the calendar script in this URL http://www.javascriptkit.com/script/script2/timestamp.shtml? — Tommy, Apr 05 '16 at 12:56
So you want to pass `name of element` and `value` in `show_calendar`? — Vinoth Krishnan, Apr 05 '16 at 13:01

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

I have added class to your textbox and anchortag.

From your link, I get to know that you have to pass the name attribute of textbox not id.

Hence I added dynamic names. This you can achieve by strExpDate<%=number%>. But I recommend using JSTL instead of scriptlets. See java expert BalusC post How to avoid Java code in JSP files? for details.

Update : In your logic iterate, you have to change like this

<% int number=1 %>  
<logic:iterate name="sample" id="sample1" property="lstWaferRequests" > 
    <tr>
        <td>
            <html-el:text name="strExpDate<%=number%>" property="strExpDate" styleClass="dates" />   
        </td>
        <td>
            <a class="test" href="#">
                <img src="images/calendar.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
            </a>
        </td>
    </tr>
     <% number++; %>
</logic:iterate>

In your script find the clicked anchor tag and nearest textbox with class dates. I used jQuery library, since you tagged it.

$(document).ready(function() {
    $(".test").click(function(e) {
        var value = $(e.target).closest('tr').find('.dates').val();
        var name = $(e.target).closest('tr').find('.dates').attr('name');
        alert("Name : "+name+" Value : "+value);

        // You can call show_calendar() from here by passing name and value.
    });
});

See the Demo in fiddle. Let me know if any clarification, Hope this helps.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 05 '16 at 13:38

Vinoth Krishnan

2,925
6
29
34

Thank you for this :) But I am not predefining the number of text boxes to be added. I am adding it dynamically by calling a javacript method on the click of a add row button :( – Tommy Apr 05 '16 at 13:46
You don't have to predefine the number of textboxes anywhere. For stimulating your issue i used 5 rows with textboxes. This function will work with any number of rows. Hope I have mentioned it my answer. – Vinoth Krishnan Apr 05 '16 at 13:47
Thank you :) Could you please tell me what is the use of href="#" here? How it will trigger the desired jquery code? – Tommy Apr 05 '16 at 14:29
See [What is href=“#” and why is it used?](http://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used) for the `href=“#”` details. But here `href` does nothing. It will work without that. See [**Updated Demo**](https://jsfiddle.net/vinzykrish/m6grjat4/4/). I have created all the rows dynamically. – Vinoth Krishnan Apr 05 '16 at 14:36
Consider do a [Upvote](http://stackoverflow.com/help/why-vote) or [accept as answer](http://stackoverflow.com/help/accepted-answer), it can be useful to others. – Vinoth Krishnan Apr 05 '16 at 14:42
Understood. Thank You but If I use dynamic value for the property attribute like this property="strExpDate<%=number%>" or like this property='<%="strExpDate"+number%>' I get a JSP exception. If I use a static value for the property attribute the exception is gone. – Tommy Apr 05 '16 at 14:45
My mistake, use name instead. Property should be available in your action form. – Vinoth Krishnan Apr 05 '16 at 14:52
For some reason the name of the text is not getting changed; its strExpDate1 for the iterated rows as well; so when I click on the calendar in the first row the calendar is shown but when I click on the calendar image in the other rows; the hyperlink does not show the calendar but just takes the control to the beginning of the page. I get an error message in the console: The value of the property 'show_calendar' is null or undefined, not a Function object. I must be doing something wrong but I am not able to figure out. Please advise. – Tommy Apr 06 '16 at 05:09
Hope you need to check your logic iterate tag. – Vinoth Krishnan Apr 06 '16 at 13:57
See the update part again, I used simple logic for increment the value. Now you will get different name values. – Vinoth Krishnan Apr 07 '16 at 06:54

score 0 · Answer 2 · answered Apr 22 '16 at 05:30

0

Convert the number variable into an string and concatenate to the indexId. Then again cast back to int. It should work

answered Apr 22 '16 at 05:30

Bhugy

711
2
8
23

How to dynamically change the id of a text element inside iterate logic in JSP?

2 Answers2