• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
ankita sarma
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Bear,

I have edited my posts as suggested.


Thanks

 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
ankita sarma
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
thanks a lot Bear. It works :-)
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


Thanks to Rob as well.
 
We cannot change unless we survive, but we will not survive unless we change. Evolving tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic