2012-01-10 12 views
17

जब मैं AJAX कॉल चलाता हूं और कॉल पूरा करने के बाद डिफ़ॉल्ट पॉइंटर पर वापस लौटाता हूं तो माउस पॉइंटर को "प्रतीक्षा" प्रतीक में बदलना चाहता हूं। मैंने निम्नानुसार कोशिश की है लेकिन मेरी समस्या यह है कि यह सिर्फ फ़ायरफ़ॉक्स पर काम कर रहा है जब तक कि मैं माउस बटन पर क्लिक/दबा नहीं जाता।AJAX कॉल

function initializeAjax(url){ 
    $('html, body').css("cursor", "wait"); 

    try { 
     if (url.substring(0,4) == ".mdf") { 
      var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf('.mdf')); 
      var url = database + url; 
     } 

     initRequest(url); 
     returnedValues = null; 
     req.onreadystatechange = returnedValues; 
     nocache = Math.random(); 
     req.open("GET", url+"&nocache = "+nocache, false); 
     req.send(null); 

     $('html, body').css("cursor", "auto"); 
     return req.responseText; 
    } 
    catch(err) { 
     return "Error 8"; 
    } 
} 

किसी को भी कृपया मदद कर सके इसके बाद के संस्करण को बदलने के लिए कैसे समस्या को हल करने सू है कि यह Firefox और IE में भी काम shud: यहाँ मेरी कोड है।

उत्तर

8

jQuery प्राप्त विधि पर एक नज़र डालें। यह बहुत उपयोग करने में आसान है और साथ ही कॉलबैक संभालती है, तो आप माउस कर्सर वापस स्थापित करने के लिए कोड जोड़ने कोई समस्या नहीं होगा ...

http://api.jquery.com/jQuery.get/

उदाहरण ...

$('html, body').css("cursor", "wait"); 
$.get("yourajaxcall.url", function(data) { 
    $('html, body').css("cursor", "auto"); 

    // Success - do something with "data" here 

}).error(function() { 
    $('html, body').css("cursor", "auto"); 

    // There was an error - do something else 

}); 
6

This post here समस्या के लिए एक अच्छा समाधान है।

function globalAjaxCursorChange() 
{ 
    $("html").bind("ajaxStart", function(){ 
    $(this).addClass('busy'); 
    }).bind("ajaxStop", function(){ 
    $(this).removeClass('busy'); 
    }); 
} 

और फिर सीएसएस में:

html.busy, html.busy * { 
    cursor: wait !important; 
} 

मैं सीएसएस दृष्टिकोण और वास्तव में जावास्क्रिप्ट में सीएसएस बदलने के बजाय एक वर्ग टॉगल चाहते

यहाँ उनके समाधान है। मेरे लिए एक क्लीनर दृष्टिकोण की तरह लगता है।

विशेष रूप से अपने कोड को यह लागू करने के लिए, आप जावास्क्रिप्ट कि सिर्फ $(this).addClass('busy'); के लिए कर्सर को बदलने के लिए कोशिश कर रहा है बदल जाएगा तो जब आप कर्सर वापस बदलने के लिए चाहते हैं तो बस $(this).removeClass('busy');

+2

मेरे मामले में यह काम नहीं कर रहा, मैंने इसे –

+0

करने की कोशिश की है अब और काम नहीं करता! – MSS

0

फोन अपने मुख्य कार्य निम्नलिखित जोड़ें में :

$('html, body').css("cursor", "wait"); 

तो इस समारोह की घोषणा (जो ajax परिणाम है):

function returnedValues() {  
    if (xmlhttp.readyState==4) 
    {  
    $('html, body').css("cursor", "auto"); 
    } 
} 

और होगा आश्चर्यजनक काम :)

+0

मैंने पहले से ही कोशिश की है लेकिन यह दुर्भाग्य से काम नहीं कर रहा है –

+0

यह काम नहीं करता है, क्योंकि AJAX का जवाब बहुत तेज़ आ रहा है, इसलिए यह जल्दी से स्वैप कर रहा है! आपको काम करने के लिए कुछ टाइमर लगाने की जरूरत है। लेकिन मुझे नहीं लगता कि आपको इसकी ज़रूरत है, एल्गोरिदम सही तरीके से काम करता है! – GingerHead

+0

लेकिन अब मुझे क्या करना चाहिए क्योंकि यह भी काम नहीं कर रहा है। मैं नहीं चाहता कि जब तक AJAX कॉल समाप्त न हो जाए तब उपयोगकर्ता माउस दबाए रखें जब कर्सर गायब हो जाता है। –

35

jQuery 1.9 के रूप में, यह यह कैसे किया जा सकता है:

$(document).ajaxStart(function() 
{ 
    $('body').addClass('wait'); 

}).ajaxComplete(function() { 

    $('body').removeClass('wait'); 

}); 

सीएसएस

body.wait *, body.wait 
{ 
    cursor: progress !important; 
} 
+1

[AJAXStart()] (http://api.jquery.com/ajaxStart/) और [AJAXComplete()] (http://api.jquery.com/ajaxComplete/) का परीक्षण करने के लिए jQuery 1.8 में समर्थित हैं। –

+0

+1 एक असीमित वातावरण में प्रतीक्षा करने के बजाय प्रगति का उपयोग करने के लिए +1। एसिंक कॉल जाने पर उपयोगकर्ता को एप्लिकेशन का उपयोग जारी रखने में सक्षम होना चाहिए। –

0

मैं समाधान कि बस सीएसएस संपत्ति जोड़ने पसंद नहीं है बॉडी टैग के लिए: यदि आपके पास पहले से ही आपके तत्व को असाइन किया गया कर्सर है तो यह काम नहीं करेगा। https://stackoverflow.com/a/26183551/1895428

0

स्टैक ओवरफ़्लो पर यहाँ प्रदान जवाब में से कोई भी मेरे लिए काम करेंगे:

मेरे समाधान यहाँ पर एक नज़र डालें। मैं विकास के लिए नवीनतम और महानतम फ़ायरफ़ॉक्स का उपयोग कर रहा हूं और अन्य लोग आईई, क्रोम इत्यादि का उपयोग करते हैं .... हर बार जब मैंने jQuery के AJAX पर कॉल किया तो कुछ भी नहीं होगा और केवल जब AJAX कॉल वापस आएगा - कर्सर बदल जाएगा। फिर यह प्रतीक्षा कर्सर में फंस जाएगा। तो - कॉल किया गया है, सर्वर ने नई जानकारी लौटा दी, जानकारी प्रदर्शित की गई और फिर WHAM! कर्सर डिस्प्ले प्रतीक्षा करें और दूर नहीं जायेंगे। मैंने दिए गए सभी उत्तरों की कोशिश की।.ajaxXXXX सामान कहा जा रहा था। (मैंने एक ALERT ("यहां") रखा है, कार्यों में और उन "यहां" हर समय दिखाया गया है। प्रत्येक एकल कॉल। बहुत निराशाजनक।

तो मैं गया "ठीक है - नई चीजें नहीं काम। पुराने स्कूल जाने के बारे में क्या? "मुझे पता है कि ऐसा करने के लिए यह बहुत मुश्किल है - लेकिन यह कुछ महान कार्यक्रम नहीं है जिस पर मैं काम कर रहा हूं। यह सिर्फ एक छोटा संपादक है, इसलिए कई लोग एक ही समय में हमारे डेटाबेस को संपादित कर सकते हैं। इंटरनेट की रोशनी कभी नहीं देखेगी। केवल इंट्रानेट। :-) वैसे भी, यह काम करता है और काम करता है। आपको अपना खुद का प्रतीक्षा कर्सर प्रदान करने की आवश्यकता है। मैंने अभी उपयोग करने के लिए Google छवियों में से एक को पकड़ लिया है।

पहले - एचटीएमएल:

<div id='wait' name='wait' 
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'> 
<table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%;'><tbody> 
<tr><td style='width:100%;height:50%;'> </td></tr> 
<tr><td align='center'><img id='cursor' name='cursor' src="images/wait.gif"></td></tr> 
</tbody></table> 
</div> 

फिर jQuery:

function waitCursor() 
{ 
    $('#wait').css({ 
     'top' : '0px', 
     'left' : '0px', 
     'width' : '100%', 
     'height' : '100%' 
     }); 
} 

function defCursor() 
{ 
    $('#wait').css({ 
    'top': '-9999px', 
    'left' : '-9999px', 
    'width' : '0%', 
    'height' : '0%' 
    }); 

और

$(document).ajaxStart(function(){ waitCursor(); }) 
    .ajaxComplete(function(){ defCursor(); }) 
    .ajaxStop(function(){ defCursor(); }); 

पुराने स्कूल लेकिन यह भी सरल। इसमें एक टेबल के साथ एक डीआईवी है। तालिका केवल पंक्तियों के लिए है। पहला स्क्रीन पूरी स्क्रीन की ऊंचाई का 50% है। दूसरा वाला स्क्रीन पर प्रतीक्षा कर्सर को बस केंद्रित करता है। आप हमेशा पहले 45% की ऊंचाई बना सकते हैं या स्क्रीन की जो भी आधा ऊंचाई छवि की आधा ऊंचाई कम हो सकती है। लेकिन जैसा कि मैंने कहा - यह सिर्फ एक साधारण इन-हाउस कार्यक्रम के लिए है। बात यह है - यह दिखाने के लिए बहुत सारे हुप्स के माध्यम से कूदने की कोशिश किए बिना सभी ब्राउज़रों पर काम करता है। मैंने अन्य प्रमुख वेबसाइटों पर कुछ ऐसा देखा है। तो स्पष्ट रूप से अन्य लोगों ने ब्राउज़र पर फेड-अप प्राप्त कर लिया है जब आवश्यक होने पर प्रतीक्षा कर्सर नहीं दिख रहा है और सच कहने के लिए - मुझे यह याद आया और आश्चर्य हुआ कि यह दोहराना कितना मुश्किल होगा। अब मुझे पता है - यह बिल्कुल मुश्किल नहीं है।

मज़े करो!

2

सरल और आसान उपाय, बस प्रत्येक पृष्ठ पर आप प्रभावित हो करना चाहते हैं के लिए निम्न कोड जोड़ें:

$(document).ajaxStart(function(){ 
    $("body").addClass('ajaxLoading'); 
}); 
$(document).ajaxStop(function(){ 
    $("body").removeClass('ajaxLoading'); 
}); 

और सीएसएस:

.ajaxLoading { 
    cursor: progress !important; 
} 
बेशक

, तो आप इस के अनुसार बदल सकते हैं आपकी ज़रूरतें, लेकिन प्रत्येक AJAX कॉल पर लोडिंग कर्सर प्रदर्शित करने के लिए एक सरल प्रभावी तरीके से, यह जाने का तरीका है (या कम से कम, जिस तरह से मैं इसे करूँगा)।

0
$('html, body').css("cursor", "wait"); 

इस कोड का प्रयोग करें AJAX

फिर कॉल करने से पहले:

$('html, body').css("cursor", "default"); 

सफलता समारोह में

उदाहरण:

$('html, body').css("cursor", "wait"); 
       $.ajax({ 
         url://your url , 
         type: //your type post or get 
         dataType: "html", 
         data: //data send by ajax 
         success: function(returnData){ 
         $('html, body').css("cursor", "default"); 
            //any other actions .... 
            }, 
            error: function(e){ 
            alert(e); 
            } 
           });