current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite

I am trying to upload an image using asynchronous submission of form , this is my Rails HTML :

<%= form_for(:image, :url => {:controller=> 'questions',:action => 'upload_Qimage'}, :html => {:id=>'qimage_upload'}) do |f| %>
<%= f.file_field :image, :onchange => " return uploadImage() ; "  %>
<%= f.hidden_field :id , :value => Digest::MD5.hexdigest((current_user.id + Time.now.to_i).to_s )[0,7] %>
<% end %>

This is my js function uploadImage() : 

function uploadImage ()
    {
       $('#qimage_upload').submit() ; 
    $('#qimage_upload').submit( function() {  
                    return false ;   
       }

Ignore the ajax code inside the submit function , I cannot get the second alert even after commenting it out . I have been working on this all day now and can't figure out what's wrong with it .

UPDATE : Please note the update in the code above , using a simple submit() with no callback works but it does not serve my purpose as it tries to render a view for the action . Is this a jqeury version issue ?

Second Update : This is what my controller action looks like : 

def upload_Qimage

       @image = Image.new(params[:image])
       @image.save

   end

No matter what I try with the jquery and html , it still tries to render a view . The file is saved with the current updated js but it still tries to render a view when I want it do nothing or rather just return some data (not a partial render , just data)

share|improve this question
    
have you tried :remote => true in form_for tag? –  Deepika May 7 '13 at 11:33
    
Yes , does not do anything . My issue is with alert in the submit function . It should trigger , regardless of what else is in there . –  Superq May 7 '13 at 11:38
    
submit event will be called when you will submit the form. But in your form there is no submit. –  Deepika May 7 '13 at 11:46

2 Answers 2

up vote 2 down vote accepted

Learn the difference between .submit() and .submit(handler): the first method submits the form whereas the second one just binds an event handler to the event. So an alert doesn't appear because you bind the event handler but do not actually submit the form. Try running $('#qimage_upload').submit() after binding a handler:

$('#qimage_upload').submit(function() {  
    alert(1);
    $.ajax({
        // blah-blah-blah
    });
    return false; 
}); 
$('#qimage_upload').submit();
share|improve this answer
    
Thanks , that makes things clear . But I was following the answer from this question : stackoverflow.com/questions/6723334/… Using a .submit() rails tries to render the view for the action . I want to silently upload the image asynchronously. How do I do that ? –  Superq May 7 '13 at 12:04
    
Hey, I think I got it . Thanks !! –  Superq May 7 '13 at 12:10
    
Hey , mentioning submit afterwards does not actually call the submit because of the binder , the only option seems to be writing an ajax request for uploading the image file which is a messy task . Calling the submit before the binder makes the binder useless (check my second update) –  Superq May 7 '13 at 13:25
up vote 0 down vote

You want to trigger the alert no matter what happened with the AJAX?

http://api.jquery.com/jQuery.ajax/#jqXHR

jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });

This will trigger in any case, either success of failure of the AJAX call.

You are also missing to capture the event and stop it from further execution. Take a look at the events (this is also valid for vanilla JavaSCript).

$('#qimage_upload').submit() ; //This triggers and submitts the form  
$('#qimage_upload').submit( function() {  //therefore, you will never reach this when the new page has been loaded
    ... }

Therefore, stop the event from happening

$('#qimage_upload').submit(function(event){
event.preventDefault();

....

return false;
});

I know that return false can be enough, but this is the proper way to handle it.

share|improve this answer
    
Please take a note of the update above , alert was being used for debugging . It seems the problem is with describing a callback function with submit . Please advise on the same . –  Superq May 7 '13 at 11:46
    
@Superq Check my edit, maybe this will be more helpfull. –  DrColossos May 7 '13 at 11:54
    
I did not make it clear , I used the first submit just now as part of debugging . The original code wouldn't have two submits . Just the second one with a callback . I want the submit with a callback to work . But currently only the submit without callback is working . I am not using them together , but commenting out one when using the other. –  Superq May 7 '13 at 12:00
    
I actually need to stop the new page from rendering after the submit, just load the image asynchronously and that's it . –  Superq May 7 '13 at 13:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.