CODEWITHSUNDEEP
javascriptjquerytextareaedit
Sjmon
Sjmon

Reputation: 553

jquery edit comments

Can you explain the methods to make a jquery edit system where I click on a click and then it show a textarea and a edit bottom.

What is the best methods to do it?

Right now I have this:

<div id="frame">
<div id="data">bla bla bla</div>

<a class='edit' href=''>edit</a>
</div>

<script>
$(function() {
    $('#frame a').click(function()
    {
        var data = $('#data').text();

        alert(data);
        console.log('press edit');
    })
})
</script>

Upvotes: 0

Views: 1298

Answers (2)

iGEL
iGEL

Reputation: 17412

I think, you're almost there. If data to edit are very simple, you could just do something like:


$(function() {
    $('#frame a').click(function()
    {
        $('#frame').html('<form action="..." method="post"><textarea name="data">' + 
          $('#data').text() + 
          '</textarea><input type="submit" value="Edit"></form>');
    })
})

If the data to edit are more complex, you might consider to load them via AJAX or put the whole form to edit inside the html and hide it by default. If the user clicks the edit button, you just need to show it.

Upvotes: 0

Brandon
Brandon

Reputation: 1442

I think the way most sites do this, including StackOverflow, is by using the built in "design mode" capabilities of browsers.

Here is an Open Source version of such an editor.

I modified your example, such that clicking on the edit link will make the "bla bla bla" text editable.

Notice two things:

  1. The body tag has a new attribute, designMode, set to "on".
  2. To enable editing, the data div has to have the contentEditbale attribute set to true.

enter image description here

Upvotes: 1

Related Questions