2009-11-04 77 views
0

請原諒複雜的標題。這是我的情況:我正在開發一個Grails應用程序,並將jQuery用於一些更復雜的UI內容。提交表單後Ajax調用父窗口

系統設置的方式,我有一個項目,它可以有不同的文件(用戶提供)與它相關聯。在我的Item/show視圖中,有一個添加文件的鏈接。這個鏈接彈出一個jQuery模式對話框,顯示我的文件上傳表單(遠程.gsp)。

因此,用戶選擇文件並輸入評論,當表單被提交時,對話框關閉,並且Item/show視圖上的文件列表被刷新。我最初通過添加

onclick="javascript:window.parent.$('#myDialog').dialog('close');" 

到我的提交按鈕。

這工作得很好,但是當提交一些較大的文件時,最終會出現一個競爭條件,在保存新文件之前關閉對話框並刷新文件列表,從而導致文件列表過期(該文件仍然正確保存)。

所以我的問題是,什麼是確保對話框直到表單提交操作完成後才關閉的最佳方法?我嘗試過在Grails中使用 <g:formRemote>標籤,並在「after」屬性中關閉對話框(根據Grails文檔,該腳本在表單提交後調用),但我收到一個錯誤(取自FireBug),聲明這

window.parent.$('#myDialog').dialog is not a function 

這是一個簡單的JavaScript/Grails的語法問題,我很想念這裏,還是我要對這個完全錯誤的?

非常感謝您的時間和幫助!

回答

0

爲了避免您提到的競爭情況,我會在提交的頁面返回後運行「刷新文件列表」代碼。我不熟悉的Grails,但這個僞代碼應該給你一個想法:

if (file was uploaded successfully){ 
print "<html> 
    <body onload='code_refresh_file_list;window.parent.$(\"#myDialog\").dialog(\"close\");'> 
    file uploaded successfully... 
    </body> 
</html>"; 
}else{ 
print "<html> 
    <body> 
    could not upload file due to [reason], please re-upload the file 
    </body> 
</html>"; 
} 

注意身體的onload =「」在有條件的第一部分...

希望幫助

0

我是一個新手,不知道Grails,但我一直在做直JQuery ajax調用,如下所示。看起來好像你正在考慮這個錯誤 - 忘了點擊事件並在從服務器收到文件已成功保存的響應後關閉對話框。

在下面的代碼中,函數接收來自服務器,字符串,json,任何東西(這是響應)的東西,如果需要的話,你可以用它做點什麼,比如顯示消息並關閉對話框。

$('#myForm').submit(function() { 
    $.post($(this).attr('action'), $(this).serialize(), function(response) { 
      myDialog('close'); // pseudo code here 
      $('message').html(response); 
    }); 
    return false; 
    }); 

順便說一句,你可能完全擁抱jQuery和消除的JavaScript和HTML混合。

0

可能是因爲jquery模式的庫發生的情況,當對話框關閉被調用時無法使用。試試這個

jQuery(document)。(功能(){

jQuery('#myDialog').dialog('close'); 

});