I have the following Ajax request which is within a partial view that requests addresses from a service and can take a few seconds to populate the table:
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updatearea", OnBegin = "ShowLoading", OnComplete = "HideLoading" }))
{
<div id="updatearea" class="form-group">
<div style="width:300px; display:block; float:left;">
#Html.TextBox("PostCode", null, new { #class = "form-control" })
</div>
<div id="NewAddressLine">
<input id="btnLookupPostcode" type="submit" value="Lookup Postcode" class="btn btn-default" />
</div>
</div>
<div id="spinner"></div>
}
And this JavaScript which is successfully starting the loading spinner but not stopping it once the partial view has rendered fully:
function ShowLoading() {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);
}
function HideLoading() {
var spinner = $('.spinner');
spinner.stop();
}
Please make it stop!
Posted as a comment initially and a bit of a radical solution but this will stop it completely :
spinner.remove()
Cleans up all references and attached events...
Might be spinner.spin(false) or $('.spin').spin('hide'); depending on jQuery plugin in use. Which library are you using? Just spin.js?
Your reference to the widget may be getting lost as well. Numerous ways to fix this; essentially make a variable in a scope you know will be maintained and assign the widget to that variable for safe keeping.
var MySpinner = function(){
var spinner = undefined; //Widget will be assigned here
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
return {
show: function(){
var target = document.getElementById('spinner');
spinner = new Spinner(opts).spin(target);
},
hide: function(){
spinner.stop();
}
}
}
var spinnerInstance = new MySpinner();
spinnerInstance.show();
spinnerInstance.hide();
Related
I can start spinner, but dont know how to stop it. Pls help:
//On button click load spinner and go to another page
$("#btn1").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
});
$("#btn2").click(function () {
//Write code to stop spinner
});
<button id="btn1">Start</button>
<button id="btn2">Stop</button>
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>
Refernces:
http://spin.js.org/
Stop Spinner.js
Use this Code.
$("#btn2").click(function () {
//Write code to stop spinner
$('#loading').fadeOut();
});
Just destroy it, for instance - it will disappear
$("#btn2").click(function () {
document.getElementById('loading').innerHTML='';
});
$(trget).data('spinner', spnr);
$('loading').data('spinner').stop();
//On button click load spinner and go to another page
$("#btn1").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
});
$("#btn2").click(function () {
//Write code to stop spinner
$('#loading').fadeOut();
});
<button id="btn1">Start</button>
<button id="btn2">Stop</button>
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" type="text/javascript"></script>
make the var spnr for accessible both the functions,
spnr = new Spinner(opts).spin(trget);
----------
$("#btn2").click(function () {
//Write code to stop spinner
spnr.stop();
});
I created two functions that should show and hide a spinner (iOS Spinner):
var overlay;
function startSpin() {
var opts = {
lines: 13, // The number of lines to draw
length: 11, // The length of each line
width: 5, // The line thickness
radius: 17, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#FFF', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.createElement("div");
document.body.appendChild(target);
var spinner = new Spinner(opts).spin(target);
overlay = iosOverlay({
text: "Searching ...",
spinner: spinner
});
return false;
}
function stopSpin() {
window.setTimeout(function() {
overlay.update({
icon: "img/check.png",
text: "Success!"
});
}, 3e3);
window.setTimeout(function() {
overlay.hide();
}, 5e3);
}
So in my process() function I first enable the spinner, call another function that loads data from the database and after this I stop the spinner:
function process() {
startSpin();
loadData();
stopSpin();
}
The loadData() function is quite heavy, that means it can take some seconds for it to finish.
The problem is that the spinner only shows up once the loadData() function finished.
Why does the spinner not show up before the loadData() function is called?
An issue thats been plaguing me for some time now. I cant get spin.js to work on submit buttons.
Heres a fiddle:
http://jsfiddle.net/xSDGx/24/
If you comment out the submit button and instead allow the div then it works fine.
Thanks.
For reference:
<input type="submit" id="spin">
var spinner;
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius:5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '57%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('spin');
var spinner = new Spinner(opts).spin(target);
$(target).data('spinner', spinner);
As explained in a comment, submit buttons aren't meant to contain other elements.
This poses the issue with the question.
To get around this I have wrapped the submit button in a div with the same width and height.
<div id="wrap">
<input type="submit">
</div>
You can use a <button> element instead, which by default acts as submit button:
http://jsfiddle.net/fgnass/q6ou3dt7/
I can't seem to stop this spinner no matter what I try.
I have searched around for the way to do it but nothing I have tried works.
Fiddle:
http://jsfiddle.net/gmvT4/5/
Backup code:
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius: 5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
$(document).on('click', '#spin', function () {
var spinner = new Spinner(opts).spin(target);
});
$(document).on('click', '#stop', function () {
$("#foo").data('spinner').stop();
});
<div id="foo"></div>
<button id="spin">Spin!</button>
<button id="stop">Stop!</button>
Thanks for any help! Craig.
Uncaught TypeError: Cannot read property 'stop' of undefined
This error tells you something. You're trying to run .stop() on $("#foo").data('spinner'). Instead, use the instance created by spinner, which you'll need to first declare outside of the scope of that click event.
var spinner;
$(document).on('click','#spin',function(){
spinner = new Spinner(opts).spin(target);
});
$(document).on('click','#stop',function(){
spinner.stop();
});
Updated fiddle c/o René Roth
I'm using spin.js ( http://fgnass.github.com/spin.js/) while a large full width/height image loads. The problem is I'm having trouble stopping the spinner. The stop() method doesn't seem to work. There's what I've got:
$(document).ready(function($) {
var img = new Image();
img.src = $('#top-bg').css('background-image').replace(/url\(|\)/g, '');
img.onload = function(){
$("#top-bg").spinner.stop();
$(".top-bar").delay(1500).fadeIn(5000);
$("#arrow, #arrowrt, #top-icons").delay(5000).fadeIn(5000);
};
});
I also tried
.spin(false)
and
.data('spinner').stop()
This is the spinner settings:
$(document).ready(function($) {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // The rotation offset
color: '#fff', // #rgb or #rrggbb
speed: 0.9, // Rounds per second
trail: 54, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('top-bg');
var spinner = new Spinner(opts).spin(target);
});
You need to store the spinner instance somewhere - in a way that you can access it when you need it to stop the spinning:
var spinner = new Spinner(opts).spin(target);
$(target).data('spinner', spinner);
And now you're able to stop it like this:
$('#top-bg').data('spinner').stop();
You can stop spinner without instance:
$(target).spin(false);
This seems to work across browsers and uses less code:
$(".spinner").remove();
Remove all DOM of containter, example:
<style type="text/css">.loader{ display: none; }</style>
<div>
<span class="loader"></span>
<span>Foo</span>
</div>
If need apply sping append it in
$('.loader').show().spin();
And destroy:
$('.loader').hide().empty();
Remember, jQuery.empty() automaticaly remove all DOM of object before destroy.