복붙노트

[JQUERY] jQuery를 $ .ready와 UpdatePanels (문서)?

JQUERY

jQuery를 $ .ready와 UpdatePanels (문서)?

해결법

  1. 1.UpdatePanel 완전히 업데이 트에 업데이트 패널의 내용을 대체합니다. 해당 업데이트 패널에서 새로운 요소가 있기 때문에 당신이 가입 한 해당 이벤트 것으로이 방법은 더 이상 등록되지합니다.

    UpdatePanel 완전히 업데이 트에 업데이트 패널의 내용을 대체합니다. 해당 업데이트 패널에서 새로운 요소가 있기 때문에 당신이 가입 한 해당 이벤트 것으로이 방법은 더 이상 등록되지합니다.

    내가이 문제를 해결하기 위해 수행 한 것은 내가 모든 업데이트 후 필요한 이벤트에 다시 가입. 나는 그 모든 업데이 트를 다시 구독 (당신이 당신의 페이지에 업데이트 패널이있는 경우 가능) 마이크로 소프트의 PageRequestManager를 사용하려면, 초기 부하 () .ready $ (문서)를 사용합니다.

    $(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

    PageRequestManager는 업데이트 패널이 페이지에있는 경우 자동으로 사용할 수있는 자바 스크립트 객체입니다. 당신은 오랫동안 UpdatePanel 페이지에 그대로을 사용하기 위해서는 위의 코드 이외의 아무것도 할 필요가 없습니다.

    더 자세한 제어를해야 할 경우 필요한 경우 이벤트 만 다시 바인드를 제기 무엇을 볼 수 있도록,이 이벤트는 .NET 이벤트가 전달되는 방법을 인수 (보낸 사람, EventArgs입니다)와 유사한 인수를 전달합니다.

    여기에 마이크로 소프트의 문서의 최신 버전은 다음과 같습니다 msdn.microsoft.com/.../bb383810.aspx

    당신이있을 수 있습니다 더 나은 옵션은, 필요에 따라, jQuery의 CSTE 연구진를 사용하는 것입니다 (). 이 방법은 모든 업데이트에 대한 DOM 요소에 재 구독보다 더 효율적입니다. 그것은 또는 당신의 필요를 충족하지 않을 수 있기 때문에 당신은, 그러나이 방법을 사용하기 전에 모든 문서를 읽어보십시오. 그래서 이러한 경우에, 사용 .delegate () 또는 CSTE 연구진은 ()에 리팩토링 불합리한 것이 jQuery를 플러그인 많이 있습니다, 당신은 더 나은 다시 가입하는 길 이죠.

  2. 2.

    <script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

    가는이 지역은 업데이트 할 수 있습니다.

    <asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

  3. 3.jQuery를 내부 UpdatePanel을 가지고있는 사용자 제어

    jQuery를 내부 UpdatePanel을 가지고있는 사용자 제어

    이 질문에 직접 대답하지,하지만 난 여기, 나는 누군가가 유용있을 거라고 생각하는 답을 읽고 함께이 솔루션을 뒀다.

    나는 사용자 컨트롤의 jQuery를 텍스트 영역 리미터 내부를 사용하려고했다. 사용자 컨트롤이 UpdatePanel의 내부에서 실행하기 때문에, 신중해야하고, 콜백에의 바인딩을 상실했다.

    이것은 단지 페이지라면, 여기에 대한 답변을 직접 적용했을 것이다. 그러나, 사용자 컨트롤 헤드 태그에 직접 액세스 할 수 없으며, 답변 중 일부는 가정으로 그들이 UpdatePanel에 직접 액세스하지 않았다 않습니다.

    나는 바로 내 사용자 컨트롤의 마크 업의 상단에이 스크립트 블록을 넣어 결국. 초기 바인딩의 경우, .ready $ (문서)를 사용하고 거기에서 prm.add_endRequest을 사용합니다 :

    <script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

    그래서 ... 그냥 누군가가이 작품을 알고 좋아하는 줄 알았는데.

  4. 4.jQuery를 1.3 및 사용에 업그레이드 :

    jQuery를 1.3 및 사용에 업그레이드 :

    $(function() {

    $('div._Foo').live("mouseover", function(e) {
        // Do something exciting
    });

});

    참고 : 라이브 대부분의 이벤트와 작품, 전부는 아니지만. 문서의 전체 목록이 있습니다.

  5. 5.당신은 또한 시도 할 수 있습니다 :

    당신은 또한 시도 할 수 있습니다 :

    <asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

    , pageLoad ()가 페이지가 클라이언트 측에로드 될 때마다 실행되는 ASP.NET AJAX의 이벤트이다.

  6. 6.내 대답은?

    내 대답은?

    function pageLoad() {

  $(document).ready(function(){

    기타

    다른 솔루션의 숫자가 비참하게 실패 매력처럼 일했다.

  7. 7.나는 다음과 같은 방법 중 하나를 사용합니다 :

    나는 다음과 같은 방법 중 하나를 사용합니다 :

  8. 8.이것은 나를 위해 일한 :

    이것은 나를 위해 일한 :

    $(document).ready(function() {

    // Do something exciting

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        // re-bind your jQuery events here
    });

});

  9. 9.기능 pageLoad ()이 상황에서 사용하는 것은 매우 위험합니다. 당신은 이벤트가 유선 여러 번가있을 수 있습니다. 나는 또한 멀리 것 () .live는 문서 요소에 부착하고 (느리고 엉터리) 전체 페이지를 통과해야한다.

    기능 pageLoad ()이 상황에서 사용하는 것은 매우 위험합니다. 당신은 이벤트가 유선 여러 번가있을 수 있습니다. 나는 또한 멀리 것 () .live는 문서 요소에 부착하고 (느리고 엉터리) 전체 페이지를 통과해야한다.

    내가 지금까지 본 가장 좋은 방법은 업데이트 패널과 버블의 메이크업 사용 외부 래퍼에서의 jQuery .delegate () 함수를 사용하는 것입니다. 다른 당신은 항상 UpdatePanels와 함께 작동하도록 설계되었습니다 마이크로 소프트의 아약스 라이브러리를 사용하여 처리기를 연결할 수있다.

  10. 10.때 $ (문서) .ready (함수 () {...}) 페이지 포스트 후하지 작업 당시 다음과 같이 Asp.page에서 자바 스크립트 기능 pageLoad을 사용합니다 :

    때 $ (문서) .ready (함수 () {...}) 페이지 포스트 후하지 작업 당시 다음과 같이 Asp.page에서 자바 스크립트 기능 pageLoad을 사용합니다 :

    <script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>

  11. 11.나는 비슷한 문제를 가지고 있었고, 최선의 일을 처리하기 위해 이벤트 버블 링 이벤트 위임에 의존했던 방법을 발견했다. 이벤트 위임에 대한 좋은 점은 설치하면, 당신이 AJAX 업데이트 후 이벤트를 리 바인드 할 필요가 없다는 것입니다.

    나는 비슷한 문제를 가지고 있었고, 최선의 일을 처리하기 위해 이벤트 버블 링 이벤트 위임에 의존했던 방법을 발견했다. 이벤트 위임에 대한 좋은 점은 설치하면, 당신이 AJAX 업데이트 후 이벤트를 리 바인드 할 필요가 없다는 것입니다.

    내가 내 코드에서하는 일은 설치 업데이트 패널의 부모 요소에 대리자입니다. 이 상위 요소는 갱신에 대체되지 않습니다 때문에 이벤트 바인딩은 영향을받지 않습니다.

    이 jQuery를에 이벤트 위임을 처리 할 수있는 좋은 기사와 플러그인의 숫자이며, 기능은 가능성이 1.3 버전에 구운 될 것입니다. I는 참조 용으로 사용하는 플러그인이 기사는 /입니다 :

    http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

    당신이 일어나고있는 것을 이해하면, 당신이 모든 갱신 후 다시 바인드 이벤트에 기억보다 더 신뢰성이 훨씬 더 우아한 해결책을 찾을 수 있습니다 생각합니다. 이것은 또한 페이지가 언로드 될 때 바인딩을 해제 당신에게 하나 개의 이벤트를 제공의 추가 혜택을했다.

  12. 12.FWIW, 나는 / Mootools의 승 비슷한 문제를 경험했다. 정확한 움직임을 내 이벤트를하고 다시 부착하지만, request..eg의 끝에서 수행 될 필요가

    FWIW, 나는 / Mootools의 승 비슷한 문제를 경험했다. 정확한 움직임을 내 이벤트를하고 다시 부착하지만, request..eg의 끝에서 수행 될 필요가

    var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {...

    beginRequest 당신이 null 참조 JS 예외를받을 발생하는 경우 그냥 뭔가 마음에 유지합니다.

    건배

  13. 13.이 업데이트 패널을 사용하기위한 좋은 플러그인입니다 :

    이 업데이트 패널을 사용하기위한 좋은 플러그인입니다 :

    http://updatepanelplugin.codeplex.com/

  14. 14.

    pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

    이 초기 페이지로드마다 된 UpdatePanel 비동기 포스트 백에서 실행 이후 pageLoad 기능은이 경우에 적합합니다. 난 그냥 된 UpdatePanel 포스트 백에 JQuery와 작업을 할 수있는 바인딩 해제 방법을 추가했다.

    http://encosia.com/document-ready-and-pageload-are-not-the-same/

  15. 15.내 대답은 모든 전문가의 의견 위의 기반으로하지만, 아래에 사람이 있는지, 각 포스트 백에와 자바 스크립트 코드가 계속 실행됩니다 각 비동기 포스트 백을 만들기 위해 사용할 수있는 다음 코드입니다.

    내 대답은 모든 전문가의 의견 위의 기반으로하지만, 아래에 사람이 있는지, 각 포스트 백에와 자바 스크립트 코드가 계속 실행됩니다 각 비동기 포스트 백을 만들기 위해 사용할 수있는 다음 코드입니다.

    내 경우에는, 한 페이지 내에서 사용자 정의 컨트롤을했다. 그냥 사용자 정의 컨트롤에 다음 코드를 붙여 넣습니다.

    <script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

  16. 16.업데이트 패널은 항상 모든 부하 후의 붙박이 스크립트 관리자의 스크립트와 jQuery를 대체합니다. 그것의 더 나은 당신이이 같은 pageRequestManager의 인스턴스 메소드를 사용하는 경우 ...

    업데이트 패널은 항상 모든 부하 후의 붙박이 스크립트 관리자의 스크립트와 jQuery를 대체합니다. 그것의 더 나은 당신이이 같은 pageRequestManager의 인스턴스 메소드를 사용하는 경우 ...

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

    그것을 잘 작동합니다 ...

  17. 17.스크립트 아래에 사용하고 그에 따라 스크립트의 본문을 변경합니다.

    스크립트 아래에 사용하고 그에 따라 스크립트의 본문을 변경합니다.

           <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>

  18. 18.브라이언 맥케이의 대답에 대응 :

    브라이언 맥케이의 대답에 대응 :

    내가 UserControl을의 HTML에 직접 넣는 대신에 ScriptManager를 통해 내 페이지에 자바 스크립트를 삽입. 내 경우, 나는 UpdatePanel 완료 및 반환 후 가시화 된 형태로 스크롤 할 필요가있다. 이 코드 숨김 파일에 간다. 내 샘플에서는 이미 주요 콘텐츠 페이지에 PRM 변수를 만들었습니다.

    private void ShowForm(bool pShowForm) {
    //other code here...
    if (pShowForm) {
        FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
    }
}

private void FocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var scrollToForm = $('#" + pControlId + @"').offset().top;
        $('html, body').animate({ 
            scrollTop: scrollToForm}, 
            'slow'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(ScrollFocusToFormCaller);
    }
    prm.add_endRequest(ScrollFocusToFormCaller);
    function ScrollFocusToFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}

  19. 19.

    Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}

    20. from https://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 동적 높이 폭 (CSS 레이아웃 유체) 중복]이면  (0) 2020.09.26
[JQUERY] 의 contentEditable 변경 이벤트  (0) 2020.09.26
[JQUERY] jQuery로 단어를 강조  (0) 2020.09.25
[JQUERY] 텍스트 입력 필드 내에서 (문자) 커서의 위치를 ​​가져옵니다  (0) 2020.09.25
[JQUERY] jQuery를에 큐은 무엇입니까?  (0) 2020.09.25
,

티스토리툴바