मैं दृश्य में ajax लोडिंग व्यवहार कैसे बदल सकता हूँ?

Question

मेरे पास एक ब्लॉक में कुछ उजागर फिल्टर के साथ एक दृश्य है; यह AJAX और ऑटो-सबमिट सुविधा का उपयोग करता है इसलिए फ़िल्टर विकल्प को बदलते ही दृश्य फिर से लोड हो जाता है।

एक विकल्प का चयन करने और दृश्य को फिर से लोड किए जाने के बीच कम देरी में, परिचित नीले AJAX थ्रोबर को फॉर्म के निचले भाग में कहीं दिखाया गया है (मुझे लगता है कि वर्तमान में छिपे हुए सबमिट बटन कहां स्थित है)।

मुझे पता है कि मैं थ्रोबार तत्व के लिए CSS को ओवरराइड करके इस छवि को अनुकूलित कर सकता हूं, लेकिन मैं इसका उपयोग नहीं करना पसंद करूंगा।

मैं बहुत कुछ नहीं बल्कि अस्थायी रूप से उजागर फिल्टर फॉर्म (और आदर्श रूप में मुख्य रूप से अच्छी तरह से) को फीका कर देता हूं, एक jQuery एनीमेशन का उपयोग करके। जब AJAX कॉल पूरा हो जाता है तो वे फिर से फीके हो जाते हैं।

असफल होने पर, मैं उसी विधि का उपयोग करना चाहूंगा जिसे अपडेट करने पर UI यूआई मॉड्यूल का उपयोग करता है, अर्थात् इस आइकन को पृष्ठ के मध्य में रखकर:

जैसा कि मैं पहले से ही बनाया गया हूं, बस मान लिया गया है कि इस लोडिंग व्यवहार की शैली / स्थान को बदलने के लिए कहीं न कहीं एक सेटिंग होगी; हालांकि ऐसी कोई किस्मत नहीं।

मैं इनमें से किसी भी तरीके को कैसे लागू करूं?

मैं ड्रूपल 7 का उपयोग कर रहा हूं, जिसमें दृश्य 7.x-3.3 है।

Comments

मम्म ... सुबह की परियोजना :)

— लेस्टर पीबॉडी

वह समय अवधि क्या है जिसकी आपको आवश्यकता है?

— लेस्टर पीबॉडी

@ लेस्टर मैं एक बड़े पैमाने पर भीड़ में नहीं हूं क्योंकि यह उन परियोजनाओं में से किसी के लिए रिलीज़-अवरोधक नहीं है, जिन पर मैं काम कर रहा हूं ... लेकिन मुझे मानना ​​होगा कि यह मुझे परेशान कर रहा है! मैं शायद ही कभी दृश्यों का उपयोग करता हूं और मेरे पास निचले स्तर पर इसके साथ 'शामिल' होने का समय (या ऊर्जा नहीं है); लेकिन जैसा कि मैं अब अपने ई-कॉमर्स के प्रयासों को ड्रुपल कॉमर्स में पोर्ट करना शुरू कर रहा हूं, मुझे इस तरह का काम करने में सक्षम होना चाहिए। मैं 7 दिन इनाम की अवधि के दौरान एक अच्छा जवाब मिलता है, तो मैं चाँद से अधिक :) हो जाएगा

— क्लाइव

अरे, मैं सिर्फ अपने कस्टम मॉड्यूल (सेटिंग्स व्यवस्थापक पृष्ठ के साथ) विचार थ्रोबार स्टाइल के लिए तैयार कर रहा हूं। क्या आप अब भी रुचि रखते हैं? मैं इसे कुछ दिनों के भीतर drupal.org

— ANDiTKO

#random -: -तो मुझे लगा कि @ क्लाइव जवाबों के बारे में था, आप सवाल भी पूछते हैं?): D

— SGhosh

Answer 1

यदि आप एक छोटे से jquery का उपयोग करने से बुरा नहीं मानते हैं तो आप हमेशा कुछ ऐसा कर सकते हैं:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});

Comments

हां, मैं इस समाधान से सहमत हूं। बस ध्यान दें, कि jQuery ajaxSendऔर अधिक नियंत्रण के लिए ajaxCompleteशर्त if (settings.url == '/views/ajax') {//... }के साथ इस्तेमाल किया जा सकता है ।

— कलाब्रो

वाह मैं वास्तव में अधिक जटिल चीजें यह अब बहुत स्पष्ट लगता है! मुझे घटनाओं को देखने के बजाय फ़िल्टर रूप में संलग्न करना था (अन्यथा ajaxSuccessकेवल एक बार निकाल दिया जाता है; मुझे लगता है क्योंकि घटना स्वतः प्रतिस्थापित करने के लिए फिर से बाध्य नहीं है <div>) लेकिन इसके अलावा यह एकदम सही है, खूबसूरती से सरल का उल्लेख नहीं करना । बहुत बहुत धन्यवाद

— क्लाइव

@kalabro इस के साथ आपकी मदद के लिए फिर से धन्यवाद, अगर मैं इस और आपके उत्तर के बीच इनाम को विभाजित कर सकता हूं; लेकिन मैं वास्तव में इस एक के लिए जाने के लिए के रूप में यह लगभग एक पूरी तरह से काम कर रहे उदाहरण है :) मिल गया है

— क्लाइव

@ क्लिक करें, मुझे मिला समाधान बहुत खुश है :)

— कलाब्रो

JQuery 1.8 के रूप में, .ajaxSuccess () विधि केवल दस्तावेज़ से जुड़ी होनी चाहिए । सेटिंग्स मूल्य की तुलना, जैसा कि ऊपर कलब्रो द्वारा सुझाया गया है, जाने का रास्ता है। source: api.jquery.com/ajaxSuccess

— cjoy

Answer 2

पूर्णता के लिए यहां कोड का उपयोग करके मैं समाप्त हो गया; यह AJAX लोड शुरू होने पर उजागर फिल्टर फॉर्म और व्यू दोनों को फीका कर देता है और खत्म होने पर फिर से वापस आ जाता है:

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);

Comments

बहुत बढ़िया! मुझे खुशी है कि आपके लिए काम किया।

— संभावना जी

यह Drupal 6 पर कैसे किया जाता है?

— रयान जी

वास्तव में बहुत अच्छा है, लेकिन केवल एक बार लागू होता है :)

— कोजो

Answer 3

नमस्कार मैंने एक बहुत ही सरल मॉड्यूल बनाया है जो खुराक वही करता है जो आप करना चाहते हैं। मॉड्यूल में कॉन्फ़िगरेशन पृष्ठ है जहां आप थ्रोबर की शैली को नियंत्रित कर सकते हैं और यहां तक ​​कि बिना किसी हैकिंग के अपनी खुद की छवियां अपलोड कर सकते हैं।

यह सैंडबॉक्स लिंक है: http://drupal.org/sandbox/ANDiTKO/1556808

यदि आपको यह उपयोगी लगता है तो कृपया इसे यहाँ पुनः भेजें ताकि इसे आधिकारिक परियोजना के रूप में अनुमोदित किया जा सके: http://drupal.org/node/1556114

Comments

यही कारण है कि लगता बहुत धन्यवाद एक बहुत :) मैं इसे स्थापित हो और समीक्षा पर कुछ टिप्पणी पोस्ट जब मैं एक मौका मिलेगा

— क्लाइव

Answer 4

मैंने सिर्फ एक शोध किया है। Hardcoded है यहाँ के निर्माता में । का एक उदाहरण इसमें संग्रहीत नहीं है और इसके बारे में है। इसका अर्थ है कि हम वस्तु में नहीं जा सकते हैं और अपने स्वयं के परिमों को निर्धारित कर सकते हैं।
throbberDrupal.views.ajaxView
Drupal.views.ajaxViewDrupal.ajax @todo

यह कैसे करता है?

संक्षिप्त उत्तर CSS है।
दृश्य व्यवस्थापक पृष्ठ सिर्फ खाल throbber और यह की मूल करने के लिए शैली कहते हैं .ajax-progress-throbber।

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

क्या मैं Drupal.ajax के साथ कुछ कर सकता हूं?

हां, मुझे कुछ तरीके मिले जो आप AJAX तत्वों (बटन, लिंक, आदि) के लिए ओवरराइट कर सकते हैं। मैंने यहां एक उदाहरण दिखाया है: Drupal Form AJAX का विस्तार या "हुक" कैसे करें? । लेकिन इस मामले में यह इतना अच्छा नहीं होगा।
प्रगति तत्व beforeSendमंच पर दिखाई दे रहा है, इसलिए ऐसा होने से पहले आप कुछ कर सकते हैं।

Comments

जानकारी के लिए बहुत बहुत धन्यवाद, लेकिन मुझे यकीन नहीं है कि मैं अपनी समस्या को हल करने के लिए इसका उपयोग कैसे करूंगा; क्या आप कह रहे हैं कि सीएसएस से परे डिफ़ॉल्ट व्यू एजैक्स लोडिंग व्यवहार को जोड़ना / बदलना संभव नहीं है, कम से कम व्यू मॉड्यूल को हैक किए बिना?

— क्लाइव

मेरा मतलब है, आप सीएसएस का उपयोग कर सकते हैं, क्योंकि दृश्य भी इसका उपयोग करता है। बस छिपाएं .throbberऔर कुछ शैलियों को जोड़ दें.ajax-progress-throbber

— कलाब्रो

ठीक है, तो ब्लॉक में दोनों उजागर फिल्टर फॉर्म, और खुद को देखें, .ajax-progress-throbberकिसी भी AJAX का आह्वान होने पर एक वर्ग प्राप्त करें ? मुझे मानना ​​होगा कि मैंने ऐसा नहीं देखा है लेकिन मैं जाँच करूँगा। और आपको लगता है कि मैं एक beforeSendसमारोह में jQuery के एनीमेशन को लागू करने में सक्षम हो जाएगा (आपके अन्य प्रश्न के उत्तर के आधार पर)? धन्यवाद, मैं वास्तव में दृश्यों का उपयोग नहीं करता हूं और मुझे पता नहीं चल सकता है कि क्या हो रहा है, यह जानने के लिए कोड के हर बिट में नीचे सभी तरह से खुदाई करें! मैं तुम्हें पता है कि मुझे लगता है कि कोशिश कर के साथ पर मिलता है जाएगा

— क्लाइव

फार्म तत्वों पर आप चाहते हैं कि फीका प्रभाव को प्राप्त करने के लिए कुछ ध्यान रखें, आप jQuery एनिमेशन के बजाय CSS बदलावों का भी उपयोग कर सकते हैं, हालांकि jQuery के एनिमेशन सभी ब्राउज़रों और CSS बदलावों को केवल नवीनतम पीढ़ी पर काम करेंगे।

— लेस्टर पीबॉडी

धन्यवाद @ लेस्टर, मैं समय के लिए jQuery का उपयोग करूँगा। @kalabro दुर्भाग्य से आपका सुझाव काम नहीं करता है; न तो दृश्य, न ही उजागर फ़िल्टर ब्लॉक, .ajax-progress-throbberकिसी भी बिंदु पर उन पर लागू कक्षा प्राप्त करें ताकि आपकी विधि काम न करे। हालांकि आज़माने के लिए धन्यवाद

— क्लाइव