JQuery - 양식 및 div 추가/제거

Question

예전에 예제를 본 적이 있지만 찾을 수없는 것 같습니다. 5 개의 버튼이있는 페이지가 있습니다. 나는 각 단추가 상쾌하게하지 않고 다른 양식을로드하는 것을 원합니다. 나는 UpdatePanels를 사용할 수 있지만, 이것 (과 대역폭 - 비용이 많이 드는)에 대한 잔인한 소리가 난다. 한 번에 모든 양식을로드하고 싶습니다. 버튼을 클릭하면 본질적으로 관련 양식을 숨기거나 표시합니다. 양식이 상당히 복잡 할 수 있고 서버에 다시 게시하는 ASP.NET 컨트롤이 포함되어 있으므로 html() 메서드를 사용하여이 작업을 수행 할 수 없습니다. 대신 양식을 개인 divs에 입력했습니다.

   case "button1": 

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

       case "button2": 

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

이의 문제는 이전의 형태는 항상보다는 교체되는 것이 아니라, 남아 있다는 것입니다 :

나는이 같은 일을 시도했다. div을 JQuery의 주어진 컨테이너에 첨부 할 수 있습니까? 아니면 더 좋은 다른 방법이 있습니까?

<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')); 

나는이 div의와 함께 테스트하고 있습니다

전체 도움 코드

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

에 대한

감사합니다

마크 업이 다음과 같이 될 것이다 :

<!-- 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="divForm1" class="form" style="display: block;"> 
This is div 1 
</div> 
<div id="divForm2" class="form"> 
    This is div 2 
</div> 

자바 스크립트 :

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

CSS :

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