JQuery $ (sənəd) .ready və UpdatePanels?

UpdatePanel daxilində elementlərə bir neçə mouseover təsiri bağlamaq üçün jQuery istifadə edirəm. Hadisələr $(document).ready ilə bağlıdır. Məsələn:

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

Əlbəttə, bu səhifə ilk dəfə yüklənərkən işləyir, ancaq UpdatePanel qismən bir səhifə yeniləyir zaman başlamaz və mouseover effektləri artıq UpdatePanel daxilində işləmir.

JQuery-yə yalnız ilk səhifəni yükləmək üçün deyil, ancaq UpdatePanel hər dəfə qismən bir səhifə təzələməsini başlatmaq üçün tövsiyə olunan yanaşma nədir? ASP.NET ajax həyat dövründən $(document).ready əvəzinə istifadə etməliyəmmi?

452
02 нояб. Herb Caudill tərəfindən təyin 02 Noyabr. 2008-11-02 01:24 '08 at 1:24 2008-11-02 01:24
@ 1 cavab

UpdatePanel yeniləmə paneli məzmununu tamamilə yeniləmə ilə əvəz edir. Bu, abunə olduğunuz hadisələrin artıq abunə olmadığı anlamına gəlir, çünki bu yeniləmə panelində yeni elementlər var.

Hər bir yeniləmədən sonra mənə lazım olan hadisələri yenidən yazmaq üçün bu mövzuda fikirləşdim. İlk yüklənmə üçün $(document).ready() istifadə edirəm və sonra hər bir yeniləməyə yenidən abunə olmaq üçün Microsoft PageRequestManager (səhifənizdə yeniləmə paneli varsa) istifadə edin.

 $(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 , səhifədə bir yeniləmə paneli varsa avtomatik olaraq istifadə edilə bilən javascript obyektidir. Sayfada bir UpdatePanel içeriyorsa, istifadə etmək üçün yuxarıda göstərilən koddan başqa bir şey etmək lazım deyil.

Daha ətraflı nəzarətə ehtiyacınız varsa, bu hadisə, hadisələrin qaldırıldığını görə bilərsiniz və yalnız zəruri hallarda yenidən bərpa edə bilərsiniz ki (sender, eventArgs) .NET hadisələri arqumentlərə (sender, eventArgs) .

Aşağıda Microsoft sənədlərinin son versiyası: msdn.microsoft.com/.../bb383810.aspx


Sizin ehtiyaclarınızdan asılı olaraq, jQuery .on() istifadə etmək daha yaxşıdır. Bu üsullar hər bir yeniləmə ilə DOM elementlərinə yenidən yazılandan daha səmərəlidir. Bu yanaşmanı istifadə etməzdən əvvəl bütün sənədləri oxuyun, çünki sizin ehtiyaclarınıza cavab verə bilər. .delegate() və ya .delegate() istifadə etmək üçün refactoring üçün əsassız ola biləcək bir çox jQuery plug-ins var, buna görə də bu hallarda daha yaxşı imzalayırsınız.

522
02 нояб. Cavab Dan Herbert verildi 02 Noyabr. 2008-11-02 02:35 '08 saat 02:35 'da 2008-11-02 02:35
 <script type="text/javascript"> function BindEvents() { $(document).ready(function() { $(".tr-base").mouseover(function() { $(this).toggleClass("trHover"); }).mouseout(function() { $(this).removeClass("trHover"); }); } </script> 

Yenilənəcək sahə.

border=0
 <asp:UpdatePanel... <ContentTemplate <script type="text/javascript"> Sys.Application.add_load(BindEvents); </script> *// Staff* </ContentTemplate> </asp:UpdatePanel> 
158
14 янв. Cavab Barbaros Alp tərəfindən verilir. 2009-01-14 16:51 '09 saat 16:51 'da 2009-01-14 16:51

UpdatePanel daxilində jQuery istifadəçi nəzarət

Bu sualın birbaşa cavabı deyil, amma mən buradakı tapdığım cavabları oxuyaraq bu həlli topladım və düşündüm ki, kimsə faydalı ola bilər.

Bir istifadəçi nəzarəti içərisində jQuery mətn qutusu məhdudlaşdırıcısını istifadə etməyə çalışdım. Bu çətin idi, çünki User Control UpdatePanel içərisində işləyir və geri çağırışdakı bağlamaları itirib.

Yalnız bir səhifə olsaydı, burada cavablar birbaşa tətbiq olunacaqdı. Bununla yanaşı, istifadəçi nəzarəti əsas etiketə birbaşa daxil olmur və cavabların bəzilərinin təklif etdiyi kimi, UpdatePanel-ə birbaşa çıxışı yoxdur.

Nəticədə, mən bu İstifadəçi Kontrol nişanının yuxarısında bu script blokunu yerləşdirdim. Orijinal bağlama üçün, $ (sənəd) .ready istifadə olunur və sonra prm.add_endRequest istifadə edir:

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

Beləliklə ... Yalnız birinin işlədiyini bilmək istəyə biləcəyini düşündüm.

60
26 мая '10 в 22:53 2010-05-26 22:53 26 May 'da 10:53' da Brian MacKay'a cavab verdi 2010-05-26 22:53

JQuery 1.3-ə gedin və istifadə edin:

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

Qeyd: əksər hadisələrlə canlı işləyir, lakin hamısı deyil. Sənədlərin tam siyahısı.

33
06 февр. Cavab svinto tərəfindən verilir 06 fevral. 2009-02-06 03:54 '09 at 3:54 2009-02-06 03:54

Siz də cəhd edə bilərsiniz:

 <asp:UpdatePanel runat="server" ID="myUpdatePanel"> <ContentTemplate> <script type="text/javascript" > 

pageLoad (), səhifənin hər tərəfdən yükləndiyi bir ASP.NET ajax hadisədir.

20
31 дек. 31 dekabrda Daniel Hursan tərəfindən cavab verildi. 2010-12-31 13:51 '11 at 13:51 2010-12-31 13:51

Mənim cavabım?

 function pageLoad() { $(document).ready(function(){ 

və digərləri

Bir sıra digər qərarlar pis bir şəkildə uğursuz olduğu bir cazibə kimi işləmişdir.

16
28 февр. Cavab 28 fevralda Jono tərəfindən verilir . 2011-02-28 21:01 '11 at 21:01 2011-02-28 21:01

Aşağıdakı yanaşmalardan birini istifadə edərdim:

  • Bir hadisə bir funksiyanı bağlamaq və səhifə yenilənir hər dəfə çalıştırın. Eyni elementləri bir neçə dəfə hadisələrlə birləşdirmək üçün həmişə bir hadisə xüsusi elementlərə bağlaya bilərsiniz.

  • Əsasən sizin üçün bir üsulu avtomatik olaraq həyata keçirən canlı sətir pluginini istifadə edin. Tercihleriniz bir hadisə bağlandığında istədiyiniz kontrol məbləğindən asılı olaraq dəyişə bilər.

7
02 нояб. Cavab Eran Galperin tərəfindən verilir 02 Noyabr. 2008-11-02 01:39 '08 at 01:39 2008-11-02 01:39

Səhifənin mesajından sonra $(document).ready(function (){...}) işə yaramır, sonra JavaScriptLoadLoad funksiyasını Asp.page-də aşağıdakı kimi istifadə edin:

 <script type="text/javascript" > 
6
16 июля '15 в 8:06 2015-07-16 08:06 Cavab Pradeep tərəfindən verilir Daha ətraflı 16 iyul, 2015 at 8:06 2015-07-16 08:06

Mənim üçün çalışdı:

 $(document).ready(function() { // Do something exciting var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function() { // re-bind your jQuery events here }); }); 
6
26 июня '13 в 14:14 2013-06-26 14:14 Cavab Turbojohan 26 iyun 'da 14:14' də verilir 2013-06-26 14:14

PageLoad () funksiyası bu vəziyyətdə istifadə etmək çox təhlükəlidir. Tədbirlər bir neçə dəfə şəbəkəyə qoşula bilər. Bir sənəd elementinə əlavə olunduqda və bütün səhifəni (yavaş və darmadağın) keçirməlidir.

İndiyə qədər gördüyüm ən yaxşı həll, jQuery.delegate () funksiyasını yeniləmə paneli xaricində bir sarmalda istifadə etmək və kabarcıkları istifadə etməkdir. Əlavə olaraq, UpdatePanels ilə işləmək üçün hazırlanmış Microsoft Ajax kitabxanasını istifadə edərək həmişə işləyiciləri birləşdirə bilərsiniz.

5
17 июня '11 в 18:17 2011-06-17 18:17 Cavab 17 iyun 2011-ci il tarixində saat 18: 17-də verilir

Yeniləmə panelləri ilə birlikdə istifadə üçün böyük bir plugin:

http://updatepanelplugin.codeplex.com/

4
16 марта '11 в 22:20 2011-03-16 22:20 Cavab A_Surtees tərəfindən 16 Mart 2011 saat 22 : 20- 2011-03-16 22:20 tarixində verilir

FWIW, oxşar problemlə qarşılaşdım. Hadisələrimi yenidən birləşdirmək doğru addım idi, amma bu tələbin sonunda bunu etmək lazımdır.

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

StartRequest, JS istisnalarına lazımsız istinadlar edirsə, yadda saxlamaq üçün bir şey.

Salamlar

4
03 нояб. Cavab SanjayU 03 noyabr tarixində verilir. 2008-11-03 19:28 '08 saat 19:28 'da 2008-11-03 19:28

Bənzər bir problemim var idi və ən yaxşı şəkildə çalışdığım şey, Olay Bubbling'e güvenmek və onu idarə etmək üçün hadisələr vermək idi. Hadisələrin ötürülməsi ilə bağlı ən xoşagəlməz şey, quruluşdan sonra AJAX-ın yenilənməsindən sonra hadisələrin yenidən qurulmasına ehtiyac yoxdur.

Mənim kodumda yeniləmə panelinin əsas elementinə nümayəndə təyin etməkdir. Bu valideyn yenilənir zaman əvəz deyil, belə ki hadisə məcburi dəyişmir.

JQuery-də hadisə heyətini idarə etmək üçün çox yaxşı məqalələr və plugins var və funksiya 1.3 versiyasında bişirilmək ehtimalı çoxdur. Mən müraciət üçün istifadə etdiyim məqalə / plugin:

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

Bu baş verdiyini başa düşdükdən sonra, hər bir yeniləmədən sonra hadisələrin təkrarlanmasından xəbərdar olduğundan daha etibarlı olan daha zərif bir həll tapacaqsınız. Bu, həmçinin səhifə boşaldıldığında ayrılmaq üçün bir hadisə vermək üstünlüyünə malikdir.

4
03 нояб. Joe Brinkman tərəfindən verilmiş cavab 03 Noyabr. 2008-11-03 15:36 '08 at 15:36 2008-11-03 15:36
 pageLoad = function () { $('#div').unbind(); //jquery here } 

PageLoad funksiyası bu vəziyyət üçün idealdır, çünki səhifə başlanğıcda və hər hansı bir geri aspan mesajı ilə başlayır. Yalnızca postpracks updatepanel ilə jquery işi etmək üçün unbind üsulunu əlavə etmək məcburiyyətindəyəm.

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

3
23 июля '14 в 5:18 2014-07-23 05:18 Cavab Duane tərəfindən 23 iyul '14 'də 5:18 2014-07-23 05:18 ' də verilir

Cavab yuxarıdakı bütün ekspert şərhlərinə əsaslanır, lakin aşağıda hər bir geri çağırışdan əmin olmaq üçün hər hansı bir istifadə edə bilən və hər dəfə asinxronlu geri qayıtma baş verdikdə, JavaScript kodu hələ icra olunacaq.

Mənim vəziyyətimdə səhifədə bir istifadəçi nəzarətim var idi. Aşağıdakı kodu sadəcə istifadəçi nəzarətinizə yapışdırın.

 <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 ($) {  }); } UPDATEPANELFUNCTION(); </script> 
2
27 нояб. Abhishek Shrivastava tərəfindən verilmiş cavab noyabrın 27-də 2012-11-27 19:26 '12 at 7:26 pm 2012-11-27 19:26

Yeniləmə paneli hər yüklədikdən sonra həmişə JQuery'yi daxili Scriptmanager skriptləri ilə əvəzləyir. Bu kimi pageRequestManager nümunəvi metodlarından istifadə edərkən daha yaxşıdır ...

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

gözəl işləyəcək ...

2
21 июля '14 в 15:05 2014-07-21 15:05 Cavab Rohit Sharma tərəfindən 21 İyul '14 'də saat 15:05' də veriləcək 2014-07-21 15:05
 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 }); } 
0
19 дек. Cavab 19 dekabrda Tony Dong tərəfindən verilir . 2017-12-19 01:25 '17 də 1:25 2017-12-19 01:25 'də

Aşağıdakı skriptdən istifadə edin və bədii bədənini müvafiq olaraq dəyişdirin.

  <script> //Re-Create for on page postbacks var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { //your codes here! }); </script> 
0
20 июня '18 в 10:47 2018-06-20 10:47 cavab mzonerzə verilir 20 İyun 20: 00 -da 10:47 2018-06-20 10:47

Brian Mackayın cavabına cavab olaraq:

ScriptManager vasitəsilə mənim səhifəmə JavaScript-ni birbaşa UserControl HTML koduna yerləşdirmək yerinə daxil edirəm. Mənim vəziyyətimdə, UpdatePanelin tamamlanmasından və geri qaytarılmasından sonra görünən formaya keçmək lazımdır. Bu faylın arxasındakı kodu gedir. Məsələn, mən əsas məzmun səhifəsində dəyişən prm yaratmışam.

 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' );  prm.remove_endRequest(ScrollFocusToFormCaller); } prm.add_endRequest(ScrollFocusToFormCaller); function ScrollFocusToFormCaller(sender, args) { if (args.get_error() == undefined) { FocusOnForm(); } }"; return script; } 
0
05 июня '13 в 0:10 2013-06-05 00:10 cavab 05 iyun '05 ' da 0:10 2013-06-05 00:10 cavab verilir

tags ilə bağlı digər suallar və ya bir sual