web-dev-qa-db-fra.com

Comment puis-je "réinitialiser" <div> à son état d'origine après l'avoir modifié par JavaScript?

J'ai une DIV avec une forme dedans. Lorsque les utilisateurs envoient le formulaire et que celui-ci est envoyé avec succès, je le remplace par un simple message "Tout va bien maintenant":

$("#some_div").html("Yeah all good mate!");

Existe-t-il un bon moyen de "réinitialiser" la div à son "état d'origine" conformément au code HTML avec lequel elle est arrivée? Je ne peux que penser à faire quelque chose comme ça:

//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//Push the state back
$("#some_div").html(originalState);

Ça n'a pas l'air très élégant - je suppose qu'il y a une meilleure solution pour ça, non?

javascriptjqueryhtmlhtml-manipulation
40
abolotnov

Je voudrais cloner l'élément au lieu de sauvegarder le contenu. Ensuite, utilisez replaceWith pour le restaurer:

var divClone = $("#some_div").clone(); // Do this on $(document).ready(function() { ... })

$("#some_div").html("Yeah all good mate!"); // Change the content temporarily

// Use this command if you want to keep divClone as a copy of "#some_div"
$("#some_div").replaceWith(divClone.clone()); // Restore element with a copy of divClone

// Any changes to "#some_div" after this point will affect the value of divClone
$("#some_div").replaceWith(divClone); // Restore element with divClone itself
84
Josiah Ruddell

Vous pouvez utiliser l'attribut de données pour enregistrer l'état plutôt qu'une variable

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));
16
Vadim

Ce que vous faites n'est pas optimal. La meilleure solution serait la suivante:

Lorsque le formulaire est soumis avec succès, il suffit de hide() l'élément FORM et de show() le message (initialement masqué). Et puis, plus tard, juste show() l'élément FORM et hide() le message.

5
Šime Vidas

Oui, la façon dont vous avez est la façon de le faire. Le DOM ne sauvegarde pas les états précédents des DIV, vous devez donc le sauvegarder vous-même.

4
Rocket Hazmat

À mon avis, le mieux est d'utiliser ceci:

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());

De cette façon, vous pouvez l'utiliser à plusieurs reprises pour restaurer votre div à son état d'origine tout en conservant les données intactes dans "originalState" . A travaillé pour moi.

3
Saurabh

Un peu plus élégant?

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);
3
andrhamm

Vous avez essentiellement trois options.

  1. N'oubliez pas votre balisage d'origine, comme vous le faites avec votre variable originalState ci-dessus.
  2. Utilisez AJAX pour redemander le balisage. Vous pouvez le faire facilement si vous avez un code côté serveur en utilisant la méthode $.ajax() dans jQuery.
  3. Provoque le rechargement de la page.
1
Devin Burke

Faire appel à la fonction empty dans jQuery le fera

$(".div").empty();
0
Devraj Giri