dynamically create input elements based on clicked element

Question

My question title isn't the best one, but here is the deal:

I have six paragraphs. Three of them contain text, and other three contain links, like this:

<p>Text 1</><p>Link one</>
<p>Text 2</><p>Link two</>
<p>Text 3</><p>Link three</>

Every link calls a jQuery function which should create an HTML input element instead of text in corresponding paragraph (eg: clicking Link three should create text input element in paragraph which contains Text 3).

On second click, the same link should create an AJAX call with some parameters, which my Django view will pick up, and act accordingly.

Currently, I have this:

$('.column a').click(function ()
{
    oldValue = $('#email').text()
    $('#email').html('<input type="text" value="'+oldValue+'"/>')
    $('a#changeMail').removeClass('button').addClass('success button')
});

and it works for one paragraph pair. How can I make it work for any "paragraph pair"? Thank you in advance.

Check out jEditable. I'm not totally sure what you're looking for but it is very customizable. appelsiini.net/projects/jeditable — Danwilliger
– Danwilliger, Commented Mar 22, 2013 at 16:39

cernunnos · Accepted Answer · 2013-03-22 16:35:52Z

1

With that structure this should work (heres a fiddle http://jsfiddle.net/uBZRW/2/)

$('.column a').click(function ()
{
    var targetParaphaph = $(this).parent().prev(); // This gets the previous <p>
    var value = targetParaphaph.text();
    targetParaphaph.html("<input type='text' value='"+value+"'/>");
    $(this).addClass('success'); // this results in "button success" class
});

Edit: I edited the original answer with multiple fixes to the code, fiddle contains a working example, if your structure is different you can implement a similar logic using jquery .parent(), .parents([selector]), .next(), .prev(), etc

jQuery DOM Traversing: http://api.jquery.com/category/traversing/

edited Mar 22, 2013 at 16:35

answered Mar 22, 2013 at 16:30

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ivica Over a year ago

Thank you, it works. My amateurism made me forget to mention those paragraphs are in different divs. I'll edit the question with the real code, from my page. +1 for you either way.

cernunnos Over a year ago

Check the DOM traversing link, you should find all you need to know to adapt the logic to your code

Collectives™ on Stack Overflow

dynamically create input elements based on clicked element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related