JQuery File Upload: sending two request on data.submit()

Question

I am trying to Upload videos in my app using Paperclip and jquery-fileupload-rails

I followed ulpoad file with paper clip and jquery to upload video, but was uploading video just as I select the video and don't wait for pressing submit button, So I followed 1: jQuery file upload: Is it possible to trigger upload with a submit button? to select a single video and upload it on submit button, not on selecting file.

But There is issue on whether I put submit button in the form or outside form.

When I put the submit button in the form than it sends two requests to pressing submit button, one with Video and second one without Video.

And If I put button outside form that it sends one request on pressing submit button but after successful create/update it remains on the same page.

All I wanted is that on pressing Submit, sending just one request and redirect to index page on successful create/update.

In _form.slim

= simple_form_for [:admin,add] do |f|
   .wizard-content
     .row
       .col-sm-6
          = f.input :video, multiple: false, wrapper: :horizontal_file_input
          button#submit_button.btn.btn-primary
            | Save

In adds.coffee

 jQuery ->
      $('#add_video').attr('name','add[video]')
      $('#add_video').fileupload
         $('#submit_button').off('click').on 'click', ->
           data.submit()

In controller I have

def create
     if add.save
       redirect_to admin_adds_path
       flash[:success]= "Add Created"
     else
       render :new
     end
   end

   def update
     if add.update(add_params)
       redirect_to admin_adds_path
       flash[:success]= "Add Updated"
     else
       render :edit
     end
   end

there is also a _add.slim

= image_tag(@add.uploaded_file(:small), class: 'thumb')

I also created create.js.erb and edit.js.erb as suggested tutorial I followed (though, I didn't understand its use )

- if @add.new_record?
  |  alert('Failed');
- else
  |  if ($('h1') !== undefined) { $('h1').append("
  =j render partial: 'adds/add', locals: { add: @add }
  | "); }

Whats wrong with this?

Hi Muhammad. What happens if you comment out the jQuery submit code? — IAMZERG, Oct 30 '16 at 03:45
just one secod one will be with data.submi() which I removed — Muhammad Faisal Iqbal, Oct 30 '16 at 15:30

score 1 · Answer 1 · answered Oct 24 '16 at 14:07

1

Try the button inside the form and use event.preventDefault(), because it´s seems that the form is doing his default action, that is send data and reload the page and also calling the js.

$('#submit_button').off('click').on 'click', (event) ->
  event.preventDefault()
  data.submit()

answered Oct 24 '16 at 14:07

vitomd

806
7
14

It send request one time but remains on same page, however at console it says Redirected to http://localhost:3000/admin/adds Completed 200 OK in 3112ms (ActiveRecord: 91.4ms) – Muhammad Faisal Iqbal Oct 24 '16 at 14:13
You should debug a little to know where is the problem, add some puts in those methods to check if they are running, for instance before the redirect `puts ("add________")+add.to_json`. Also flash message should be before the redirect. – vitomd Oct 24 '16 at 14:25
I have tried a debugger in create/update method, also uses PUT every inch of code is running but still remains on same page – Muhammad Faisal Iqbal Oct 24 '16 at 14:30
try to change the redirect. redirect_to :root , to know if the code is reaching that line. Make sure you have it set on the routes.rb. – vitomd Oct 24 '16 at 16:38
yes it executed, says, Redirected to http://localhost:3000/ Completed 200 OK in 315ms (ActiveRecord: 69.9ms) – Muhammad Faisal Iqbal Oct 24 '16 at 16:43

inye · Answer 2 · 2016-10-24T14:59:53.253

1

When you put button outside form you can handle the done event and the redirect. Remember this POST is ajax and if you POST a change or new element you have a response via ajax no via web browser page.

Some like

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
        done: function (e, data) {
           window.location.href = "data.next_url"; 
        }
    },
});

Maybe you need to response some json (instead of redirection redirect_to admin_adds_path) to pass from controller to javascript information (some like success,error,next_url,others)

edited Oct 24 '16 at 14:59

answered Oct 24 '16 at 14:34

inye

1,786
1
23
31

I tried to place button outside from and than used $('#submit_button').off('click').on 'click', (event) -> data.submit() done: (e, data) -> alert("Upload finished.") window.location.href = "data.next_url"; But it seems that its not coming in done: method and stuck on same page – Muhammad Faisal Iqbal Oct 24 '16 at 14:58
the alert never trigger? – inye Oct 24 '16 at 15:00
no, record saved page stuck on same page , no alert – Muhammad Faisal Iqbal Oct 24 '16 at 15:06
you know how debug with the browser console? – inye Oct 24 '16 at 15:14
can you check the url of the ajax is OK and also the response? – inye Oct 24 '16 at 16:41
I can put break points and see what are the values etc. but at which point I can see response? – Muhammad Faisal Iqbal Oct 24 '16 at 16:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126541/discussion-between-inye-and-muhammad-faisal-iqbal). – inye Oct 24 '16 at 16:54
Although I couldn't solve my problem but a learned a lot with your precious help. Thanks bro – Muhammad Faisal Iqbal Oct 30 '16 at 14:43
no problem. Can you update your code to know your latest code. I think you have problem with the request and response. – inye Nov 02 '16 at 12:49

JQuery File Upload: sending two request on data.submit()

2 Answers2

Linked