Issue 327: Manually show/hide loading animation - how?
Status:  Fixed
Owner: ----
Closed:  Oct 2009
Reported by atour...@gmail.com, Sep 7, 2009
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
Project Member #1 nyro...@gmail.com
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?
Sep 8, 2009
#2 atour...@gmail.com
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
Project Member #3 nyro...@gmail.com
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
Project Member #4 nyro...@gmail.com
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
#5 luohui0...@163.com
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
#7 luohui0...@163.com

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
Project Member #8 nyro...@gmail.com
Thanks collectsunshine for sharing your fix. I updated the wiki page with it.