如何在 Symfony2 中提交表单后立即关闭花式框弹出窗口？答案

【问题标题】：How to close a fancybox popup window immediately after submitting a form in Symfony2?如何在 Symfony2 中提交表单后立即关闭花式框弹出窗口？
【发布时间】：2014-08-26 17:51:29
【问题描述】：

我正在开发一个使用 Symfony2 进行时间管理的社交网络网站。作为该网站中群组的管理员，您可以在群组的日历中添加活动。页面如下：

如果您单击日历上的任意位置，将显示一个包含表单的花式弹出窗口，如下面的截图所示：

我想知道的是如何在提交它包含的表单后立即关闭fancybox 弹出窗口。这是包含表单的页面（即fancybox弹出窗口）的代码：

    <html>
    <head>
        <title> Wkayet </title>
         <link rel="shortcut icon" href="{{asset('bundles/ikprojhome/images/icon-WKAYET.png')}}">
        <link rel="stylesheet" type="text/css" href="{{asset('bundles/ikprojhome/css2/css.css')}}"/>
        <script src='{{asset('bundles/ikprojhome/lib/jquery.min.js')}}'></script> 

    </head>
    <body>
        <script>
              function mout() {

                  $(document).jQuery.fancybox.close();
              </script>
    <center>
        <div id="container">
            <div id="header">

            </div>
            <div id="content">
                <table width="100%" height="100%" align="center">
                    <tr>
                        <td>
                            {% for x in groupe%}
   <form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }}>
                                {% endfor %}
                                 {{ form_errors(form) }}
                                <table align="center">
                                    <tr>
                                        <td class="separation"><label for="groupname">Titre</label></td>
                                        <td>
                                     <!--<input id="titre" name="titre" required="required" type="text" size="50"/> -->
                                         <div>
                                            {{ form_errors(form.title) }}

                                            {{ form_widget(form.title) }}
                                           </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="separation"><label for="debut">Début</label></td>
                                        <td><!--<select id="debut" name="debut" class="select"></select>-->
                                            <div>
                                             {{ form_errors(form.start ) }}

                                             {{ form_widget(form.start ) }}
                                            </div>


                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="separation"><label for="fin">Fin</label></td>
                                        <td><!--<select id="fin" name="fin" class="select"></select>-->
                                            <div>
                                             {{ form_errors(form.end ) }}

                                             {{ form_widget(form.end ) }}
                                          </div> 

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="separation"><label for="lieu">Lieu</label></td>
                                        <td> <!--<select id="lieu" name="lieu" class="select"></select> -->

                                         <div>
                                           {{ form_errors(form.location) }}

                                         {{ form_widget(form.location , {'attr':{'class':'select '}}) }}
                                          </div>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="description" valign="top" class="separation"><label for="description">Description</label></td>
                                        <td><textarea id="ikproj_groupebundle_eventsgroupe_description" name="ikproj_groupebundle_eventsgroupe[description]" rows="5" cols="40"></textarea> 



                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" align="center" id="button" valign="bottom"><input class="button" type="submit" value="" onclick="mout()"/></td>
                                    </tr>
                                </table>
                                         {{form_widget(form._token)}} 
                            </form>
                        </td>
                    </tr>
                </table> 
            </div>
        </div>
    </center>
</body>
</html>

如您所见，我将指令$(document).jQuery.fancybox.close(); ..放在这里的正确指令是什么？？...有人知道吗？

【问题讨论】：

$(document).jQuery.fancybox.close(); 错误，应该是jQuery.fancybox.close();（$ 是jQuery 的别名）。将submit 事件（而不是click）绑定到form 元素并从那里调用关闭方法
或者你可以做类似<form id="myform" onsubmit="javascript:jQuery.fancybox.close();" action="{whatever}">
这是一个示例，当表单位于 iframe stackoverflow.com/a/9118087/1055987 内时，但如果表单是内联的，则无需设置 parent
首先mout函数有错别字，在父文档中隐藏fancybox使用parent.jQuery.fancybox.close();
@JFK：我该怎么说：onsubmit="javascript:parent.jQuery.fancybox.close();"在javascript函数中？？..我试过 $(document).parent.jQuery.fancybox.close();但它没有用..你知道怎么做吗？？

标签： forms symfony popup window fancybox

【解决方案1】：

我猜你的功能应该是

<script>
function mout() {
    parent.jQuery.fancybox.close();
};
</script>

那就叫它onsubmitlike

<form id="EventForm" onsubmit="mout()" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }}>

请参阅 JSFIDDLE（在您的控制台中使用 persist）

有关fancybox关闭方法的更多信息，请查看https://stackoverflow.com/a/9118087/1055987

【讨论】：