jQuery $(document).ready وUpdatePanels؟

Question

أنا أستخدم jQuery لتوصيل بعض تأثيرات تمرير الماوس على العناصر الموجودة داخل UpdatePanel.الأحداث مترابطة في $(document).ready .على سبيل المثال:

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

بالطبع، يعمل هذا بشكل جيد في المرة الأولى التي يتم فيها تحميل الصفحة، ولكن عندما يقوم UpdatePanel بتحديث جزئي للصفحة، لا يتم تشغيله ولا تعمل تأثيرات تمرير الماوس بعد الآن داخل UpdatePanel.

ما هو الأسلوب الموصى به لتوصيل العناصر في jQuery ليس فقط عند تحميل الصفحة الأولى، ولكن في كل مرة يقوم UpdatePanel بإطلاق تحديث جزئي للصفحة؟هل يجب أن أستخدم دورة حياة ASP.NET ajax بدلاً من $(document).ready?

Answer 1

وهناك UpdatePanel يستبدل تماما محتويات لوحة التحديث على التحديث. وهذا يعني أن تلك الأحداث التي اشتركت في لم تعد اكتتب لأن هناك عناصر جديدة في هذا الفريق التحديث.

وماذا فعلت للتغلب على هذا إعادة الاشتراك للأحداث ولست بحاجة بعد كل تحديث. يمكنني استخدام $(document).ready() عن الحمل الأولي، ثم استخدام مايكروسوفت 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) حتى تتمكن من رؤية ما أثار هذا الحدث، وإلا إعادة ربط-إذا لزم الأمر.

وهنا هو أحدث نسخة من وثائق من مايكروسوفت: msdn.microsoft.com /.../bb383810.aspx

---

والخيار الأفضل قد تكون لديكم، وهذا يتوقف على الاحتياجات الخاصة بك، هو استخدام مسج ل .on() . هذه الطريقة هي أكثر كفاءة من إعادة الاشتراك للعناصر DOM على كل تحديث. قراءة جميع الوثائق قبل استخدام هذا النهج ومع ذلك، لأنه قد أو قد لا تلبي احتياجاتك. هناك الكثير من الإضافات مسج التي من شأنها أن تكون غير المعقول أن ريفاكتور لاستخدام .delegate() أو .on()، حتى في تلك الحالات، كنت أفضل حالا إعادة الاشتراك.

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

Answer 3

تحكم المستخدم باستخدام jQuery داخل UpdatePanel

هذه ليست إجابة مباشرة على السؤال، لكنني قمت بتجميع هذا الحل من خلال قراءة الإجابات التي وجدتها هنا، واعتقدت أن شخصًا ما قد يجدها مفيدة.

كنت أحاول استخدام محدد منطقة نص jQuery داخل عنصر تحكم المستخدم.كان هذا أمرًا صعبًا، لأن عنصر تحكم المستخدم يعمل داخل UpdatePanel، وكان يفقد روابطه عند رد الاتصال.

لو كانت هذه مجرد صفحة، لكانت الإجابات هنا تنطبق مباشرة.ومع ذلك، لا تتمتع عناصر تحكم المستخدم بإمكانية الوصول المباشر إلى علامة الرأس، كما أنها لا تتمتع بإمكانية الوصول المباشر إلى UpdatePanel كما تفترض بعض الإجابات.

انتهى بي الأمر بوضع كتلة البرنامج النصي هذه في الجزء العلوي من علامة تحكم المستخدم الخاصة بي.بالنسبة للربط الأولي، يستخدم $(document).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>

لذا...اعتقدت فقط أن شخصًا ما قد يرغب في معرفة أن هذا يعمل.

Answer 4

والترقية إلى مسج 1.3 و الاستخدام:

$(function() {

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

});

ملحوظة: يعمل الحية مع معظم الأحداث، ولكن ليس كل شيء. وهناك قائمة كاملة في الوثائق .

Answer 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 اياكس الذي يتم تنفيذه في كل مرة يتم تحميل الصفحة في جانب العميل.

Answer 6

وجوابي؟

function pageLoad() {

  $(document).ready(function(){

وغيرها.

وعملت مثل السحر، حيث فشل عدد من الحلول الأخرى فشلا ذريعا.

Answer 7

سأستخدم أحد الأساليب التالية:

1. قم بتغليف ربط الحدث في دالة وتشغيله في كل مرة تقوم فيها بتحديث الصفحة.يمكنك دائمًا احتواء الحدث المرتبط بعناصر محددة حتى لا يتم ربط الأحداث عدة مرات بنفس العناصر.

2. استخدم ال الاستعلام المباشر المكون الإضافي، والذي ينفذ بشكل أساسي الطريقة الأولى لك بطريقة سحرية تلقائيًا.قد يختلف تفضيلك اعتمادًا على مقدار التحكم الذي تريد الحصول عليه في ربط الحدث.

Answer 8

وهذا عمل بالنسبة لي:

$(document).ready(function() {

    // Do something exciting

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

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

});

Answer 9

وظيفة pageLoad () أمر خطير جدا للاستخدام في هذه الحالة. هل يمكن أن يكون أحداث تصبح السلكية عدة مرات. وأود أيضا الابتعاد عن .live () كما يعلقها على عنصر وثيقة وأن تجتاز صفحة كاملة (بطيئة وكربي).

وأفضل حل رأيته حتى الآن هو استخدام .delegate وظيفة مسج () على مجمع خارج لوحة التحديث والاستفادة من السطح. البعض بعد ذلك، هل يمكن أن سلك دائما معالجات باستخدام مكتبة اياكس مايكروسوفت الذي تم تصميمه للعمل مع UpdatePanels.

Answer 10

عند $(document).ready(function (){...}) لا تعمل بعد آخر صفحة في ذلك الوقت استخدام جافا سكريبت وظيفة pageLoad في Asp.page على النحو التالي:

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

Answer 11

وكان لي مشكلة مماثلة وجدت الطريقة التي عملت أفضل كان الاعتماد على الحدث محتدما والوفد الحدث على التعامل معها. والشيء الجميل في وفد الحدث هو أنه بمجرد الإعداد، لم يكن لديك لrebind الأحداث بعد تحديث AJAX.

وماذا أفعل في قانون بلدي هو الإعداد مندوب على العنصر الأصل من لوحة التحديث. لا يتم استبدال هذا العنصر الأصل على تحديث وملزمة وبالتالي فإن الحدث لا يتأثر.

وهناك عدد من المواد الجيدة والإضافات للتعامل مع وفد الحدث في مسج وميزة من المرجح أن يخبز في الإفراج 1.3. المادة / المساعد أنا استخدم للإشارة هو:

HTTP: //www.danwebb صافي / 2008/2/8 / الحدث من صنع وفد-سهلة في مسج

وبمجرد فهم ما يحدث ذلك، أعتقد أنك سوف تجد هذا الحل أكثر أناقة الكثير مما هو أكثر موثوقية من تذكر لإعادة ربط الأحداث بعد كل تحديث. هذا أيضا لديه فائدة إضافية تتمثل في إعطائك حدث واحد لتوثيق عندما تكون الصفحة تفريغ.

Answer 12

وFWIW، لقد واجهت مشكلة مشابهة ث / موتولز. إعادة ربط الأحداث بلدي كان خطوة صحيحة، ولكن ينبغي القيام به في نهاية request..eg

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

ومجرد شيء أن نأخذ في الاعتبار إذا beginRequest يسبب لك للحصول على مرجع فارغة استثناءات JS.

وهتاف

Answer 13

وهذا هو البرنامج المساعد كبيرة للاستخدام مع لوحات تحديث:

http://updatepanelplugin.codeplex.com/

Answer 14

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

وظيفة pageLoad مثالية لهذه الحالة نظرا لأنه يعمل على تحميل الصفحة الأولي وكل إعادة النشر updatepanel المتزامن. أود فقط أن إضافة أسلوب توثيق لجعل عمل مسج على إعادات النشر updatepanel.

http://encosia.com/document-ready -و-pageload، هي، لا تهدف للنفس /

Answer 15

تعتمد إجابتي على جميع تعليقات الخبراء المذكورة أعلاه، ولكن يوجد أدناه الكود التالي الذي يمكن لأي شخص استخدامه للتأكد من أنه في كل إعادة نشر وفي كل إعادة نشر غير متزامنة، سيتم تنفيذ كود 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>

Answer 16

لوحة تحديث دائما محل مسج مع البرامج النصية يحمل في ثناياه عوامل Scriptmanager لها بعد كل هذا العبء. على نحو أفضل إذا كنت تستخدم وسائل المثال pageRequestManager في مثل هذا ...

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

وأنها سوف تعمل بشكل جيد ...

Answer 17

ردًا على إجابة بريان ماكاي:

أقوم بإدخال 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;
}

Answer 18

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

Answer 19

استخدم أدناه السيناريو وتغيير الجسم من السيناريو وفقا لذلك.

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