CODEWITHSUNDEEP
javascriptjqueryjeditable
w.k
w.k

Reputation: 8386

How to restore jeditable functionality?

I try to figure out, how to restore Jeditable fields after removing cells from table?

I have table where are

  1. rows with one cell (colspan)
  2. rows with many cells (rows with ID-s)

Rows with ID have a cell which contains some text and editable span-element (with Jeditable). Now when I click on button, I want to remove from rows with ID all cells and replace it with cell which contains only the span-element (which should remain editable).

Problem is: I can't restore editability for those recreated spans.

I tried different approaches, most simple should running $( '.editable' ).editable('enable'), but I can't figure out, why it does not working.

One of my efforts is like this:

$(document).ready(function(){
  $("#remove").click(function() {
    $("table#original tr").each( function( index, row ) {
      if ( $( row ).attr( 'id' ) ) {
        var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
        $( row ).children( 'td' ).remove();
        $("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
        $( '.editable' ).editable('enable');
      }
    });
  });

  $('.editable').editable('echo.php', {
    type      : 'text',
    tooltip   : 'Just click...'
  });

});

Made a Fiddle too, hope it helps to better understand my problem.

Upvotes: 2

Views: 153

Answers (2)

dfsq
dfsq

Reputation: 193301

You don't need to recreate editable field in new td cell. In fact you should not remove it in the first place. Proper way of handling this from perspective of performance and optimization is to create new td and move already initialized editable element to it. In this case you don't have to worry about reinitizing it one more time.

So your code will become:

$(document).ready(function () {

    $("#remove").click(function () {
        $("table#original tr").each(function (index, row) {
            if (row.id) {
                var editableField = $(row).find('.editable');
                var newTd = $("<td colspan='3'></td>").append(editableField);
                $(row).empty().append(newTd);
            }
        });
    });

    $('.editable').editable('echo.php', {
        type: 'text',
        tooltip: 'Just click...'
    });

});

Demo: http://jsfiddle.net/jxtnd1g4/

Or a little shorter variation for the same thing:

$("#remove").click(function () {
    $("table#original tr[id]").html(function() {
        var editable = $(this).find('.editable');
        return $('<td colspan="3"></td>').append(editable);
    });
});

Upvotes: 1

SlashmanX
SlashmanX

Reputation: 2611

Problem

The issue seems to be that the editable object is being destroyed and when you attempt to re-enable it, it doesn't keep the same options so it fails.

Solution:

Abstract the options to a variable (for easier changes going forward)

var editableOptions = {
    type      : 'text',
    tooltip   : 'Just click...'
  };
var editableURL = 'echo.php';

Update the .editable() call to use these new variables:

$(document).ready(function(){
  $("#remove").click(function() {
    $("table#original tr").each( function( index, row ) {
      if ( $( row ).attr( 'id' ) ) {
        var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
        $( row ).children( 'td' ).remove();
        $("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
        $( '.editable' ).editable(editableURL, editableOptions)
      }
    });
  });

  $('.editable').editable(editableURL, editableOptions);
});

Working JSFiddle

Upvotes: 1

Related Questions