UpdatePanel과 JQuery Tab의 사용시 유의점 ASP.NET/.NET

UpdatePanel내에 버튼이나 AutoPostBack을 통해서 AJAX를 구성하는 경우에 JQuery Tab컨트롤을 사용하면 포스트백이 AJAX를 통해 전달되어 결과가 처리된 이후에 Tab컨트롤이 해지되는 경우에는 다음처럼 Tab의 초기화 코드를 구성해준다.

    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
    </script>

로 탭을 초기화 했다면 이 코드를 Microsoft AJAX에서 폼이 로딩될 때 마다 실행되는 핸들러에도 탭의 초기화 코드를 다음처럼 추가해준다.

    <script type="text/javascript">
        var request = Sys.WebForms.PageRequestManager.getInstance();
        request.add_pageLoaded(PageLoadedHandler);

        function PageLoadedHandler(sender, args) {
            $("#divUnixTabs").tabs();
        }
    </script>  



AJAX를 통해서 포스트백을 실행하면 $(function() { 을 통한 코드는 페이지 로딩으로 인식하지 않기 때문에 Tab이 정상적으로 보이지 않는다. 이 스크립트 코드는 ScriptManager나 ToolkitScriptManager 아래에 넣어줘야 정상적으로 인식한다.


덧글

댓글 입력 영역