Javascript inline edit, comment annuler la modification pour avoir des données originales?

Question

J'ai données

<tr id="row_1"> 
    <td id="td_1_1">Text 1</td> 
    <td id="td_2_1">Text 2</td> 
    <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr> 

puis en javascript

en fonction EditRow je fais un peu ajax et de récupérer TDs et remplacer [$(row_id).html(html)] TDs de la ligne. Tout cela fonctionne bien. Mais j'ai besoin d'un bouton d'annulation, en cliquant sur ce qui ramène les TDs d'origine (c'est-à-dire ... pas de boîtes de saisie). Des idées, comment réaliser cette fonctionnalité? Ai-je besoin de copier le html avant modification de la ligne dans une variable, puis, plus tard, annuler remplacer les zones de saisie html? Merci de votre aide.

EDIT

En outre, si l'utilisateur clique sur un autre endroit sur la page, il devrait considérer comme annuler et apporter les données d'origine en arrière. Comment lier cette action?

Answer 1

Tout d'abord - regardez dans les frameworks Javascript. Le type de fonctionnalité dont vous parlez est suffisamment avancé pour que, si vous voulez vraiment que votre code fonctionne correctement dans tous les navigateurs, vous ne devriez pas le faire vous-même. Il vous permet également de garder votre HTML libre de JavaScript inline laid et ce qui est considéré comme une mauvaise pratique.Cela étant dit, voici une pensée:

Avez-vous envisagé d'avoir deux lignes par élément, un de la ligne dans "modifier" mode "et l'un de la ligne en" mode normal "? Vous pouvez personnaliser les lignes "mode édition" pour qu'elles soient masquées par défaut, et lorsqu'un internaute clique sur le lien d'édition, vous pouvez masquer cette ligne et afficher celle d'édition. Ce serait vraiment plus facile que de faire un appel AJAX pour obtenir le formulaire d'édition.

EDIT

Here's some code to get you started:

function editRow(row_id, callback) { 
    // you would get this dynamically through ajax, thus why we need the callback 
    var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>'; 
    callback(html); 
} 

$('a.edit', '#data').click(function() { 
    var $tr = $(this).closest('tr'); 
    var id = $tr.attr('id').split('_').pop(); 
    var edit_row = '#edit_' + id; 
    if($(edit_row).length == 1) { // edit row already exists 
     $tr.hide(); 
     $(edit_row).show(); 
    } else { // doesn't exist, fetch it 
     editRow(id, function(html) { 
      $tr.hide(); 
      $tr.after(html); 
     }); 
    } 
    return false; 
}); 

$(window).click(function(e) { 
    $('tr.edit:visible').each(function() { 
     var $tr = $(e.target).closest('tr'); 
     var id = $(this).attr('id').split('_').pop(); 
     console.log(e.target, $tr, this); 
     if($tr.attr('id') != this.id) { 
      $(this).hide(); 
      $('#row_' + id).show(); 
     } 
    }); 
}); 

Je constate probablement qu'il ya beaucoup de plugins jQuery qui font beaucoup de cela pour vous, et en fonction des besoins de votre application peut-être mieux d'aller chercher la rangée à chaque fois, de ne pas les chercher du tout, etc. C'est juste une idée approximative de ce que vous pourriez avoir à faire pour réaliser ce que vous voulez, et le reste dépend de vous. :)

Answer 2

Je pense que pour obtenir la fonctionnalité initiale en utilisant jQuery, vous pouvez regarder le plugin jEditable. Ceci est un plugin très fonctionnel qui vous permet de cliquer sur du texte et créer une zone modifiable et annuler etc. Je suppose qu'une fois que l'utilisateur clique sur OK ou Enregistrer que vous n'avez pas besoin de revenir à l'original, sa seule modification est que est un problème. jEditable prend soin de cela.