jQuery ajax submit not working

I have a form to upload an image.

开发者_开发技巧<% remote_form_for(:avatar, :url => { :controller => "avatar", :action => "upload", :id => @tmp_id }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %>
                    <%= f.file_field :image, :class => 'uploader' %>

I have some Jquery to submit the form:

$(document).ready(function() { 
$('.uploader').change(function(){
 jQuery('#uploadForm').ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = "json";
  },
  complete: function(XMLHttpRequest, textStatus) {
   $('#user_image').attr('src', XMLHttpRequest.responseText);
   return false;
  },
 });
});
});

I am getting the function called on change as I tried it with an alert. However the form is not submitting. Nothing happens. Can anyone see what it wrong?

Much appreciated.

Does changing this

jQuery('#uploadForm').ajaxSubmit({

to this

$('#uploadForm').ajaxSubmit({

work?

I figured it out. The way the function is written it can't be placed inside of another form. I have to move it outside and use some CSS to position the button for file uploads.

I found a strange hack by accident. If I do the following it works: NOT RECOMMENDED

    <% remote_form_for(:avatar, :url => { :controller => "avatar", :action => "upload", :id => @tmp_id }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %>
   <% end %>
    <div class="fileinputs">
   <% remote_form_for(:avatar, :url => { :controller => "avatar", :action => "upload", :id => @tmp_id }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %>
                        <%= f.file_field :image, :class => 'file' %>
                        <% end %>
                        </div>

I basically wrote the form twice.