jQuery के $ (दस्तावेज़)। पहले से और अपडेटपैनल्स?

Question

मैं jQuery का उपयोग तत्वों पर कुछ माउसओवर प्रभाव को अपडेट करने के लिए कर रहा हूं जो कि अपडेटपैनल के अंदर हैं। घटनाओं में बंधे हुए हैं $(document).ready। उदाहरण के लिए:

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

बेशक, यह पहली बार पृष्ठ लोड होने पर ठीक काम करता है, लेकिन जब UpdatePanel एक आंशिक पृष्ठ अद्यतन करता है, तो यह नहीं चलता है और माउसपावर प्रभाव UpdatePanel के अंदर किसी भी अधिक काम नहीं करता है।

केवल पहले पृष्ठ लोड पर ही नहीं jQuery में सामानों की वायरिंग के लिए अनुशंसित दृष्टिकोण क्या है, लेकिन हर बार अपडेटपैनल आंशिक पृष्ठ अपडेट को फायर करता है? क्या मुझे इसकी जगह ASP.NET ajax जीवनचक्र का उपयोग करना चाहिए $(document).ready?

Comments

इसे आजमाएँ, मुझे लगता है कि यह आपकी समस्या को हल करेगा codeproject.com/Articles/21962/…

— Baxterboom

इस प्रश्न के समान: stackoverflow.com/questions/301473/…

— प्रति हॉर्नशो-शियरबेक

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)ताकि आप देख सकें कि क्या ईवेंट उठाया गया और यदि आवश्यक हो तो केवल पुन: बाँध लें।

यहाँ Microsoft से प्रलेखन का नवीनतम संस्करण है: msdn.microsoft.com/...bb383810.aspx

---

आपकी आवश्यकताओं के आधार पर आपके पास एक बेहतर विकल्प, jQuery का उपयोग करना है .on()। ये विधि हर अपडेट पर DOM तत्वों की फिर से सदस्यता लेने की तुलना में अधिक कुशल है। इस दृष्टिकोण का उपयोग करने से पहले सभी दस्तावेज पढ़ें, क्योंकि यह आपकी आवश्यकताओं को पूरा कर सकता है या नहीं कर सकता है। बहुत सारे jQuery प्लगइन्स हैं जो कि रिफ्लेक्टर का उपयोग करने के लिए अनुचित होगा .delegate()या .on(), इसलिए उन मामलों में, आप फिर से सदस्यता लेने से बेहतर हैं।

Comments

कृपया स्पष्टीकरण देते समय अधिक सटीक रहें। मेरा मतलब है कि उपयोग की एक मिसाल कोड की कुछ बिखरी लाइनों से बेहतर है। ब्रायन मैकके स्पष्टीकरण देखें। यह एकदम सही है!

— सत्यसेकर

@Dan, jQuery के 1.7 के रूप में, .delegate()द्वारा.on()

— गेब्रियल पेट्रीओली

@ GabyakaG.Petrioli मुझे लगता है कि इसे समाप्त कर दिया गया है, लेकिन चूंकि यह उत्तर एक सामान्य समस्या को हल करने के लिए लगता है जो मैं jQuery के पुराने संस्करणों के साथ संगतता को अधिकतम करना चाहता था जो अभी तक उन्नत नहीं हुए हैं। मेरे जवाब की पूर्व में सिफारिश की गई थी .live(...)जिसे 1.7 में आधिकारिक तौर पर हटा दिया गया है और भविष्य के संस्करण में हटाया जा सकता है। मैंने जानबूझकर चुना .delegate()क्योंकि यह अभी कुछ समय के लिए jQuery में समर्थित है और जल्द ही किसी भी समय निकाले जाने की संभावना नहीं है। हालाँकि, मैं अपने उत्तर का उल्लेख .on()उन लोगों के लिए भी करूंगा जो इसका उपयोग कर सकते हैं।

— दान हर्बर्ट

$ (डॉक्यूमेंट) के अंदर prm var को घोषित करना और वायर करना बेहतर है। पहले से ही, यह संभव है कि Sys को अभी तक घोषित नहीं किया गया है (जहां स्क्रिप्ट है इसके आधार पर)।

— drake7707

@AhmedSamy यह jQuery.delegate()किसी भी अधिक उपयोग करने के लिए अनुशंसित नहीं है । इसके द्वारा अधिगृहित किया गया है jQuery.on()जिसका उपयोग करने के लिए पसंदीदा एपीआई है। delegate()केवल एक विशिष्ट उपयोग के लिए एक आवरण है on(), और यह संभव है कि यह भविष्य में पदावनत हो जाए। मेरी पिछली टिप्पणी का उल्लेख delegate()एक साल पहले लिखा गया था जब jQuery 1.7 (जिसने on()एपीआई को पेश किया था) को जारी किया गया था। पहले से ही jQuery 1.9 के साथ और 2.0 बीटा रिलीज के लिए तैयार किया जा रहा है, यह delegate()किसी भी नए कोड का उपयोग करने से बचने के लिए एक अच्छा विचार है ।

— दान हर्बर्ट

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>

Comments

एस्प के लिए अच्छी तरह से काम करता है: अंदर GridView TextBox <EditItemTemplate>

— Dan Randolph

इस समाधान के साथ समस्या यह है कि, जब यह काम करता है, तो यह अपडेटपैनेल के अतुल्यकालिक पोस्ट को मारता है - अपडेटपैनल को एक बार फिर बेकार बना देता है। (आह)

— MC9000

Answer 3

UpdatePanel के अंदर jQuery के साथ उपयोगकर्ता नियंत्रण

यह प्रश्न का सीधा उत्तर नहीं है, लेकिन मैंने इस समाधान को उन उत्तरों को पढ़कर एक साथ रखा है, जो मुझे यहाँ मिले, और मुझे लगा कि कोई व्यक्ति इसे बहुत उपयोगी समझ सकता है।

मैं एक उपयोगकर्ता नियंत्रण के अंदर एक jQuery textarea सीमक का उपयोग करने की कोशिश कर रहा था। यह मुश्किल था, क्योंकि उपयोगकर्ता नियंत्रण एक UpdatePanel के अंदर चलता है, और यह कॉलबैक पर अपनी बाइंडिंग खो रहा था।

अगर यह सिर्फ एक पेज होता, तो यहां के उत्तर सीधे लागू होते। हालाँकि, उपयोगकर्ता नियंत्रण का हेड टैग तक सीधी पहुंच नहीं है, और न ही कुछ जवाबों के अनुसार अपडेटपैनेल तक उनकी सीधी पहुँच है।

मैंने इस स्क्रिप्ट ब्लॉक को अपने उपयोगकर्ता नियंत्रण मार्कअप के शीर्ष पर डाल दिया। प्रारंभिक बाँध के लिए, यह $ (दस्तावेज़) का उपयोग करता है। पहले से ही, और फिर यह 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>

तो ... बस सोचा था कि कोई यह जानना चाह सकता है कि यह काम करता है।

Comments

मैं इसे मेरे जीवन के लिए काम नहीं कर सका। फिर मैंने इसे सिर से पाद तक स्थानांतरित कर दिया और यह काम कर गया। सकारात्मक नहीं है, लेकिन मुझे लगता है कि मैं ScriptManager के बाद आने की जरूरत है जिसका मैं उपयोग कर रहा हूं।

— एडम यंगर्स

मेरे मामले में मैं ScriptManager.RegisterClientScriptBlock का उपयोग करके स्क्रिप्ट जोड़ रहा था, जो Sys परिभाषित होने से पहले स्क्रिप्ट जोड़ता है, इसलिए मैंने इसके बजाय RegisterStartupScript का उपयोग करके समाप्त किया ( यहाँ अंतर देखें )

— फ़रैस असद

अच्छा जवाब! यह मेरे asp.net वेब ऐप में एक आकर्षण की तरह काम करता है। + आपके लिए

— प्राणेश जनार्दन

Answer 4

1.3 और उपयोग करने के लिए उन्नयन:

$(function() {

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

});

नोट: लाइव अधिकांश घटनाओं के साथ काम करता है, लेकिन सभी नहीं। प्रलेखन में एक पूरी सूची है ।

Comments

लाइव का उपयोग अपडेट पैनल के साथ समस्या को हल करता है। कूदने के लिए किसी हुप्स की जरूरत नहीं है।

— टिम स्कारबोरो

पगेलोड पर होने वाली किसी चीज़ के बारे में क्या? उदाहरण के लिए ज़ेबरा स्ट्रिपिंग टेबल? $ ('टेबल टीआर: एनटीएच-चाइल्ड (विषम)')। एडक्लास ('ऑल-रो');

— एडम यंगर्स

बस अपडेट करने के लिए, jQuery 1.7 के बाद से अब इसका उपयोग करने की सिफारिश की गई है। () इसके बजाय

— जॉर्ज

live()IE7 में विधि का उपयोग करते समय बस एक गंभीर विफलता मिली (jQuery 1.5.1 / VS2010 परियोजना)। का उपयोग करते समय live()एक UpdatePanel के अंदर में v3.5 ASP.NET एक नियमित रूप से AutoPostbackकी <asp:DropDownList />कारणों 2 आंशिक Postbacks के रूप में की उम्मीद 1. ब्राउज़र द्वारा जारी किए गए अतिरिक्त पोस्टबैक सामग्री (निरस्त) का अभाव है करने के लिए विरोध के कारण Page.IsPostBackहोने की falseजो मेरे बाध्य अंदर राज्य को मारता है ( नियंत्रण)। मैंने अपराधी को जीवित () विधि पाया। मुझे लगता है कि 1 प्रति अद्यतन UpdatePanel द्वारा प्रति गर्भपात किया जा सकता है, लेकिन केवल अगर वहाँ की कतार में एक और एक है जो वहाँ नहीं है।

— समयमि। 4 जूल 24'13

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 अजाक्स घटना है जिसे हर बार पृष्ठ को क्लाइंट की तरफ लोड किए जाने पर निष्पादित किया जाता है।

Comments

PageLoad अद्यतन पैनल के प्रत्येक ASync पोस्टबैक पर ईवेंट को डुप्लिकेट करता है।

— ज़ो हस

Answer 6

मेरा जवाब?

function pageLoad() {

  $(document).ready(function(){

आदि।

एक आकर्षण की तरह काम किया, जहां कई अन्य समाधान बुरी तरह विफल रहे।

Comments

पाठ की मात्रा के अनुसार मेरे UserControl में मेरे UpdatePanel में मेरी सूची में textareas के आकार बदलने के लिए बिल्कुल सही।

— संसाधन

मैं अपडेट पैनल के साथ पोस्टबैक पर डोम जेकरी फ़ंक्शंस को सही ढंग से काम करने के लिए संघर्ष करता था, यह समाधान काम करता था और मुझे 2 फ़ंक्शन में अपने फ़ंक्शन कॉल की नकल करने की आवश्यकता नहीं थी। यह jquery फ़ंक्शन और श्रोता उपलब्ध रखता है। नोट मैंने अपनी सारी स्क्रिप्ट और jquery लाइब्रेरी को पेज के नीचे FORM [end] टैग से ठीक पहले शामिल किया है। धन्यवाद!!!

— moto_geek

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

फ़ंक्शन पेजलोड () इस स्थिति में उपयोग करने के लिए बहुत खतरनाक है। आप कई बार वायर्ड हो सकते हैं। मैं .live () से भी दूर रहूंगा क्योंकि यह दस्तावेज़ तत्व से जुड़ता है और पूरे पृष्ठ (धीमा और भद्दा) को पीछे छोड़ना पड़ता है।

अब तक मैंने जो सबसे अच्छा समाधान देखा है, वह है अपडेट पैनल के बाहर एक रैपर पर jQuery .delegate () फ़ंक्शन का उपयोग करना और बुदबुदाहट का उपयोग करना। तब अन्य, आप हमेशा Microsoft के अजाक्स पुस्तकालय का उपयोग करके हैंडलर को तार कर सकते हैं जो कि अपडेटपैनल्स के साथ काम करने के लिए डिज़ाइन किया गया था।

Answer 10

जब $(document).ready(function (){...})पेज पोस्ट बैक के बाद काम नहीं करते हैं तो Asp.page में जावास्क्रिप्ट फंक्शन पेजलोड का उपयोग करें।

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

Comments

हाँ, isPartialLoad के लिए भी जाँच करें: stackoverflow.com/questions/301473/…

— स्टीव ग्रीन

Answer 11

मुझे इसी तरह की समस्या थी और जिस तरह से सबसे अच्छा काम किया गया, उसे संभालने के लिए इवेंट बब्लिंग और इवेंट डेलिगेशन पर भरोसा करना था। इवेंट डेलिगेशन के बारे में अच्छी बात यह है कि एक बार सेटअप करने के बाद, आपको AJAX अपडेट के बाद ईवेंट को रीबाइंड करने की आवश्यकता नहीं है।

मैं अपने कोड में क्या करता हूं, अपडेट पैनल के मूल तत्व पर एक प्रतिनिधि सेटअप है। यह मूल तत्व अद्यतन पर प्रतिस्थापित नहीं किया गया है और इसलिए ईवेंट बाइंडिंग अप्रभावित है।

JQuery में ईवेंट प्रतिनिधिमंडल को संभालने के लिए कई अच्छे लेख और प्लगइन्स हैं और संभवतया 1.3 रिलीज में बेक किया जाएगा। संदर्भ के लिए मैं लेख / प्लगइन का उपयोग करता हूं:

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

एक बार जब आप समझ जाते हैं कि यह क्या हो रहा है, तो मुझे लगता है कि आप इसे और अधिक सुरुचिपूर्ण समाधान पाएंगे जो कि आपके अपडेट के बाद की घटनाओं को फिर से बाँधने के लिए याद रखने की तुलना में अधिक विश्वसनीय है। पेज के अनलोड होने पर आपको एक ईवेंट को अनबाइंड करने का अतिरिक्त लाभ भी होता है।

Answer 12

FWIW, मैं w / mootools एक समान मुद्दे का अनुभव किया। मेरी घटनाओं को फिर से जोड़ना सही कदम था, लेकिन अनुरोध के अंत में किया जाना चाहिए

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

बस कुछ ध्यान में रखना है अगर शुरुआत में आप अशक्त संदर्भ जेएस अपवाद प्राप्त करते हैं।

चियर्स

Answer 13

यह अपडेट पैनल के साथ उपयोग के लिए एक शानदार प्लगइन है:

http://updatepanelplugin.codeplex.com/

Answer 14

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

पेजलोड फ़ंक्शन इस मामले के लिए एकदम सही है क्योंकि यह शुरुआती पेज लोड और हर अपडेटपैन async पोस्टबैक पर चलता है। मुझे सिर्फ अपडेटबैंक पोस्टबैक पर jquery का काम करने के लिए unbind मेथड जोड़ना था।

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

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

Answer 16

अपडेट पैनल हमेशा हर लोड के बाद अपने इनक्यूबिल्ट स्क्रिप्टमैनगर की स्क्रिप्ट के साथ आपके Jquery को बदलता है। यह बेहतर है अगर आप इस तरह से पेजरेंसटेस्टमैन के इंस्टेंस मेथड्स का उपयोग करते हैं ...

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

यह ठीक काम करेगा ...

Comments

एक पुरानी पोस्ट, लेकिन एक जिसने मेरी मदद की। एक चीज जो मैं इसमें जोड़ना चाहूंगा: add_endRequest कोड का स्थान UpdatePanel के अंदर होना चाहिए, क्योंकि Sys.WebForms.PageRequestManager केवल उसी बिंदु पर उपलब्ध है। हालाँकि, वास्तविक फ़ंक्शन को उस स्थान पर होने की आवश्यकता नहीं है। इसलिए, मेरे मामले में, मेरे पास एक script.js फ़ाइल है जिसमें एक कोड है जो मुझे बाध्य है, एक फ़ंक्शन के भीतर निहित है। उस script.js फ़ाइल में, मेरे पास एक दस्तावेज़ है। पहले से ही कॉल है, जो उपरोक्त फ़ंक्शन को आमंत्रित करता है। फिर, मेरे UpdatePanel में, मेरे पास add_endRequest कोड है, जो उपरोक्त फ़ंक्शन को भी लागू करता है।

— किरण रामास्वामी

Answer 17

स्क्रिप्ट के नीचे का उपयोग करें और तदनुसार स्क्रिप्ट के शरीर को बदलें।

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

Answer 18

ब्रायन मैकके के जवाब के जवाब में:

मैं जावास्क्रिप्ट को अपने पेज में ScriptCager के माध्यम से इंजेक्ट करता हूँ बजाय इसे सीधे UserControl के HTML में डालने के। मेरे मामले में, मुझे एक फॉर्म को स्क्रॉल करना होगा जो कि अपडेटपैनेल के समाप्त होने और वापस आने के बाद दिखाई देता है। यह फ़ाइल के पीछे कोड में जाता है। अपने नमूने में, मैंने पहले ही मुख्य सामग्री पृष्ठ पर 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 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
        });
}