fonction de la charge Jeditable

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>

Mon problème est: actuellement je ne peux pas modifier plusieurs fois mon texte. La première fois, après l'édition, mon texte est rechargé, mais la deuxième fois je ne peux pas rééditer mon texte. Je suppose que la liaison entre la fonction "éditable" et mon texte est détruite après rechargement de mon texte, c'est juste?

Pourriez-vous m'aider à résoudre ce problème?

Merci à l'avance, Spiritus,

Answer 1

Vous remplacez l'élément le plug-in est attaché.
Lorsque vous remplacez le contenu de #service, vous supprimez l'élément .editable actuel, et même si vous le remplacez par un nouvel élément .editable, l'ancien auquel le plug-in était associé est parti.

$('#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 
    } 
}); 

Il n'y a vraiment aucune bonne solution pour cela, autre que de ne pas remplacer les éléments chaque fois que quelque chose est édité. Une solution de contournement moins bonne serait de réattacher le plugin à chaque appel

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

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