On Click Paragraph to Textarea after it Update the Text in Paragraph

Question

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); function editable_text_clicked() { var div_text = $(this).html(); var text_div = $("<textarea />"); text_div.val(div_text); $(this).replaceWith(text_div); text_div.focus(); text_div.blur(text_divBlurred); } function blurred(argument) { var html = $(this).val(); var viewableText = $(".editable_text p"); viewableText.html(html); $(this).replaceWith(viewableText); // setup the click event for this new div viewableText.click(editable_text_clicked); } $(document).ready(function() { $(".btn").click( function(){ $("editable_text").(editable_text_clicked); }) }); 

 p, textarea{ margin: 20px; padding: 15px; border: 1px solid #ccc; width: 300px; } .btns{ width:300px; margin:20px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Google JS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="editable_text"> <p> Lorem Ipsum Content Comes here... </p> <div class="btns"> <a href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a> </div> </div> 

I'm poor in JS, but sill wanted to learn it, my task for today is to create a To Do List , So here's what I wanted Exactly. When I click on pencil icon, the p in .editable_text should edit, and after editing when I click on okay the text should be appended to the p in .editable_text

here's the fiddle Link, https://jsfiddle.net/zeasts/nfL7qcak/8/

Answer 1

Update the code as mentioned below. as user will click on edit button - textarea will show with content and as user will click on save p tag will display with content It will work, You can see here - https://jsfiddle.net/mf8wp3wf/ :

<div class="editable_text">
<div id="dynamic-div">
  <p id="content-data">
    Lorem Ipsum Content Comes here...
  </p>
</div>

<div class="btns">
    <a href="#edit" class="btn edit-text btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" class="btn update-text btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
</div>


$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });

  $(".edit-text").click( function(){ 
     var content = $("#content-data").html();
     $("#dynamic-div").html("<textarea id='content-area'>"+content+"</textarea>");
  });

  $(".update-text").click( function(){ 
    var text_date = $("#content-area").val();
    $("#dynamic-div").html("<p id='content-data'>"+text_date+"</p>");
  });


});

Answer 2

a fast solution without functions. Add blurring and disable buttons onclick events.

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); $(document).ready(function() { $("#edit").click( function(){ if($('.editable_text').css('display')=='block'){ var text=$('.editable_text').text(); $('.editable_text').css('display','none'); $('#textarea_text').css('display','block').val(text).focus(); } }) $("#update").click( function(){ if($('#textarea_text').css('display')=='block'){ var val=$('#textarea_text').val(); $('.editable_text').css('display','block').text(val); $('#textarea_text').css('display','none'); } }) }); 

 p, textarea{ margin: 20px; padding: 15px; border: 1px solid #ccc; width: 300px; } .btns{ width:300px; margin:20px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Google JS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div> <p class="editable_text">Lorem Ipsum Content Comes here... </p> <textarea id="textarea_text" style="display:none"></textarea> </div> <div class="btns"> <a id="edit" href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a> <a id="update" href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a> </div> 

Answer 3

You have some errors in your code check your console.

As for the edits, this is how you can do it:

$("[href='#edit']").click(function(){
    $(".editable_text").attr("contenteditable", "true").focus();
});

$("[href='#update']").click(function(){
    $(".editable_text").attr("contenteditable", "false");
});

Here is ur updated JSFiddle

In my demo I identified the elements by their href attribute. You can always add a new class to them or use unique IDs.

Also note that when you want to refer to an element by class, dont forget the dot infront $(".editable_text")

Answer 4

it can be very simple, check this out:

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); $('#update').on('click', function(){ $('#result').append('<li>' + $('#myText').val() + '</li>'); $('#myText').val("").attr("disabled", "disabled"); }); $('#edit').on('mouseup', function(){ console.log( $('#myText') ); $('#myText').attr("disabled", false).focus().select(); }); 

 input{ margin: 20px; padding: 15px; border: 1px solid #ccc; width: 300px; } .btns{ width:300px; margin:20px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Google JS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="editable_text"> <input type='text' disabled id="myText" placeholder="Lorem Ipsum Content Comes here..."/> <div class="btns"> <a href="#edit" id="edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#update" id="update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a> </div> <br><br><br><br> TODO LIST: <div id="result"></div> </div>