rails 3 display loading animation on form submit with javascript validations

Question

I have a form which I submit via ajax, while the form is submitting, I need to display a loading animated gif. It is all working fine when I do the folowing

my form

  <% form_tag url_for(:action=>'create'),:remote=>true, :id=>"registration_form" do %>
   ...some form fields...
   <% submit_tag 'Create my account' %>
 <% end %>

I have an animated gif which is located in a hidden div which is:

<div id="loading_registration" style="display:none" >loading...</div>

and in my script section I have

  var toggleLoading = function() { $("#loading_registration").toggle() };
  $("#registration_form")
  .bind("ajax:loading",  toggleLoading)
  .bind("ajax:complete", toggleLoading)
  .bind('ajax:success', function(evt, data, status, xhr) {
                   });

now I needed to change this in order to perform a client javascript validation functions befeor the form is submitted via ajax to the server.

so I did the following:
in my script section I added the following function:

$('#registration_form').submit(function() {

if ($("#first_name").val()!=''){
    $(this).ajaxSubmit(options); //submit the form 
}
else{
    ..display some client side message to the user
}
    // !!! Important !!!
    // always return false to prevent standard browser submit and page navigation
    return false;
});

It is working all right and perform the javascript validations before it sands the ajax call.
but the problem is that now it is not displaying my loading gif animation
I tried to add it to the option section of the ajaxSubmit in the follwing way:

var toggleLoading = function() { $("#loading_registration").toggle() };                   
 var options = { loading: toggleLoading,
                 complete: toggleLoading}                    


$('#registration_form').ajaxSubmit(options);

but it didn't worked. it only working if I call an alert function from inside like this

var options = { loading: alert('loading'),
        complete: alert('complete')}                     
 $('#registration_form').ajaxSubmit(options);

but if I call to a function instead of the alert it stops working

I will be glad to here if someone have a solution to this problem

Thanks

leenasn · Accepted Answer · 2011-07-24 12:45:32Z

1

Have you tried the same with jquery validator plugin?

answered Jul 24, 2011 at 12:45

leenasn

1,48612 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

winter sun Over a year ago

my problem is not in the validations but in the loading animation gif which need to be displayed when the form is submitted via ajax

Collectives™ on Stack Overflow

rails 3 display loading animation on form submit with javascript validations

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related