File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes editing a textbox generated dynamically inside an iterator on a click of Edit button. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "editing a textbox generated dynamically inside an iterator on a click of Edit button." Watch "editing a textbox generated dynamically inside an iterator on a click of Edit button." New topic
Author

editing a textbox generated dynamically inside an iterator on a click of Edit button.

ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
I dont know this question may have been asked 1000 of times but m not sure how to do it

I am new to spring and jquery

So here is My question

I have text boxes rendered dynamically inside an iterator tag. the text boxes are by default disabled. I have an edit and delete button on each row.

Now on click of edit button I want that the textbox correspondind to that row which was selected by edit button should get enabled. I have no clue how to do it. I someon could paste a code It would be really appreciated.

I want to do something like this

<input typt="button" onclick=enableTextBox("itr.index")>

and in jquery

document.getElementById(textbox which i want to make editable).disabled = false;


My main problem is how to pass the id of selected textbox and make only this text box editable.

please help.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

First of all, the fact that Spring is involved is irrelevant. What jQuery, or any JavaScript, "sees" is what is sent to the browser. Not the server-side markup.

So when writing jQuery code (or any JavaScript) you need to look at the browser-side elements with the browser's development tool to see what you are working with.

With jQuery, you would not use the onclick attribute, nor would you use getElementById().

In fact, I wouldn't fool around with ids at all. Just create a jQuery selector that selects all of the text fields that you wish to make editable. If it's all of the text fields in the table, then that would be as easy as: $('#tableName :text')

If you only want to make certain text fields editable, assign a class name to them, say editable, and then use that class name to select them: $('.editable:text')

Then use the click() convenience method to bind the click handler to them: $('.editable:text').click({ $(this).prop('disabled',false); });

Be sure that the above code is in a ready handler.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
I was Asking how can I recognise which text box is selcted I mean how should I pass the parameter in edit button to reognise individual text box inside iterator tag
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

This is a common novice mistake. You don't need to individually identify the text boxes. The element that is the target of the event is available within the click handler, so there's no need to have to obtain it again.

Your thread title and the post are in contradiction though: do you want to change the state of the text fields when the text field is clicked upon, or when something else is clicked upon (an edit button?)

If the former, then I've already given you the answer.

If the latter, then that's pretty easy to deal with; just a tad more code to find the text field that's related to the edit button.

So which is it?
ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
Thank you Bear for your reply.

Its the later one on the click of the edit button i want to make that text box enabled for editing

as of now i have written this kind of code

<c:foreach items in arrayList var="itr">

<input type="text" [I want to recognise this text box]>
<input type="button"[on the click of this button] val="itr.index">

I was thinking that I can recognise it if I pass value of iterator.

I am not able to make jquery code for doing something like this

input:text[the selected one].disabled=false

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

I assume that the text field and edit buttons are in a common parent? For example, if they're in a table, they'll both be in the same <tr> element, right?

If they're not in a table, be sure that there is a common parent. It can be identified by a class name if necessary.

I'll use this as an example; let's say that the field and button are in a <div> with class editable-group.

Place the click handler on the button, and within the handler use the .closest() method to find the common parent and use it as the context of the jQuery selection:



You can change the details to match your actual structure.
ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
hay Bear,

please have a look on this code , I was trying it in jsfiddle
;


for the sake of trying I have made this div <td> and <input> of same class

Please help me. I dont know what am I doing wrong.
In both the cases all the alerts are showing up. So code is not wrong but there is something I am missing

and one more question what does :text (as marked in bold above) means?

ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
Hie Bear ,

I was trying this another one but still having trouble in this one when I am clicking on a particular button instead of enabling the text box corresponding to the same Tr both are getting enabled



Effectively I have two text boxes with two edit buttons. but on the click of button with id =button-2 both are getting enabled.

It would be very greatful if you could shed some light on what I am doing wrong here

Thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66

Please repost your code and UseCodeTags, and make sure that you use proper indentation. Unformatted code is too hard to read.

Whatever you do, you always have to make sure that the HTML is valid. In at least one of your examples above it is clearly not. (div right inside a tr, for example)
ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
Hi Bear,

I have edited my posts as suggested.


Thanks

Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

ankita sarma wrote:I was trying this another one but still having trouble in this one when I am clicking on a particular button instead of enabling the text box corresponding to the same Tr both are getting enabled

Because you're not paying attention to what Bear is telling you. Here is what he said:
Bear Bibeault wrote:This is a common novice mistake. You don't need to individually identify the text boxes. The element that is the target of the event is available within the click handler, so there's no need to have to obtain it again.

Then this is what you're doing:
ankita sarma wrote:


Ask yourself: will this selector produce different results when a different button is clicked? The whole point of using closest() is to find elements relevant to the event target, if you pick from $("#mappings tr") for every click then you will select the same elements every time. Instead use it like this:

Here is a complete example. Note how the click handler depends not on any IDs or classes, but on the structure of the markup.

Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
ankita sarma
Greenhorn

Joined: Nov 13, 2012
Posts: 25
thanks a lot Bear. It works :-)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61106
    
  66



Thanks to Rob as well.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: editing a textbox generated dynamically inside an iterator on a click of Edit button.