carlosbonetti / jquery-loading Goto Github PK
View Code? Open in Web Editor NEWEasily add and manipulate loading states of any element on the page.
Home Page: http://carlosbonetti.github.io/jquery-loading/
License: MIT License
Easily add and manipulate loading states of any element on the page.
Home Page: http://carlosbonetti.github.io/jquery-loading/
License: MIT License
$('*[ajax-form-container]').fajax({
beforeSend: function() {
$('body').loading();
},
success: function(){
toastr.info('The form was successfully sent');
$('body').loading('stop');
},
});
it error $(...).loading is not a function when i submit form!
Hello,
thank you for your nice plugin !
I don't know if it's a real issue (maybe I simply use incorrectly your plugin), but in some cases I get 2 overlays that never disappear.
It happens only when I modify html content (using html(strData)) before removing the overlay (using loading('stop')).
JQuery version is 1.11.1, tested on Chrome 35.
Example :
...Will work :
$("#submit-button-id").click(function(event) {
event.preventDefault();
$("#feedback-panel-id").parent().hide();
$("#feedback-panel-id").html('');
$('body').loading({
message: 'My overlay ...'
});
$.ajax({
url: 'url_for_form_validation',
type: "post",
data: $("#form-id").serialize(),
dataType: "html",
success: function(strData) {
if (strData !== '') {
// Put loading('stop') BEFORE html('').html(strData)
$('body').loading('stop');
$("#feedback-panel-id").html('').html(strData);
$("#feedback-panel-id").parent().show();
} else {
$("#form-id").submit();
}
},
error:function(){
// Put loading('stop') BEFORE html('Error !')
$('body').loading('stop');
$("#feedback-panel-id").html('Error !');
$("#feedback-panel-id").parent().show();
}
});
return false;
});
Will not work (the overlay doesn't hide and a second overlay appears over first one !) :
$("#submit-button-id").click(function(event) {
event.preventDefault();
$("#feedback-panel-id").parent().hide();
$("#feedback-panel-id").html('');
$('body').loading({
message: 'My message ...'
});
$.ajax({
url: 'url_for_form_validation',
type: "post",
data: $("#form-id").serialize(),
dataType: "html",
success: function(strData) {
if (strData !== '') {
$("#feedback-panel-id").html('').html(strData);
$("#feedback-panel-id").parent().show();
// Put loading('stop') AFTER html('').html(strData)
$('body').loading('stop');
} else {
$("#form-id").submit();
}
},
error:function(){
$("#feedback-panel-id").html('Error !');
$("#feedback-panel-id").parent().show();
// Put loading('stop') AFTER html('Error !')
$('body').loading('stop');
}
});
return false;
});
Thank you for your help :)
Which the update function can let user to update the loading object message?
for example:
loading...
then update the mesasge to
processing...
etc.
Thanks for your help.
Since every loading call with a setting (like custom overlay) destroy the old ones (cmiiw), how can I create multiple loading with custom overlay?
For some reason, I'm unable to open multiple instances of the loading object on the same page.... not at the same time. I'm listing lots of files to download and each time a file is downloaded I'm trying to add the overlay to the browser for a second. It works the first time, and closes correctly, but after that it doesn't appear anymore. I've verified the function is still called correctly and executes correctly.. it just doesn't show anything. No errors in the console.
$(document).ready(function()
{
$(".download-overlay").on("click", function (e)
{
/* Add overlay */
$("body").loading({
stoppable: true,
theme: "light",
overlay: $("#submission-overlay"),
});
/* Set timeout */
setTimeout(function()
{
$("body").loading('stop');
}, 1000);
});
});
My HTML:
<span class="line-break"><a class="download-overlay" href="{{ base['links']['site'] }}downloads/file/{{ file['id'] }}-{{ file['seo_title'] }}/?do=download&csrfKey={{ base['csrfKey'] }}" rel="nofollow" title="{% trans from "downloads" %}Download File ({{ size }}){% endtrans %}"><img src="{{ base['links']['cdn'] }}images/download_file.png" alt="{% trans from "downloads" %}Download{% endtrans %}"></a></span>
And submission overlay:
<div id="submission-overlay" style="display:none">
<div class="loading-spinner"></div>
</div>
Using Jquery 2.1.4.....
If module is required through Webpack (i.e. with require('jquery-easy-loading');) an error appears in the js console:
Error: Cannot find module '[object Window]'
This is due to the AMD define:
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery', window], factory);
}
that requires window.
I'm not sure if that is needed in some other situation, but changing the define to:
define(['jquery'], factory);
solves the issue in my case.
i got this error, can you explain me how to solve it?
thanks
WARNING in ./node_modules/jquery-easy-loading/dist/jquery.loading.min.js
9:147-174 Critical dependency: the request of a dependency is an expression
@ ./node_modules/jquery-easy-loading/dist/jquery.loading.min.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Hi
I'm having problems getting the overlay to display correctly.
I have a table with an id of '#rounds'
I've initiated the plug in using:
$('#rounds').loading();
At this point I can see the div loading within the elements at the base of the page (in chrome developer tools) which looks like this:
<div class="loading-overlay loading-theme-light loading-shown" style="display: none; position: absolute; z-index: 1; top: 280px; left: 9px; width: 923px; height: 123px;" id="rounds_loading-overlay"><div class="loading-overlay-content">Loading...</div></div>
I'm trying to use the overlay in a click event.
$('.delete-row').click(function (e) {
$('#rounds').loading();
e.preventDefault();
submitDeleteRequest($(this))
});
I've tried as a test to place it in the doc ready, it only displays if I move my mouse away from the main page element, into say chromes toolbar at the top or a side menu in the page. Otherwise It's not visible - strange
Am I missing something?
I'm using ver 1.10
Thanks
I'm trying to use this to put a loading overlay on top of a Bootstrap dialog, but it does not have a high enough z-index to get above the Bootstrap modal. I had to force it to use a higher number. Is there any reason why you don't just always default it to be some gigantic z-index? Also, the default Bootstrap styling makes the modal have rounded corners, but the overlay does not, so you can see the overlay over the corners. Maybe the plugin could detect if the target has rounded corners, and if so, also round the overlay div.
My CSS:
.loading-overlay {
display: table;
opacity: 0.9;
z-index: 25000 !important;
}
Hi.
Is there any methods to destroy plugin instance? Something like $( element ).loading('destroy')
?
The problem is that when i am doing $( element ).loading('stop')
the overlay div
element still exists in the DOM.
I see that the jquery loading overlay has always z-index of 9. I think there should be some way of overriding this.
I'm using Bootstrap modals, which have z-index of 1050 and I cannot get the loading overlay displayed on top of them, since they get inline CSS with z-index 9. Any idea how I could work around this?
Hey guys,
When I use .loading('stop'); on an element that was NOT already displaying the widget, it starts displaying.
The expected behavior would be nothing. If i call loading('stop'); and there is no loading on this element, nothing should happen.
I know it's an on the edge case, but in my case sometimes it happens..
I'd love to be able to install the package through Visual Studio's Nuget Package Manager. Creating and deploying is very easy, here you can find the details: https://docs.nuget.org/Create/using-a-gui-to-build-packages
I got 2 buttons with ajax on them,
first one
...
beforeSend: function () {
$('body').loading({
stoppable: false,
message: 'Unpublish...'
});
},
...
second one
...
beforeSend: function () {
$('body').loading({
stoppable: false,
message: 'Publish...'
});
},
...
if i click "publish", then another button will have same message and vice versa
I can't seem to figure out how to make the <button
> inside a <form>
work in Safari for macOS or iOS. Works in Firefox and Chrome.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery-loading test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.jsdelivr.net/npm/jquery-easy-loading/dist/jquery.loading.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h2>Full page loader</h2>
<div class="col-xs-6">
<form action="http://yahoo.com:8080/" method="post">
<button id="loading-form-btn" class="btn btn-danger">Inside Form</button>
</form>
<script>
$('#loading-form-btn').click(function() {
$('body').loading({
stoppable: true
});
});
</script>
</div>
<div class="col-xs-6">
<div>
<button id="loading-body-btn" class="btn btn-success">Outside Form</button>
</div>
<script>
$('#loading-body-btn').click(function() {
$('body').loading({
stoppable: true
});
});
</script>
</div>
</div>
</div>
<script src="http://cdn.jsdelivr.net/npm/jquery-easy-loading/dist/jquery.loading.min.js"></script>
</body>
</html>
as the title described, the compressed version of jquery-loading, contains an es6 syntax—— const, which can't be supported by IE explorer.
When I try to use the destroy
method I get:
jquery.loading.min.js:9 Uncaught TypeError: Cannot read property 'apply' of undefined
at HTMLDivElement. (jquery.loading.min.js:9)
at Function.each (jquery-1.11.1.min.js:2)
at m.fn.init.each (jquery-1.11.1.min.js:2)
at m.fn.init.a.fn.loading (jquery.loading.min.js:9)
at :1:27
for reproduction, you can open the browser console on the demo page and type:
$('#loading-light-theme').loading('destroy')
can't mask north region by the blow code (sorry can't upload htm file ,please change test.txt to test.html):
test.txt
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.