如何觸發jQuery UI的對話框時上傳開始

我必須執行上傳表單打開：如何觸發jQuery UI的對話框時上傳開始

<%= 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 %>

表單提交的完美，文件開始上傳到Amazon S3。我想要做的是觸發一個jQuery UI對話框打開上傳開始時（當我點擊提交表單），然後關閉它，當上傳完成。我已經知道如何當一個像這樣的鏈接觸發打開一個對話框：

鏈接到我的對話框的div：

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

對話框的div：

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

和最後在我的應用程序中.js

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

正如你所看到的，大部分的東西都是jquery ui網站的標準。我也想在對話框中添加一個按鈕來取消上傳。我怎樣才能做到這一點？

在此先感謝您的幫助

來源

2011-07-30 Hishalv

您可以使用jQuery的提交（）偵聽形式 - 當提交表單時（大概上傳啓動時），這將觸發。

如：

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

編輯：

不知道如何雖然取消上傳，很抱歉。但你可能從這裏得到一些啓示：http://aquantum-demo.appspot.com/file-upload

jQuery submit（）;文檔：http://api.jquery.com/submit/

來源

2011-07-30 10:32:44 jammypeach

感謝您的鏈接，將研究它，並且代碼工作正常。 – Hishalv

你可以這樣做：

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

這個打開的對話框並提交表單。當然，如果FORM不是AJAX，那麼只要文件被上傳，dialaog就會被關閉，因爲你被重定向到另一個頁面。

來源

2011-07-30 10:47:15

如何觸發jQuery UI的對話框時上傳開始

回答

相關問題