How to trigger jquery ui dialog box to open when upload begins

Question

I have a form to perform uploads:

<%= form_tag({:controller => "assets", :action => "create", :id => @question.id}, :multipart => true) do %>  
    <%= label_tag("file", "Attachment:") %><%= file_field_tag "uploadfile" %><br />
    <%= label_tag("description", "Description") %><br />
    <%= text_area_tag("description",{}, :size => "70x6") %>
    <%= submit_tag("Upload", :class => "register_submit_buttons") %> 
<% end %>

The form submits perfectly, and the file begins to upload to amazon s3. What i would like to do is to trigger a jquery ui dialog box to open when upload begins(the moment i click submit on the form) and then close it when the upload has been completed. I already know how to open a dialog when triggered by a link like this:

link to my dialog div:

<%= link_to("Open dialog", {}, :class => "open-dialog") %>

the dialog div:

<div class="dialog" title="Title">
    ...contents of div
</div>

and finally in my application.js

$(function() {
    $( '.dialog' ).dialog({
        autoOpen: false,
        width: 530,
        modal: true,
        //closeOnEscape: false,
    });
    $('.open-dialog').click(function(){
        $('.dialog').dialog('open');
        return false;
    });
});

As you can see most of the stuff is pretty standard from jquery ui website. I would also like to add a button to the dialog box to cancel the upload. How can i achieve this?

Thanks in advance for the help

totallyNotLizards · Accepted Answer · 2011-07-30 10:32:44Z

1

you can use the jQuery submit() listener for the form - this will fire when the form is submitted (and presumably when the upload starts).

eg:

$('form').submit(function(){
    //show box in here
    alert('lorem ipsum dolor sit amet');
});

EDIT:

Not sure about how to cancel the upload though, sorry. But you might get some enlightenment from here: http://aquantum-demo.appspot.com/file-upload

jQuery submit(); docs: http://api.jquery.com/submit/

answered Jul 30, 2011 at 10:32

totallyNotLizards

8,5899 gold badges54 silver badges86 bronze badges

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

1 Comment

Hishalv Over a year ago

thanks for the link, will look into it, and the code works fine.

Nicola Peluchetti · Accepted Answer · 2011-07-30 10:47:15Z

1

You could do:

$('input[type=submit]').click(function(){
     $('.dialog' ).dialag('open');
});

this opens the dialog and submits the form. Of course if the FORM is not AJAX your dialaog will be closed as soon as the file is uploaded because you are redirected to another page.

answered Jul 30, 2011 at 10:47

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Collectives™ on Stack Overflow

How to trigger jquery ui dialog box to open when upload begins

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related