jQuery $ (document) .ready і UpdatePanels?

Я використовую jQuery для підключення деяких ефектів миші на елементи, що знаходяться в UpdatePanel. Події пов'язані в $(document).ready. Наприклад:

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

Звичайно, це працює чудово при першому завантаженні сторінки, але коли UpdatePanel робить часткове оновлення сторінки, воно не запускається, і ефекти миші перестають працювати всередині UpdatePanel.

Який рекомендований підхід для підключення матеріалів у jQuery не лише під час завантаження першої сторінки, але кожного разу, коли UpdatePanel виконує часткове оновлення сторінки? Чи повинен я використовувати життєвий цикл ASP.NET ajax замість $(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об'єкт javascript, який автоматично доступний, якщо на сторінці знаходиться панель оновлення. Вам не потрібно робити нічого, окрім наведеного вище коду, щоб використовувати його до тих пір, поки UpdatePanel знаходиться на сторінці.

Якщо вам потрібен більш детальний контроль, ця подія передає аргументи, подібні до того, як .NET події передаються аргументами, (sender, eventArgs)щоб ви могли бачити, що викликало подію, і лише повторно зв'язувати, якщо потрібно.

Ось остання версія документації від Microsoft: msdn.microsoft.com/.../bb383810.aspx

Кращим варіантом, який ви можете мати, залежно від ваших потреб, є використання jQuery .on(). Цей метод є більш ефективним, ніж повторна підписка на елементи DOM під час кожного оновлення. Прочитайте всю документацію, перш ніж використовувати цей підхід, оскільки він може відповідати вашим потребам. Існує багато плагінів jQuery, які нерозумно використовуватимуть рефактори, .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 всередині оновлення

Це не пряма відповідь на питання, але я вирішив скласти це рішення, прочитавши відповіді, які знайшов тут, і думав, що хтось може вважати його корисним.

Я намагався використовувати обмежувач текстових повідомлень jQuery всередині User Control. Це було хитро, тому що User Control працює всередині 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>

Отже ... Просто думав, що хтось може хотіти знати, що це працює.

Оновіть до 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
    });

});

функціональну сторінкуLoad () дуже небезпечно використовувати у цій ситуації. Можливо, події стали проводними кілька разів. Я б також тримався подалі від .live (), оскільки він прикріплюється до елемента документа і повинен переходити всю сторінку (повільно і хитро).

Найкраще рішення, яке я бачив до цього часу, - це використовувати функцію jQuery .delegate () на обгортці поза панеллю оновлення та використовувати пузир. Крім того, ви завжди можете підключити обробників за допомогою бібліотеки Ajax Microsoft, яка була розроблена для роботи з UpdatePanels.

Якщо $(document).ready(function (){...})не працює після публікації сторінки назад, тоді використовуйте функцію JavaScript сторінкуЗавантажте в Asp.page наступним чином:

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

У мене була подібна проблема, і я знайшов спосіб, який найкраще працював, - покластися на Bubbling Event та делегацію подій для його вирішення. Приємна річ у делегуванні подій - це те, що після налаштування вам не доведеться відновлювати події після оновлення AJAX.

Що я роблю в своєму коді - це встановити делегат на батьківський елемент панелі оновлення. Цей батьківський елемент не замінюється під час оновлення, тому зв’язування події не впливає.

Існує ряд хороших статей та плагінів для обробки делегування подій у jQuery, і ця функція, ймовірно, буде включена у версію 1.3. Стаття / плагін, який я використовую для посилання:

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

Як тільки ви зрозумієте, що відбувається, я думаю, що ви знайдете це набагато більш елегантне рішення, яке є більш надійним, ніж пам’ятати про повторне зв’язування подій після кожного оновлення. Це також має додаткову перевагу в тому, що ви дасте одну подію, яку потрібно скасувати при завантаженні сторінки.

FWIW, у мене виникли подібні проблеми з мотобулами. Повторне приєднання моїх подій було правильним кроком, але це потрібно було зробити в кінці запиту. Напр

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

Просто щось, про що слід пам’ятати, якщо beginRequest змушує вас отримати нульові посилання винятків JS.

Ура

Це чудовий плагін для використання з панелями оновлення:

http://updatepanelplugin.codeplex.com/

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

Функція pageLoad ідеально підходить для цього випадку, оскільки вона працює під час початкового завантаження сторінки та кожного оновлення асинхронізації після оновлення панелі оновлення. Мені просто довелося додати метод відключення, щоб змусити jquery працювати над оновленнями панелей оновлення.

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 своїми вбудованими сценаріями 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>

У відповідь на відповідь Брайана Маккея:

Я вставляю 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
        });
}