AJAX कॉल

Question

जब मैं 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: यहाँ मेरी कोड है।

Answer 1

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 

}); 

Answer 2

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');

Answer 3

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

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

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

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

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

Answer 4

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

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

}).ajaxComplete(function() { 

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

}); 

सीएसएस

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

Answer 5

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

Answer 6

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

मेरे समाधान यहाँ पर एक नज़र डालें। मैं विकास के लिए नवीनतम और महानतम फ़ायरफ़ॉक्स का उपयोग कर रहा हूं और अन्य लोग आईई, क्रोम इत्यादि का उपयोग करते हैं .... हर बार जब मैंने 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% की ऊंचाई बना सकते हैं या स्क्रीन की जो भी आधा ऊंचाई छवि की आधा ऊंचाई कम हो सकती है। लेकिन जैसा कि मैंने कहा - यह सिर्फ एक साधारण इन-हाउस कार्यक्रम के लिए है। बात यह है - यह दिखाने के लिए बहुत सारे हुप्स के माध्यम से कूदने की कोशिश किए बिना सभी ब्राउज़रों पर काम करता है। मैंने अन्य प्रमुख वेबसाइटों पर कुछ ऐसा देखा है। तो स्पष्ट रूप से अन्य लोगों ने ब्राउज़र पर फेड-अप प्राप्त कर लिया है जब आवश्यक होने पर प्रतीक्षा कर्सर नहीं दिख रहा है और सच कहने के लिए - मुझे यह याद आया और आश्चर्य हुआ कि यह दोहराना कितना मुश्किल होगा। अब मुझे पता है - यह बिल्कुल मुश्किल नहीं है।

मज़े करो!

Answer 7

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

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

और सीएसएस:

.ajaxLoading { 
    cursor: progress !important; 
} 

बेशक

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

Answer 8

$('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); 
            } 
           });