JQuery - добавление / удаление форм и делений

Question

Я уверен, что видел примеры где-то раньше, но я не могу их найти. У меня есть страница, которая имеет 5 кнопок. Я бы хотел, чтобы каждая кнопка загружала свою форму без обновления. Я мог бы использовать UpdatePanels, но это звучит излишне для этого (и дорого обходится). Я хотел бы загрузить все формы за один раз, поэтому нажатие на кнопки по существу скрывает / показывает соответствующие формы. Я не могу сделать это, используя метод html() (как есть), поскольку формы могут быть довольно сложными и содержать элементы управления ASP.NET, которые отправляются на сервер. Вместо этого я поместил формы в отдельных divs.

Я пытался сделать что-то вроде этого:

                case "button1":

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

                case "button2":

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

Проблема в том, что старая форма всегда остается там, а не заменяется. Можно ли прикрепить div к данному контейнеру в JQuery? Или есть другой способ, который может быть лучше?

Спасибо за любую помощь

полный код

<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>

Я тестирую с этими div:

<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

Вы можете назвать это так:

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

Ваша разметка будет выглядеть так:

<!-- 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>

Это очищает форму раньше и создает копию того, что вы хотите добавить в .current_form, это означает, что оригинал все еще остается, и ваши кнопки не перестанут работать после первое использование.

Убедитесь, что ваши элементы <div id="divFormXX"> находятся вне отправленной формы, чтобы значения из оригинала также не отправлялись на сервер.

---

Обновление: лучший вариант, меньше разметки и меньше javascript:)
Разметка:

<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