| Issue 327: | Manually show/hide loading animation - how? | |
| 2 people starred this issue and may be notified of changes. | Back to list |
|
I just switched from Thickbox because you coded in manual calls to open and close the modal. :) Good job! What I'm doing is loading a form via ajax, then I use ajaxform to submit the box. While it's submitting and waiting for a response I want to display the loading animation. How can I do this? Of course, when it's done, I want to close the box. I'll see if I can figure out how to do that as well. Thanks, great plugin.
Sep 8, 2009
I think you have it reversed, I already have the modal open with a form in it, while
the form in submitting I want to have the loading animation play until I get the
callback from the submitted form.
Or, are you saying when the modal is already opened I can run:
$.nyroModalSettings({ url: '#someId' });
to show the loading animation.
Basically, how can I show/hide the loading element/animation?
Sep 9, 2009
Ok, I got it:
Here is a sample code to illustrate how tou could do it:
<script type="text/javascript">
$(function() {
$('#test').nyroModal({
endShowContent: function(elts, settings) {
$('#form', elts.content).submit(function(e) {
e.preventDefault();
window.clb = false;
$.nyroModalRemove();
setTimeout(function() {
$.ajax({
url: this.action,
data: $(this).serialize(),
success: function() {
if (window.clb)
window.clb();
}
});
}, 5000);
});
},
beforeHideContent: function(elts, settings, callback) {
if (window.ajaxLoadDone)
callback();
else {
window.clb = callback;
elts.loading.show();
elts.content.hide();
}
}
});
});
</script>
The #test is a link going to a page which contains a form with #form.
Oct 13, 2009
I just added the solution of your problem in the wiki: http://nyromodal.nyrodev.com/wiki/index.php/Show_the_loading_to_execute_an_action_on_closing
Status:
Fixed
Dec 29, 2009
Hey, still got a problem, i use your way to submit an ajax form, it works! Good job! but, when i abort the modal without submit, it only shows the loading content in long time without closing it, why?
Dec 29, 2009
Hi, it's me, I solved the problem myself:
$(function() {
$('#test').nyroModal({
endShowContent: function(elts, settings) {
$('#form', elts.content).submit(function(e) {
e.preventDefault();
window.clb = false;
window.ajaxSubmit = true;// (1)add a new window attribute
$.nyroModalRemove();
setTimeout(function() {
$.ajax({
url: this.action,
data: $(this).serialize(),
success: function() {
if (window.clb)
window.clb();
}
});
}, 5000);
});
},
beforeHideContent: function(elts, settings, callback) {
if (window.ajaxLoadDone || !window.ajaxSubmit)// (2) ajax done or abort
callback();
else {
window.clb = callback;
elts.loading.show();
elts.content.hide();
window.ajaxSubmit = null;// (3) clear, or the same error will occur again.
}
}
});
});
change you code just in (1)(2)(3), if any problem, please let me know, thank you so much!
luohui0595(a)163.com
Dec 30, 2009
Thanks collectsunshine for sharing your fix. I updated the wiki page with it. |
||||||||
You could open a modal using a DOM element. This element will show something similar to the load animation. To manually open the modal: $.nyroModalSettings({ url: '#domId' }); Then, once your ajax page is loaded, simply call: $.nyroModalRemove(); Did it help?