JQuery - ajouter/supprimer des formes et divs

Question

Je suis sûr d'avoir déjà vu des exemples auparavant, mais je n'arrive pas à les trouver. J'ai une page qui a 5 boutons. Je voudrais que chaque bouton charge un formulaire différent, sans actualiser. Je pourrais utiliser UpdatePanels, mais cela semble excessif pour cela (et coûteuse en bande passante). Je voudrais charger tous les formulaires en une seule fois, de sorte que le fait de cliquer sur les boutons cache essentiellement les formulaires pertinents. Je ne peux pas faire cela en utilisant la méthode html() (en l'état) car les formulaires peuvent être assez compliqués et contenir des contrôles ASP.NET qui postback sur le serveur. Au lieu de cela, j'ai mis les formes en individuel divs.

J'ai essayé de faire quelque chose comme ceci:

   case "button1": 

        $(".current_form").show(); 
        $("#divForm1").prependTo($('.current_form')); 
        break; 

       case "button2": 

        $(".current_form").show(); 
        $("#divForm2").prependTo($('.current_form')); 
        break; 

Le problème est que l'ancienne forme reste toujours là, au lieu d'être remplacé. Est-il possible de joindre un div à un conteneur donné dans JQuery? Ou y a-t-il une autre méthode qui pourrait être meilleure?

Merci pour toute aide

code complet

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("button").button(); 
     $("button").click(function() { 

      switch ($(this).attr("value")) { 
       case "button1": 

        $('.current_form').empty().show(); 
        $("#divForm1").clone().prependTo($('.current_form')); 
        break; 

       case "button2": 

        $('.current_form').empty().show(); 

        $("#divForm2").clone().prependTo($('.current_form')); 
        break; 




      } 
      return false; //prevent postback 
     }); 



    }); 

</script> 

Je teste avec ces divs:

<div class="current_form"> 
<div id="divForm1" > 

This is div 1 

</div> 
</div> 


<div class="current_form"> 
<div id="divForm2" > 

    This is div 2 

</div> 
</div> 

Answer 1

Vous pouvez l'appeler comme ceci:

$('.current_form').empty().show(); 
$("#divForm1").clone().prependTo($('.current_form')); 

Votre balisage serait comme ceci:

<!-- Possible <form> tag here --> 
<div class="current_form"></div> 
<!-- Possible </form> tag here --> 
<div id="divForm1"> 
This is div 1 
</div> 
<div id="divForm2"> 
    This is div 2 
</div> 

Cela efface la forme avant, et il crée une copie de ce que vous voulez préfixer à mettre en .current_form, cela signifie que l'original est toujours à gauche et votre les boutons n'arrêteront pas de fonctionner après la première utilisation.

Assurez-vous d'avoir vos éléments <div id="divFormXX"> en dehors du formulaire soumis afin que les valeurs de l'original ne soient pas soumises au serveur également.

---

Mise à jour: meilleure option, moins balisage et moins javascript :)
Markup:

<div id="divForm1" class="form" style="display: block;"> 
This is div 1 
</div> 
<div id="divForm2" class="form"> 
    This is div 2 
</div> 

Javascript:

$(function() { 
    $("button").button().click(function() { 
    $(".form").hide(); 
    $("#divForm" + $(this).attr("value").replace('button','')).show(); 
    return false; 
    }); 
}); 

CSS:

.form { display: none; } //Hide the forms initially