में प्रोटोटाइप मैं एक "लोड हो रहा ..." इस कोड के साथ छवि प्रदर्शित कर सकते हैं:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
JQuery में , मैं इसके साथ एक सर्वर पेज को एक तत्व में लोड कर सकता हूं:
$('#message').load('index.php?pg=ajaxFlashcard');लेकिन मैं इस कमांड में एक लोडिंग स्पिनर को कैसे संलग्न करूं जैसा कि मैंने प्रोटोटाइप में किया था?
जवाबों:
कुछ तरीके हैं। मेरा पसंदीदा तरीका तत्व पर ajaxStart / Stop घटनाओं के लिए एक फ़ंक्शन संलग्न करना है।
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
जब भी आप कोई भी अजाक्स कॉल करते हैं, ajaxStart / Stop फ़ंक्शन फायर हो जाएगा।
अद्यतन : jQuery 1.8 के रूप में, प्रलेखन में कहा गया है कि .ajaxStart/Stopकेवल संलग्न होना चाहिए document। यह उपरोक्त स्निपेट को इसमें बदल देगा:
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
JQuery के लिए मैं का उपयोग करें
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});beforeSendहर कॉल से पहले कॉल किया जाता है, जबकि ajaxStartट्रिगर तभी किया जाता है जब पहला अजाक्स विधि कहा जाता है। इसी तरह ajaxStop, यह तब कहा जाता है जब अंतिम अजाक्स कॉल खत्म होता है। यदि आपके पास एक से अधिक समवर्ती अनुरोध हैं, तो इस उत्तर में स्निपेट ठीक से काम नहीं करेगा।
आप सिर्फ jQuery के .ajaxफ़ंक्शन का उपयोग कर सकते हैं और इसके विकल्प का उपयोग beforeSendकर सकते हैं और कुछ फ़ंक्शन को परिभाषित कर सकते हैं जिसमें आप लोडर div की तरह कुछ दिखा सकते हैं और सफलता के विकल्प पर आप उस लोडर div को छिपा सकते हैं।
jQuery.ajax({
type: "POST",
url: 'YOU_URL_TO_WHICH_DATA_SEND',
data:'YOUR_DATA_TO_SEND',
beforeSend: function() {
$("#loaderDiv").show();
},
success: function(data) {
$("#loaderDiv").hide();
}
});आपकी कोई भी स्पिनिंग Gif छवि हो सकती है। यहाँ एक वेबसाइट है जो आपकी रंग योजना के अनुसार एक बेहतरीन AJAX लोडर जेनरेटर है: http://ajaxload.info/
successयदि कोई त्रुटि होती है बुलाया नहीं किया जाएगा, लेकिन "आप हमेशा एक प्राप्त होगा completeके अनुसार भी सिंक्रोनस अनुरोध के लिए, कॉलबैक," jQuery अजाक्स घटनाक्रम ।
आप AJAX कॉल से ठीक पहले DOM में एनिमेटेड इमेज डाल सकते हैं, और इसे हटाने के लिए इनलाइन फ़ंक्शन कर सकते हैं ...
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
$("#myDiv").html('');
});यह सुनिश्चित करेगा कि आपका एनीमेशन बाद के अनुरोधों (यदि वह मायने रखता है) पर एक ही फ्रेम पर शुरू हो। ध्यान दें कि IE के पुराने संस्करणों में एनीमेशन के साथ कठिनाइयाँ हो सकती हैं।
सौभाग्य!
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}यदि आप उपयोग कर रहे हैं तो आप कुछ $.ajax()इस तरह से उपयोग कर सकते हैं:
$.ajax({
url: "destination url",
success: sdialog,
error: edialog,
// shows the loader element before sending.
beforeSend: function () { $("#imgSpinner1").show(); },
// hides the loader after completion of request, whether successfull or failor.
complete: function () { $("#imgSpinner1").hide(); },
type: 'POST', dataType: 'json'
}); लोडिंग प्लगइन का उपयोग करें: http://plugins.jquery.com/project/loading
$.loading.onAjax({img:'loading.gif'});वेरिएंट: मेरे पास मुख्य पृष्ठ के बाईं ओर आईडी = "लोगो" वाला एक आइकन है; जब अजाक्स काम कर रहा होता है तब एक स्पिनर गिफ शीर्ष (पारदर्शिता के साथ) पर हावी हो जाता है।
jQuery.ajaxSetup({
beforeSend: function() {
$('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
},
complete: function(){
$('#logo').css('background', 'none')
},
success: function() {}
});मैंने मूल उत्तर में दो बदलाव किए ।
document। यह केवल कुछ ajax अनुरोधों को फ़िल्टर करने के लिए कठिन बनाता है। सू ...इन परिवर्तनों के बाद यह कोड है:
$(document)
.hide() // hide it initially
.ajaxSend(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").show();
})
.ajaxComplete(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").hide();
})ajaxCompleteसमय से पहले ही आग जब अनुरोध पुन: प्रयास, इसलिए मैं का एक संयोजन का उपयोग किया है लगता है ajaxSendऔर ajaxStopऔर यह बहुत अच्छा काम करता है।
मैं इस उत्तर में भी योगदान देना चाहता हूं। मैं jQuery में इसी तरह के कुछ के लिए देख रहा था और यह मैं अंत में का उपयोग कर समाप्त हो गया।
मुझे अपना लोडिंग स्पिनर http://ajaxload.info/ से मिला । मेरा समाधान http://christierney.com/2011/03/23/global-ajax-loading-spotners/ पर इस सरल उत्तर पर आधारित है ।
मूल रूप से आपका HTML मार्कअप और CSS इस तरह दिखेगा:
<style>
#ajaxSpinnerImage {
display: none;
}
</style>
<div id="ajaxSpinnerContainer">
<img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>और फिर आप jQuery के लिए कोड कुछ इस तरह दिखेगा:
<script>
$(document).ready(function () {
$(document)
.ajaxStart(function () {
$("#ajaxSpinnerImage").show();
})
.ajaxStop(function () {
$("#ajaxSpinnerImage").hide();
});
var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
$.getJSON(owmAPI)
.done(function (data) {
alert(data.coord.lon);
})
.fail(function () {
alert('error');
});
});
</script>यह बहुत ही सरल है :)
आप बस उसी टैग पर लोडर छवि असाइन कर सकते हैं जिस पर आप बाद में अजाक्स कॉल का उपयोग करके सामग्री लोड करेंगे:
$("#message").html('<span>Loading...</span>');
$('#message').load('index.php?pg=ajaxFlashcard');आप एक छवि टैग के साथ स्पैन टैग को भी बदल सकते हैं।
अजाक्स घटनाओं के लिए वैश्विक चूक स्थापित करने के साथ-साथ आप विशिष्ट तत्वों के लिए व्यवहार निर्धारित कर सकते हैं। शायद सिर्फ उनकी कक्षा बदलने से काफी होगा?
$('#myForm').ajaxSend( function() {
$(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
$(this).removeClass('loading');
});उदाहरण के लिए, स्पिनर के साथ #myForm छिपाने के लिए:
.loading {
display: block;
background: url(spinner.gif) no-repeat center middle;
width: 124px;
height: 124px;
margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
display: none;
}ध्यान दें कि आपको स्पिनरों को काम करने के लिए अतुल्यकालिक कॉल का उपयोग करना चाहिए (कम से कम यही कारण है कि अजाक्स कॉल के बाद तक मुझे नहीं दिखा और फिर तेजी से चले गए क्योंकि कॉल समाप्त हो गया था और स्पिनर को हटा दिया गया था)।
$.ajax({
url: requestUrl,
data: data,
dataType: 'JSON',
processData: false,
type: requestMethod,
async: true, <<<<<<------ set async to true
accepts: 'application/json',
contentType: 'application/json',
success: function (restResponse) {
// something here
},
error: function (restResponse) {
// something here
}
});$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');
$.ajax({
url: uri,
cache: false,
success: function(){
$('#loading-image').html('');
},
error: function(jqXHR, textStatus, errorThrown) {
var text = "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
$('#loading-image').html('<span style="color:red">'+text +' </span>');
}
});मैंने jQuery UI डायलॉग के साथ निम्नलिखित का उपयोग किया है। (शायद यह अन्य अजाक्स कॉलबैक के साथ काम करता है?)
$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
height: 300,
width: 600,
title: 'Wait for it...'
});Ajax कॉल पूरा होने पर इसकी सामग्री को बदलने तक एक एनिमेटेड लोडिंग gif शामिल है।
यह मेरे लिए सबसे अच्छा तरीका है:
jQuery :
$(document).ajaxStart(function() {
$(".loading").show();
});
$(document).ajaxStop(function() {
$(".loading").hide();
});कॉफी :
$(document).ajaxStart ->
$(".loading").show()
$(document).ajaxStop ->
$(".loading").hide()$.listen('click', '#captcha', function() {
$('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
$.get("/captcha/new", null, function(data) {
$('#captcha-block').html(data);
});
return false;
});#loading { background: url(/image/loading.gif) no-repeat center; }यह उस विशिष्ट उद्देश्य के लिए एक बहुत ही सरल और स्मार्ट प्लगइन है: https://github.com/hekigan/is-loading
मैं यह करता हूँ:
var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
$('#detail_thumbnails').html(preloaderdiv);
$.ajax({
async:true,
url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
success:function(data){
$('#detail_thumbnails').html(data);
}
});मेरे विचार से आप सही है। यह विधि बहुत वैश्विक है ...
हालाँकि - यह तब के लिए एक अच्छा डिफ़ॉल्ट है जब आपके AJAX कॉल का पेज पर कोई प्रभाव नहीं पड़ता है। (उदाहरण के लिए पृष्ठभूमि बचाओ)। (आप हमेशा "ग्लोबल" पास करके एक निश्चित अजाक्स कॉल के लिए इसे बंद कर सकते हैं: झूठी - jquery पर प्रलेखन देखें
जब AJAX कॉल पृष्ठ के भाग को ताज़ा करने के लिए होती है, तो मुझे ताज़ा अनुभाग में विशिष्ट होने के लिए मेरी "लोडिंग" छवियां पसंद हैं। मैं देखना चाहूंगा कि कौन सा हिस्सा ताज़ा है।
कल्पना करें कि यदि आप कुछ ऐसा लिख सकते हैं तो यह कितना अच्छा होगा:
$("#component_to_refresh").ajax( { ... } ); और यह इस खंड पर "लोडिंग" दिखाएगा। नीचे एक फ़ंक्शन है जो मैंने लिखा है कि "लोडिंग" डिस्प्ले को भी संभालता है लेकिन यह उस क्षेत्र के लिए विशिष्ट है जिसे आप अजाक्स में ताज़ा कर रहे हैं।
सबसे पहले, मैं आपको दिखाता हूं कि इसका उपयोग कैसे करना है
<!-- assume you have this HTML and you would like to refresh
it / load the content with ajax -->
<span id="email" name="name" class="ajax-loading">
</span>
<!-- then you have the following javascript -->
$(document).ready(function(){
$("#email").ajax({'url':"/my/url", load:true, global:false});
})और यह कार्य है - एक बुनियादी शुरुआत जिसे आप अपनी इच्छानुसार बढ़ा सकते हैं। यह बहुत लचीला है।
jQuery.fn.ajax = function(options)
{
var $this = $(this);
debugger;
function invokeFunc(func, arguments)
{
if ( typeof(func) == "function")
{
func( arguments ) ;
}
}
function _think( obj, think )
{
if ( think )
{
obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
}
else
{
obj.find(".loading").hide();
}
}
function makeMeThink( think )
{
if ( $this.is(".ajax-loading") )
{
_think($this,think);
}
else
{
_think($this, think);
}
}
options = $.extend({}, options); // make options not null - ridiculous, but still.
// read more about ajax events
var newoptions = $.extend({
beforeSend: function()
{
invokeFunc(options.beforeSend, null);
makeMeThink(true);
},
complete: function()
{
invokeFunc(options.complete);
makeMeThink(false);
},
success:function(result)
{
invokeFunc(options.success);
if ( options.load )
{
$this.html(result);
}
}
}, options);
$.ajax(newoptions);
};यदि आप अपना स्वयं का कोड नहीं लिखना चाहते हैं, तो बहुत सारे प्लगइन्स भी हैं जो बस यही करते हैं:
यदि आप सर्वर अनुरोध करने के दौरान लोडर का उपयोग करने की योजना बनाते हैं, तो आप निम्न पैटर्न का उपयोग कर सकते हैं।
jTarget.ajaxloader(); // (re)start the loader
$.post('/libs/jajaxloader/demo/service/service.php', function (content) {
jTarget.append(content); // or do something with the content
})
.always(function () {
jTarget.ajaxloader("stop");
});यह कोड विशेष रूप से jajaxloader plugin का उपयोग करता है (जो मैंने अभी बनाया है)
मेरा अजाक्स कोड इस तरह दिखता है, वास्तव में, मैंने सिर्फ async बाहर टिप्पणी की है: झूठी रेखा और स्पिनर दिखाता है।
$.ajax({
url: "@Url.Action("MyJsonAction", "Home")",
type: "POST",
dataType: "json",
data: {parameter:variable},
//async: false,
error: function () {
},
success: function (data) {
if (Object.keys(data).length > 0) {
//use data
}
$('#ajaxspinner').hide();
}
});मैं ajax कोड से पहले एक समारोह के भीतर स्पिनर दिखा रहा हूँ:
$("#MyDropDownID").change(function () {
$('#ajaxspinner').show();Html के लिए, मैंने एक फ़ॉन्ट भयानक वर्ग का उपयोग किया है:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
आशा है कि यह किसी की मदद करता है।
आप हमेशा ब्लॉक यूआई jQuery प्लगइन का उपयोग कर सकते हैं जो आपके लिए सब कुछ करता है, और यह किसी भी इनपुट के पृष्ठ को अवरुद्ध करता है जबकि एजैक्स लोड हो रहा है। इस मामले में कि प्लगइन काम नहीं कर रहा है, आप इस उत्तर में इसका उपयोग करने के सही तरीके के बारे में पढ़ सकते हैं । इसकी जांच - पड़ताल करें।