ইন প্রোটোটাইপ আমি একটি "লোড হচ্ছে ..." এই কোড দিয়ে ইমেজ দেখাতে পারেন:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}ইন jQuery এর , আমি এই সাথে একটি উপাদান মধ্যে একটি সার্ভার পৃষ্ঠাটি লোড করতে পারেন:
$('#message').load('index.php?pg=ajaxFlashcard');তবে প্রোটোটাইপের মতো আমি কীভাবে এই আদেশের সাথে কোনও লোডিং স্পিনারকে সংযুক্ত করব?
উত্তর:
বেশ কয়েকটি উপায় আছে। আমার পছন্দের উপায়টি উপাদানটিতে অজাক্স স্টার্ট / স্টপ ইভেন্টগুলিতে কোনও ফাংশন সংযুক্ত করা।
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;আপনি যখনই কোনও অজ্যাক্স কল করবেন তখনই অজ্যাক্সস্টার্ট / স্টপ ফাংশনগুলি সূচিত হবে।
আপডেট : 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করতে পারেন এবং কোনও ফাংশন সংজ্ঞায়িত করতে পারেন যাতে আপনি লোডার ডিভের মতো কিছু দেখাতে পারেন এবং সাফল্যের বিকল্পে আপনি সেই লোডার ডিভটি লুকিয়ে রাখতে পারেন।
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();
}
});আপনার যে কোনও স্পিনিং জিআইফ চিত্র থাকতে পারে। এখানে এমন একটি ওয়েবসাইট যা আপনার রঙীন স্কিম অনুসারে দুর্দান্ত একটি এজেএক্স লোডার জেনারেটর: http://ajaxload.info/
successযদি একটি ত্রুটি বলা হবে না, কিন্তু "আপনি সবসময় এমন একটি পাবেন completeঅনুযায়ী এমনকি সমকালীন অনুরোধের জন্য, কলব্যাক," jQuery এর আয়াক্স ঘটনাবলী ।
আপনি এজেএক্স কল করার ঠিক আগে ডমটিতে অ্যানিমেটেড চিত্রটি sertোকাতে পারেন এবং এটি সরাতে একটি ইনলাইন ফাংশন করতে পারেন ...
$("#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 / প্রকল্প / লোডিং
$.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। এটি কেবলমাত্র কয়েকটি এজ্যাক্স অনুরোধকে ফিল্টার করা শক্ত করে তোলে। সু ...এই পরিবর্তনগুলির পরে এই কোড:
$(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-spinners/ এ রয়েছে ।
মূলত আপনার এইচটিএমএল মার্কআপ এবং সিএসএস এর মতো দেখতে পাবেন:
<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;
}নোট করুন যে স্পিনারদের কাজ করার জন্য আপনাকে অবিচ্ছিন্ন কলগুলি অবশ্যই ব্যবহার করতে হবে (কমপক্ষে এটি এজ্যাক্স কলের পরে আমার দেখাতে না পারায় এবং কলটি শেষ হওয়ার সাথে সাথে স্পিনারকে অপসারণ করার সাথে সাথে দ্রুত চলে গেল) away
$.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...'
});অ্যাজাক্স কলটি সম্পূর্ণ হওয়ার পরে এর সামগ্রীটি প্রতিস্থাপন করা না হওয়া পর্যন্ত এতে একটি অ্যানিমেটেড লোডিং জিএফ রয়েছে।
এটি আমার পক্ষে সেরা উপায়:
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);
}
});আমি আপনি ঠিক মনে করেন. এই পদ্ধতিটি খুব বিশ্বব্যাপী ...
যাইহোক - এটি যখন আপনার এজেএক্স কলটির পৃষ্ঠাতে কোনও প্রভাব পড়ে না তখন এটি একটি ভাল ডিফল্ট। (উদাহরণস্বরূপ পটভূমি সংরক্ষণ করুন)। (আপনি সর্বদা এটি "বিশ্বব্যাপী" পাস করে একটি নির্দিষ্ট অজ্যাক্স কলের জন্য স্যুইচ অফ করতে পারেন: মিথ্যা - jquery এ ডকুমেন্টেশন দেখুন
যখন এজেএক্স কলটি পৃষ্ঠার অংশটি রিফ্রেশ করার জন্য বোঝানো হয়েছে তখন আমার "লোডিং" চিত্রগুলি সতেজ বিভাগের জন্য নির্দিষ্ট হওয়া পছন্দ করি। আমি দেখতে চাই কোন অংশটি সতেজ হয়েছে।
আপনি যদি এমন কিছু লিখতে পারেন তবে তা কত শীতল হবে তা কল্পনা করুন:
$("#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");
});এই কোডটি বিশেষত jaxaxloader প্লাগইন ব্যবহার করে (যা আমি সবে তৈরি করেছি)
আমার এজাক্স কোডটি দেখতে দেখতে, বাস্তবে, আমি সবেমাত্র 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();
}
});আমি এজাক্স কোডের আগে একটি ফাংশনটির মধ্যে স্পিনারটিকে দেখিয়ে দিচ্ছি:
$("#MyDropDownID").change(function () {
$('#ajaxspinner').show();এইচটিএমএল-এর জন্য, আমি একটি হরফ ফন্ট ব্যবহার করেছি:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
আশা করি এটি কাউকে সাহায্য করবে।