2009-10-14 18 views
5

ब्लॉक करने में बहुत लंबा समय लगता है, मैं एक jQuery संवाद को अवरुद्ध करने के लिए jQuery BlockUI Plugin का उपयोग करने का प्रयास कर रहा हूं, जबकि यह एक सॉर्टिंग एल्गोरिदम करता है। इस तरह की कार्य इस प्रकार काम करती है:ब्लॉकयूआई को jQuery संवाद

doSort : function() { 
    $("#sort_dlg").block(); 

    // sort... takes a few seconds 

    $("#sort_dlg").unblock(); 
} 

यह काम करता है, तरह। सॉर्ट खत्म होने के बाद तक संवाद अवरुद्ध नहीं होता है। (इस प्रकार सभी को स्थानीय रूप से किया जाता है, कोई AJAX कॉल या कुछ भी नहीं है।) मैं इसे पहले से अवरुद्ध करने के लिए कैसे प्राप्त करूं?

मैं संवाद के ठीक बटन विधि के लिए block() कॉल चलती की कोशिश की:

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       doSort(); 
      } 
     } 
    }); 
}); 

लेकिन वह मदद नहीं की। (मैं कुछ अन्य तकनीक का उपयोग करके यूआई को अवरुद्ध करने के लिए सुझावों के लिए खुला हूं।)

+0

ऐसा शायद इसलिए है क्योंकि ब्लॉकयूआई मोडल पॉपअप में फीका करने के लिए एनिमेशन का उपयोग करता है, और जब ये एनिमेशन असीमित रूप से चल रहे हैं, तो आपका सॉर्ट कोड चलाना शुरू हो जाता है। चूंकि आपका सॉर्ट कोड आपके पृष्ठ पर सिंक्रनाइज़ेशन चल रहा है, इसलिए सॉर्ट कोड समाप्त होने तक ब्राउज़र अवरुद्ध है। आपका उत्तर कॉलबैक फ़ंक्शन का उपयोग करना है, जिसे मैं अभी देख रहा हूं ... – Pandincus

उत्तर

5

रूप @Pandincus द्वारा बताया आप blockUI अपने काम को पूरा करने देने के लिए कुछ समय के लिए इंतजार कर सकते हैं और फिर तरह शुरू:

$(function() { 
    $("#sort_dlg").dialog({ 
     autoOpen: false, 
     bgiframe: true, 
     modal: true, 
     buttons: { 
      "Cancel": function() { $(this).dialog("close"); }, 
      "OK": function() { 
       $("#sort_dlg").block(); 
       //WAIT FOR 1 SECOND BEFORE STARTING SORTING 
       setTimeout(function(){ doSort()}, 1000); 
      } 
     } 
    }); 
}); 
+0

ओ नोस! पंच को मारो! :- डी अच्छा शो, महोदय। – Pandincus

+0

धन्यवाद दोस्तों, यह काम करता है। अब मुझे यह तय करना है कि ब्लॉकयूआई या अक्षम() विधि (सोवियत द्वारा सुझाया गया) का उपयोग करना है या नहीं। मैं ब्लॉकयूआई की ओर झुका रहा हूं क्योंकि मुझे लगता है कि उपयोगकर्ता को बताना आसान है "कृपया प्रतीक्षा करें ..."। अक्षम() के साथ, मुझे यकीन नहीं है कि "कृपया प्रतीक्षा करें ..." के साथ अर्ध-पारदर्शी div मैन्युअल रूप से डालने के बिना इसे कैसे किया जाए। – twh

0

यूआई को अवरुद्ध करने के बजाय, आपको disable() method का उपयोग करके संवाद को अक्षम करना चाहिए जब उपयोगकर्ता "जाने" बटन पर क्लिक करता है। प्रक्रिया पूरी होने पर उपयोगकर्ता कुछ भी क्लिक नहीं कर सकता है।

+0

धन्यवाद, मुझे उस विधि को याद आया। एफवाईआई, ब्लॉकूआई के रूप में यह एक ही मुद्दा है जैसा कि मैंने अपना मूल प्रश्न बताया है। TheVillageIdiot और Pandincus द्वारा सुझाई गई सेटटाइम तकनीक यह हल करने के लिए काम करती है। – twh

4

ऊपर मेरी टिप्पणी के लिए जारी करने के लिए:

जब आप $ .blockUI फोन (), यह ब्लॉकिंग div में फीका-इन करने के लिए एनिमेशन का उपयोग करता है, और ये एनिमेशन अतुल्यकालिक रूप से चलाए जाते हैं। आपके जावास्क्रिप्ट कोड में अगली पंक्ति आपकी जटिल सॉर्टिंग है, और यह कोड ब्राउज़र समाप्त होने तक ब्राउज़र को अवरुद्ध करता है। नतीजतन, जो एनिमेशन शुरू हो गए हैं वे सॉर्टिंग के बाद तक खत्म नहीं हो जाते हैं!

BlockUI प्लगइन एक कॉलबैक फ़ंक्शन विकल्प है, जो एक शर्म की बात है है प्रतीत नहीं होता है, लेकिन यह ठीक है - हम जावास्क्रिप्ट का builtin setTimeout का उपयोग कर सकते हैं: हालांकि यह एक सटीक विज्ञान नहीं है

<head> 
    <title>Test</title> 
    <script src="jquery.js"></script> 
    <script src="jquery.blockUI.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btnTest").click(function() { 
       $.blockUI(); 
       setTimeout(doComplicatedStuff, 1000); 
      }); 
     }); 
     function doComplicatedStuff() 
     { 
      for(i = 0; i < 100000000; i++) 
      { 
       // ooh, complicated logic! 
      } 
      $.unblockUI(); 
     } 
    </script> 
</head> 
<body> 
    <p><input type="button" id="btnTest" value="Test" /></p> 
</body> 

, हम मूल रूप से अनुमान लगा रहे हैं कि 1 सेकंड के लिए जटिल कोड में देरी से ओवरयू को प्रदर्शित करने के लिए ब्लॉकयूआई पर्याप्त समय देगा।

आशा है कि इससे मदद मिलती है!

6

$ .blockUI में "fadeIn" नामक एक विकल्प है जो 200 मिलीसेकंड के लिए डिफ़ॉल्ट है। विधि को कॉल करते समय पृष्ठ ब्लॉक तुरंत होने के लिए आप यह मान शून्य पर सेट कर सकते हैं। यह फीडइन को अक्षम करता है।

$(function() { 
$("#sort_dlg").dialog({ 
    autoOpen: false, 
    bgiframe: true, 
    modal: true, 
    buttons: { 
     "Cancel": function() { $(this).dialog("close"); }, 
     "OK": function() { 
      $("#sort_dlg").block({ fadeIn: 0 }); // disable fadeIn 
      doSort(); 
     } 
    } 
}); 
+0

+1 - बहुत बहुत धन्यवाद! आपकी फीडइन चीज ने मेरी समस्या के लिए जादू किया :) –