jQuery $ (เอกสาร). Ready และ UpdatePanels?

ฉันใช้ jQuery เพื่อเชื่อมโยงเอฟเฟกต์เมาส์โอเวอร์กับองค์ประกอบที่อยู่ใน UpdatePanel $(document).readyเหตุการณ์ที่เกิดขึ้นมีความผูกพันใน ตัวอย่างเช่น:

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

แน่นอนว่าวิธีนี้ใช้ได้ผลดีในครั้งแรกที่โหลดหน้าเว็บ แต่เมื่อ UpdatePanel ทำการอัปเดตหน้าบางส่วนจะไม่ทำงานและเอฟเฟกต์การวางเมาส์จะไม่ทำงานภายใน UpdatePanel อีกต่อไป

อะไรคือแนวทางที่แนะนำสำหรับการวางสายใน jQuery ไม่เพียง แต่ในการโหลดหน้าแรก แต่ทุกครั้งที่ UpdatePanel ทำการอัปเดตหน้าเว็บบางส่วน ฉันควรใช้วงจร ajax ASP.NET แทน$(document).readyหรือไม่?

UpdatePanel แทนที่เนื้อหาของแผงการอัพเดทในการอัพเดทอย่างสมบูรณ์ ซึ่งหมายความว่ากิจกรรมเหล่านั้นที่คุณสมัครเป็นสมาชิกจะไม่ถูกสมัครอีกต่อไปเพราะมีองค์ประกอบใหม่ในแผงอัปเดตนั้น

สิ่งที่ฉันทำเพื่อหลีกเลี่ยงปัญหานี้คือการสมัครสมาชิกใหม่กับกิจกรรมที่ฉันต้องการหลังจากอัพเดททุกครั้ง ฉันใช้$(document).ready()สำหรับการโหลดครั้งแรกจากนั้นใช้ Microsoft PageRequestManager(มีให้หากคุณมีแผงการอัปเดตในหน้าของคุณ) เพื่อสมัครรับข้อมูลใหม่ทุกการอัปเดต

$(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 ผ่านการขัดแย้งกันอย่างไร (sender, eventArgs)เพื่อให้คุณเห็นว่าเหตุการณ์ที่เกิดขึ้นนั้นเกิดขึ้นและผูกใหม่ได้เฉพาะเมื่อจำเป็น

นี่คือเอกสารเวอร์ชันล่าสุดจาก Microsoft: msdn.microsoft.com/.../bb383810.aspx

ตัวเลือกที่ดีคุณอาจจะต้องขึ้นอยู่กับความต้องการของคุณคือการใช้ของ .on()jQuery วิธีการเหล่านี้มีประสิทธิภาพมากกว่าการสมัครสมาชิกองค์ประกอบ DOM ใหม่ทุกครั้งที่อัพเดท อ่านเอกสารทั้งหมดก่อนที่คุณจะใช้วิธีการนี้เนื่องจากอาจเป็นไปตามที่คุณต้องการ มีปลั๊กอิน jQuery จำนวนมากที่ไม่เหมาะสมในการใช้ refactor .delegate()หรือ.on()ดังนั้นในกรณีเหล่านี้คุณควรสมัครสมาชิกใหม่

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

การควบคุมผู้ใช้ด้วย jQuery ภายใน UpdatePanel

นี่ไม่ใช่คำตอบที่ตรงกับคำถาม แต่ฉันได้รวมโซลูชันนี้เข้าด้วยกันโดยการอ่านคำตอบที่ฉันพบที่นี่และฉันคิดว่าบางคนอาจพบว่ามีประโยชน์

ฉันพยายามใช้ตัว จำกัด ข้อความ jQuery textarea ภายในการควบคุมผู้ใช้ สิ่งนี้เป็นเรื่องยากเนื่องจากการควบคุมผู้ใช้ทำงานภายใน 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>

ดังนั้น ... แค่คิดว่าใครบางคนอาจชอบที่จะรู้ว่าสิ่งนี้ได้ผล

อัปเกรดเป็น jQuery 1.3 และใช้:

$(function() {

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

});

หมายเหตุ: การแสดงสดใช้งานได้กับเหตุการณ์ส่วนใหญ่ แต่ไม่ใช่ทั้งหมด มีรายชื่อทั้งหมดในเอกสาร

คุณสามารถลอง:

<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 () เป็นเหตุการณ์ ajax ASP.NET ซึ่งจะดำเนินการทุกครั้งที่โหลดหน้าเว็บที่ฝั่งไคลเอ็นต์

คำตอบของฉัน?

function pageLoad() {

  $(document).ready(function(){

เป็นต้น

ทำงานเหมือนมีมนต์เสน่ห์ซึ่งโซลูชันอื่น ๆ จำนวนหนึ่งล้มเหลวอย่างน่าสังเวช

ฉันจะใช้หนึ่งในวิธีต่อไปนี้:

1. สรุปเหตุการณ์ผูกพันในฟังก์ชั่นและเรียกใช้มันทุกครั้งที่คุณปรับปรุงหน้า คุณสามารถมีเหตุการณ์ที่มีผลผูกพันกับองค์ประกอบที่เฉพาะเจาะจงเพื่อที่จะไม่ผูกเหตุการณ์หลายครั้งกับองค์ประกอบเดียวกัน

2. ใช้ปลั๊กอินlivequeryซึ่งโดยทั่วไปจะใช้วิธีที่หนึ่งสำหรับคุณโดยอัตโนมัติอย่างน่าอัศจรรย์ การตั้งค่าของคุณอาจแตกต่างกันไปขึ้นอยู่กับจำนวนของการควบคุมที่คุณต้องการให้มีผลผูกพันกับเหตุการณ์

สิ่งนี้ใช้ได้กับฉัน:

$(document).ready(function() {

    // Do something exciting

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

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

});

ฟังก์ชั่น pageLoad () อันตรายมากที่จะใช้ในสถานการณ์นี้ คุณสามารถให้กิจกรรมกลายเป็นแบบมีสายหลายครั้ง ฉันจะอยู่ห่างจาก. live () ตามที่แนบกับองค์ประกอบเอกสารและต้องข้ามทั้งหน้า (ช้าและเส็งเคร็ง)

ทางออกที่ดีที่สุดที่ฉันเคยเห็นคือใช้ jQuery .delegate () ฟังก์ชั่นบนเสื้อคลุมด้านนอกแผงอัปเดตและใช้ประโยชน์จากการเดือดปุด ๆ นอกจากนั้นคุณสามารถวางสายจัดการโดยใช้ไลบรารี Ajax ของ Microsoft ซึ่งออกแบบมาเพื่อทำงานกับ UpdatePanels

เมื่อ$(document).ready(function (){...})ไม่ทำงานหลังจากโพสต์หน้ากลับมาให้ใช้ฟังก์ชัน JavaScript pageLoad ใน Asp.page ดังนี้

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

ฉันมีปัญหาที่คล้ายกันและพบว่าวิธีที่ได้ผลดีที่สุดคือการพึ่งพา Event Bubbling และการมอบหมายกิจกรรมให้จัดการ สิ่งที่ดีเกี่ยวกับการมอบหมายกิจกรรมคือเมื่อตั้งค่าแล้วคุณไม่จำเป็นต้องเชื่อมโยงเหตุการณ์อีกครั้งหลังจากอัปเดต AJAX

สิ่งที่ฉันทำในรหัสของฉันคือการตั้งค่าตัวแทนในองค์ประกอบหลักของแผงการอัพเดท อิลิเมนต์พาเรนต์นี้ไม่ถูกแทนที่ในการอัพเดตและดังนั้นการโยงเหตุการณ์ไม่ได้รับผลกระทบ

มีบทความและปลั๊กอินที่ดีจำนวนหนึ่งที่จะจัดการกับการมอบหมายกิจกรรมใน jQuery และฟีเจอร์นั้นน่าจะถูกนำไปใช้ในรุ่น 1.3 บทความ / ปลั๊กอินที่ฉันใช้สำหรับการอ้างอิงคือ:

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

เมื่อคุณเข้าใจสิ่งที่เกิดขึ้นฉันคิดว่าคุณจะพบโซลูชันที่สง่างามกว่าที่น่าเชื่อถือมากกว่าจดจำการผูกเหตุการณ์ใหม่หลังจากการอัพเดททุกครั้ง สิ่งนี้ยังมีประโยชน์เพิ่มเติมในการยกเลิกการผูกเมื่อคุณยกเลิกการโหลดหน้าเว็บ

FWIW ฉันพบปัญหาเดียวกันกับ woot mootools การแนบกิจกรรมของฉันอีกครั้งเป็นการย้ายที่ถูกต้อง แต่จำเป็นต้องทำในตอนท้ายของคำขอ ..

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

สิ่งที่ควรคำนึงถึงถ้า startRequest ทำให้คุณได้รับข้อยกเว้นการอ้างอิง JS แบบ null

ไชโย

นี่เป็นปลั๊กอินที่ยอดเยี่ยมสำหรับใช้กับแผงการอัปเดต:

http://updatepanelplugin.codeplex.com/

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

ฟังก์ชัน pageLoad นั้นสมบูรณ์แบบสำหรับเคสนี้เนื่องจากรันบนการโหลดหน้าเริ่มต้นและ postback updatepanel async ทุกอัน ฉันเพียงแค่ต้องเพิ่มวิธีการยกเลิกการผูกไว้เพื่อให้ jQuery ทำงานบน postpanel updatepanel

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

คำตอบของฉันขึ้นอยู่กับความคิดเห็นของผู้เชี่ยวชาญด้านบน แต่ด้านล่างเป็นรหัสต่อไปนี้ที่ทุกคนสามารถใช้เพื่อให้แน่ใจว่าแต่ละโพสต์แบ็กและโพสต์อะซิงโครนัสแต่ละครั้งรหัส JavaScript จะยังคงทำงานอยู่

ในกรณีของฉันฉันมีการควบคุมผู้ใช้ภายในหน้า เพียงวางรหัสด้านล่างในการควบคุมผู้ใช้ของคุณ

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

แผงการอัปเดตจะแทนที่ Jquery ของคุณด้วยสคริปต์ของ inbuilt Scriptmanager ทุกครั้งที่โหลด จะดีกว่าถ้าคุณใช้วิธีการอินสแตนซ์ของ pageRequestManager เช่นนี้ ...

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

มันจะทำงานได้ดี ...

ใช้สคริปต์ด้านล่างและเปลี่ยนเนื้อหาของสคริปต์ตามนั้น

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

ในการตอบสนองต่อคำตอบของ Brian MacKay:

ฉันฉีด JavaScript ลงในหน้าของฉันผ่าน ScriptManager แทนที่จะใส่ลงใน HTML ของ UserControl โดยตรง ในกรณีของฉันฉันต้องเลื่อนไปยังแบบฟอร์มที่ปรากฏให้เห็นหลังจาก 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;
}

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