Jeditable load function

Question

$(document).ready(function() { 
      $('#service .editable').editable('./saveService.php', { 
        callback : function(value, settings) {
        $("#service").load(location.href + " #service");
      }}); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../assets/bower/jeditable/jquery.jeditable.js"></script>
<table id="service" >
  <thead>
    <tr>
      <th>col1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class= "editable" id="myID">Text to modify and then load</td>
    </tr>
  </tbody>
</table>

My problem is : currently i can't modify multiple time my text. The first time, after edit, my text is reload, but the second time i can't re-edit my text. I suppose the binding between the "editable" function and my text is destroy after reload my text, it is right ?

Could you help me to solve this issue ?

Thanks in advance, Spiritus,

Answer 1

You're replacing the element the plugin is attached to.
When you replace the content of #service you remove the current .editable element, and even if you replace it with a new .editable element, the old one that had the plugin attached to it, is gone.

$('#service .editable').editable('./saveService.php', { 
//   ^^ that's the service element

    callback : function(value, settings) {
        $("#service").load(location.href + " #service");
           // ^^ that's the service elements content being replaced
    }
}); 

There's really no good fix for this, other than not replacing the elements every time something is edited. A not so good workaround would be to reattach the plugin on every call

function callback(value, settings) {
    $("#service").load(location.href + " #service", function() {
        $('#service .editable').editable('./saveService.php', {callback:callback});
    });
}

$('#service .editable').editable('./saveService.php', {callback:callback});