Jquery :: अजाक्स संचालित प्रगति पट्टी?

Question

मेरे पास एक ऐसा पृष्ठ है जो कुछ संदेश भेजने के लिए jquery के AJAX फ़ंक्शंस का उपयोग करता है।

भेजने के लिए 50k संदेश ऊपर हो सकते हैं।

इसमें कुछ समय लग सकता है।

जो मैं करना चाहता हूं वह संदेश भेजने के साथ एक प्रगति पट्टी दिखा रहा है।

बैकएंड PHP है।

मैं यह कैसे कर सकता हूं?

---

मेरा समाधान: मूल AJAX कॉल में एक अद्वितीय पहचानकर्ता के माध्यम से भेजें।
यह पहचानकर्ता समापन प्रतिशत के साथ डेटाबेस (या पहचानकर्ता आदि के साथ नामित फ़ाइल) में संग्रहीत है।

इसे मूल स्क्रिप्ट आय के रूप में अपडेट किया गया है।

एक समारोह progress(ident)

बुलाया सेटअप है समारोह एक स्क्रिप्ट है कि प्रतिशत पढ़ता के लिए एक ajax कॉल करता है।
प्रगति पट्टी अपडेट की गई है यदि लौटा प्रतिशत 100 नहीं है,
फ़ंक्शन एक टाइमआउट सेट करता है जो 1 सेकंड के बाद स्वयं को कॉल करता है।

Answer 1

आपके एजेक्स फ़ंक्शन परिणाम वापस लौटने तक आप परिणाम क्षेत्र में .html() के माध्यम से एनिमेटेड gif लोड प्राप्त कर सकते हैं। एक विचार है।

jquery ui प्रगति पट्टी के बारे में, आपकी स्क्रिप्ट के माध्यम से अंतःक्रियात्मक रूप से आप एक संख्यात्मक मान को प्रतिबिंबित करना चाहते हैं जो एक निर्दिष्ट जावास्क्रिप्ट चर के रूप में पूर्ण प्रतिशत का प्रतिनिधित्व करता है। उदाहरण के लिए ...

// text example php script 
if (isset($_GET['twentyfive-percent'])) { 
    sleep(2); // I used sleep() to simulate processing 
    echo '$("#progressbar").progressbar({ value: 25 });'; 
    } 
if (isset($_GET['fifty-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 50 });'; 
    } 
if (isset($_GET['seventyfive-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 75 });'; 
    } 
if (isset($_GET['onehundred-percent'])) { 
    sleep(2); 
    echo '$("#progressbar").progressbar({ value: 100 });'; 
    } 

और नीचे वह कार्य है जिसका उपयोग मैं अपनी स्थिति को अपडेट करने के लिए प्रगति पट्टी प्राप्त करने के लिए करता था। थोड़ा सा पागल, मुझे पता है।

avail_elem = 0; 
function progress_bar() { 
    progress_status = $('#progressbar').progressbar('value'); 
    progress_status_avail = ['twentyfive-percent', 'fifty-percent', 'seventyfive-percent', 'onehundred-percent']; 
    if (progress_status != '100') { 
     $.ajax({ 
      url: 'test.php?' + progress_status_avail[avail_elem], 
      success: function(msg) { 
       eval(msg); 
       avail_elem++; 
       progress_bar(); 
       } 
      }); 
     } 
    } 

तो मुझे लगता है कि करने के लिए किया था, मुझे यकीन है कि वहाँ एक बेहतर तरीका है ... लेकिन इस तरह से यह मेरे लिए काम किया जब मैं यह परीक्षण किया है।

Answer 2

चेक यह आप jQuery का उपयोग करता है, तो: http://docs.jquery.com/UI/Progressbar

तुम बस हर AJAX सफलता पर पट्टी के मूल्य की आपूर्ति कर सकते हैं।

अन्यथा, यदि आप जे एस फ्रेमवर्क का उपयोग नहीं करते यह देखें: http://www.redips.net/javascript/ajax-progress-bar/

मैं इसे परीक्षण करने के लिए एक तरीका मौजूद नहीं है, लेकिन यह इस तरह जाना चाहिए:

var current = 0; 
    var total = 0; 
    var total_emails = <?php $total_emails ;?>; 

    $.ajax({ 

     ... 
     success: function(data) { 
     current++; // Add one to the current number of processed emails 
     total = (current/total_emails)*100; // Get the percent of the processed emails 
     $("#progressbar").progressbar("value", total); // Add the new value to the progress bar 
     } 
    }); 

और बनाने सुनिश्चित करें कि आप jQueryUI के साथ jQuery शामिल करेंगे, और उसके बाद पृष्ठ पर कहीं भी # प्रोग्रेसबार कंटेनर जोड़ने के लिए।

मुझे कुछ त्रुटियां हो सकती हैं ... आपको शायद कुल मिलाकर जाना होगा, खासकर यदि आपके पास बहुत सारे ईमेल हैं।

Answer 3

Use this answered question

इस मैं कैसे इसे लागू किया है:

var progressTrigger; 
    var progressElem = $('span#progressCounter'); 
    var resultsElem = $('span#results'); 
    var recordCount = 0; 

    $.ajax({ 
     type: "POST", 
     url: "Granules.asmx/Search", 
     data: "{wtk: '" + wkt + "', insideOnly: '" + properties.insideOnly + "', satellites: '" + satIds + "', startDate: '" + strDateFrom + "', endDate: '" + strDateTo + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "xml", 
     success: function (xml) { 
      Map.LoadKML(xml); 
     }, 
     beforeSend: function (thisXHR) { 
      progressElem.html(" Waiting for response from server ..."); 
      ResultsWindow.LoadingStart(); 

      progressTrigger = setInterval(function() { 
       if (thisXHR.readyState > 2) { 
        var totalBytes = thisXHR.getResponseHeader('Content-length'); 
        var dlBytes = thisXHR.responseText.length; 
        (totalBytes > 0) ? progressElem.html("Downloading: " + Math.round((dlBytes/totalBytes) * 100) + "%") : "Downloading: " + progressElem.html(Math.round(dlBytes/1024) + "K"); 
       } 
      }, 200); 


     }, 
     complete: function() { 
      clearInterval(progressTrigger); 
      progressElem.html(""); 
      resultsElem.html(recordCount); 
      ResultsWindow.LoadingEnd(); 
     }, 
     failure: function (msg) { 
      var message = new ControlPanel.Message("<p>There was an error on search.</p><p>" + msg + "</p>", ControlPanel.Message.Type.ERROR); 
     } 
    });