提交表单后，Ajax调用父窗口
[英]Ajax call to parent window after form submission
问题描述
Pardon the complicated title. 
原谅复杂的标题。 Here's my situation: I'm working on a Grails app, and using jQuery for some of the more complex UI stuff. 这是我的情况：我正在使用Grails应用程序，并且使用jQuery来处理一些更复杂的UI。
The way the system is set up, I have an item, which can have various files (user-supplied) associated with it. 系统的设置方式有一个项目，该项目可以具有与之关联的各种文件（用户提供）。 On my Item/show view, there is a link to add a file. 在我的项目/显示视图上，有一个添加文件的链接。 This link pops up a jQuery modal dialog, which displays my file upload form (a remote .gsp). 该链接弹出一个jQuery模态对话框，其中显示了我的文件上传表单（远程.gsp）。
So, the user selects the file and enters a comment, and when the form is submitted, the dialog gets closed, and the list of files on the Item/show view is refreshed. 因此，用户选择文件并输入注释，然后在提交表单时关闭对话框，并刷新“项目/显示”视图上的文件列表。 I was initially accomplishing this by adding 我最初是通过添加来完成此操作的
onclick="javascript:window.parent.$('#myDialog').dialog('close');"
to my submit button. 到我的提交按钮。
This worked fine, but when submitting some larger files, I end up with a race condition where the dialog closes and the file list is refreshed before the new file is saved, and so the list of files is out of date (the file still gets saved properly). 这种方法工作正常，但是在提交一些较大的文件时，我遇到了竞争状况，其中对话框关闭并且文件列表在保存新文件之前被刷新，因此文件列表已过期（文件仍然会保存正确）。
So my question is, what is the best way to ensure that the dialog is not closed until after the form submit operation completes? 所以我的问题是，确保表单提交操作完成后才关闭对话框的最佳方法是什么？ I've tried using the <g:formRemote > tag in Grails, and closing the dialog in the "after" attribute (according to the Grails docs, the script is called after form submission), but I receive an error (taken from FireBug) stating that 我尝试在Grails中使用<g:formRemote >标记，并在“ after”属性中关闭对话框（根据Grails文档，在提交表单后调用该脚本），但是我收到一个错误（取自FireBug） ） 说明
window.parent.$('#myDialog').dialog is not a function
Is this a simple JavaScript/Grails syntax issue that I'm missing here, or am I going about this entirely wrong? 这是我在这里缺少的一个简单的JavaScript / Grails语法问题，还是我要完全解决这个问题？
Thanks so much for your time and assistance! 非常感谢您的时间和协助！
3 个解决方案
解决方案1
0 2009-11-04 20:41:53
To avoid the race condition you mentioned, I would run the "refresh the file list" code after the submitted page has returned. 为了避免您提到的竞争状况，我将在提交的页面返回后运行“刷新文件列表”代码。 I am not familiar with Grails, but this psuedoCode should give you an idea: 我不熟悉Grails，但是这个psuedoCode应该给您一个想法：
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>";
}
Notice the body onload='' on the first part of the conditional... 注意条件的第一部分上的主体onload =''...
Hope that helps 希望能有所帮助
解决方案2
0 2009-11-06 19:13:00
I'm a bit of a newbie and don't know Grails either but I've been doing straight JQuery ajax calls as shown below. 我是一个新手，也不知道Grails，但是我一直在进行直接的JQuery ajax调用，如下所示。 It does seem like you're going about this wrong - forget about the click event and close the dialog after you get a response back from the server that the file has been successfully saved. 看来您要解决此错误-忘记了click事件，并在从服务器返回已成功保存文件的响应后关闭对话框。
In the code below, the function receives something back from the server, string, json, whatever, (this is the response), and you do something with it if you want, like show a message and close your dialog. 在下面的代码中，该函数从服务器接收到一些返回值，字符串，json，任何东西（这是响应），并且您可以根据需要对其进行处理，例如显示一条消息并关闭对话框。
$('#myForm').submit(function() {
$.post($(this).attr('action'), $(this).serialize(), function(response) {
myDialog('close'); // pseudo code here
$('message').html(response);
});
return false;
});
BTW, you might embrace JQuery entirely and eliminate that javascript mixed in with your html. 顺便说一句，您可能会完全接受JQuery并消除与html混在一起的javascript。
解决方案3
0 2010-04-08 04:02:58
May be it is happening because of library for jquery modal was not availble when dialog close was being called. 可能是由于调用对话框关闭时jquery模态库不可用引起的。 Try this 尝试这个
jQuery(document).ready(function() {
jQuery('#myDialog').dialog('close');});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.