ansaurus

Question

Answer 1

A:

I tried to keep myself close to your original idea. I don't think it's a good idea to make the parent div a clickable zone to edit the contents.

You should add "edit" text links so the user doesn't mis click the div leading to undesired results.

The problem

The problem you had was the append itself. You need to create a "new" entity on the DOM to allow jQuery to deal with it. Also I fixed the "Cancel Edit" so that when you cancel it loops through the whole editable divs to hide the editable box AND restore the original data.

Second version that'll allow only 1 edit using a reference of an existent div.

Full code here

    $(document).ready(function(){
    var content = $('.rec_edit').html();
    var editing = false;
$('.edit').click(function() {
     if( editing == false ) {
      var theid = $(this).attr('id');
      var tis = "#"+theid;
      // We hide P, because it's the original, so when we hide the "editing" div
      // the original pops back in.
      $(tis + " p").hide("fast");
      // 
      $(tis).append( $('.rec_edit').show().html(content + theid) );
      editing = true;
     }
    return false;
});
$('#btnCancelEdit').click(function() {
    $('.rec_edit').each(function(){
     if( editing == true ) {
      // We get the parent id, so we can use it to display the hidden P to
      // restore the original.
      var parent = "#" + $(this).parent().get(0).id + " p";
      $(parent).show("fast");
      $(this).hide();
      editing = false;
      // $(this).remove();
     }
     });

    return false;
});
    });

kuroir 2009-07-20 12:22:42

thanks for the effort. It's not logical for me to re-create the div each time as its content is quite large. Instead I wish to hide/show it.the div is actually resides below the page independent of any of the elements that has the "edit" link by their side. my problem is when I call hide() the div gets removed from the DOM. I only want to hide it. I tried css('visibility', 'hidden') but no luck.Can it be that my edits are generated on the fly and I use the .live method to bind click event (as also seen from the code) ?

Emin 2009-07-20 14:33:36

That's weird. Hide is not supposed to remove it from the DOM. Emin, it would be easier for everyone if you can provide your whole code, including the HTML.

Randell 2009-07-20 14:35:28

@Rendell Benavidez: I second that.

kuroir 2009-07-20 16:39:49

@Emin : can the editable box appear more than one at the same time?

kuroir 2009-07-20 16:48:34

Answer 2

A:

Short answer: in your #btnCancelEdit click handler, change this:

$('.rec_edit').hide();

to this:

$('.rec_edit').hide().appendTo('body');

(Or wherever it originally is in markup, if not body.) Otherwise I think your call to empty() when setting up the editor is wiping it out.

Here's a full example that works for me (tweaked code to get around incomplete code, e.g. load_single_rec):

<html>
 <head>

  <script type='text/javascript' src='js/jquery-1.3.2.js'></script>

  <script type='text/javascript'>
   var editor;

   $(document).ready(function() {

    $('.edit').live('click', function() {
     var theid = $(this).attr('id');

     $('#' + theid).empty().append($('.rec_edit').show());
 /*
     if ($('#txt_nowediting_id').val() > 0) {
      load_single_rec($('#txt_nowediting_id').val());
     };
 */
     $('#txt_nowediting_id').val(theid);

     return false;
    });


    $('#btnCancelEdit').click(function() {
     $('.rec_edit').hide().appendTo('body');

     // load_single_rec($('#txt_nowediting_id').val());
     $('#' + $('#txt_nowediting_id').val()).text('edited!');
     return false;
    });
   });
  </script>

 </head>
 <body>
  <form>

   <div id='div1' class='edit' style='border: 2px solid #00f;' >
    Edit me
   </div>

   <div id='div2' class='edit' style='border: 2px solid #00f;' >
    Edit me too
   </div>

   <div class='rec_edit' style='display:none; border: 2px solid #f00;'>
    Editor
    <input type='button' id='btnCancelEdit' value='Cancel' />
   </div>

   <input type='hidden' id='txt_nowediting_id' />


  </form>
 </body>
</html>

Matt Winckler 2009-07-20 22:22:15

I updated your code slightly, and it works slightly better: http://jsbin.com/uniga (At http://jsbin.com/uniga/edit you can see and edit the code)

Stobor 2009-07-21 08:37:20

you were indeed right about appending to body after calling empty... thanks a lot!

Emin 2009-07-21 12:20:41

ansaurus

tags:

views:

answers:

jquery show and hide problem

The problem

Second version that'll allow only 1 edit using a reference of an existent div.

related questions