提交时关闭 iFrame fancybox 的问题

Question

我有一个从数据库填充的在线用户名册。每个用户名都是一个链接，可以在花式框（iframe）中打开一个表单以允许编辑信息。子窗口没有js，表单数据提交到数据库，但是fancybox没有关闭。我需要它来提交数据，然后关闭fancybox。

我已经尝试过来自 this question 的 Amr 答案，它现在关闭但没有提交。

这是打开fancybox的代码：

<script type="text/javascript">

$(function() {
    $(".updateLink").fancybox({ 
                             'padding'        : 0, 
                             'autoScale'      : false, 
                             'transitionIn'   : 'none', 
                             'transitionOut'  : 'none', 
                             'width'          : 650, 
                             'height'         : 560,
                             'showCloseButton': true,
                             'type':         'iframe' 
                            }); 
});

</script>



<?php
    foreach ($contacts as $contact) {

    $updateLink = '<a class="updateLink" href="update_person.php?people_id='.urlencode($contact->people_id).'&company_id='.urlencode($company_id).'&uid='.urlencode($uid).' ">'.$contact->first_name.' '.$contact->last_name.'</a>';

        print '<tr>';
        print '<td>'.$contact->people_id.'</td>';
            print '<td>'.$updateLink.'</td>';
            print '<td>'.$contact->title.'</td>';
            print '<td>'.$contact->email.'</td>';           
        print '</tr>';
    } # end foreach contact
     ?>

这是 iframed 文件的代码现在的样子，带有关闭 fancybox 的函数：

<?php 

include('/home/www/viola/ssl/include/ez_sql.php');
include('/home/www/lib/common_functions.php');

if (isset($_POST['submit'])) {
    //write to roster table
    $people_id = $_POST['people_id'];
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $title = $_POST['title'];
    $email = $_POST['email'];

   $db->query("INSERT INTO roster (people_id, first_name, last_name, title, email) values ($people_id, '$first_name', '$last_name', '$title', '$email')");

}

else {

   $people_id = urldecode($_GET['people_id']);
   $uid = urldecode($_GET['uid']);


   $query = "SELECT id AS people_id, first_name, last_name, title, email
FROM new_people 
WHERE active = 1 AND id = $people_id";

   $person = $db->get_row($query);      
   $people_id = $person->people_id;   
   $first_name = $person->first_name;
   $last_name = $person->last_name;
   $email = $person->email;
   $title = $person->title;

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?= $jsPath; ?>/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
 function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
</script>

<style>
fieldset {margin: 35px;}
label {margin-right: 30px;}

input[type="text"]{
   width:350px;
   /*display:block;*/
}
input[type="button"]{
   width:120px;
   margin-left:35px;
   display:block;
}

select {
   width:350px;
}
</style>

   <form action="update_person.php" method="post" id="myForm">
      <input type="hidden" name="people_id" value="<?= $people_id; ?>"/>
       <fieldset>
            <legend>Update <?= $first_name . " " . $last_name; ?></legend>
            <table>
               <tr>
                  <td><label for="first_name">First Name:</label></td>
                  <td><input type="text" name="first_name" value="<?= $first_name; ?>"/></td>
               </tr>

               <tr>
                  <td><label for="last_name">Last Name:</label></td>
                  <td><input type="text" name="last_name"  value="<?= $last_name; ?>"/></td>
               </tr>

                <tr>
                  <td><label for="user_email">Email:</label></td>
                  <td><input type="text" name="email" value="<?= $email; ?>"/></td>
               </tr>

               <tr>
                  <td><label for="title">Title:</label></td>
                  <td><input type="text" name="title" value="<?= $title; ?>"/></td>
               </tr>


               <tr><td colspan="2" style="text-align:center"><!--<input type="submit" id="mysubmit" name="submit" value="Submit changes" />-->
 <button onclick="closeME();">
    <span>Save changes</span>
    </button>

</td></tr>
            </table>

       </fieldset>
   </form>

<?
}
?>

在链接帖子中建议更改之前，只有注释掉的 <input type="submit" id="mysubmit" name="submit" value="Submit changes" /> - 这确实正确提交了数据。

知道我需要做什么才能让新代码既关闭fancybox又提交表单？

Answer 1

您当前的代码存在以下问题之一：

• Fancybox 关闭，但表单未正确提交
• 表单已正确提交，但fancybox 不会关闭。

解决方案
JS Fiddle 的工作代码：http://jsfiddle.net/hMcc8/7/show/（省略 /show/ 以查看源代码）。必须添加/show/ 才能使代码正常工作，这样Same origin policy 就不会干扰。

包含fancybox JS和CSS文件，并在你的主文件中定义如下函数：

function fancyBoxClose(){
    $("#fancybox-frame").load(function(){
        $.fancybox.close();
    });
}

框架文件的小提琴：http://jsfiddle.net/SnTwQ/7/
将submit 事件处理程序绑定到您的表单，该处理程序调用parent.fancyBoxClose()。使用 submit 事件而不是按钮 click，因为可以通过在输入字段中按 Enter 来提交表单。

$(function(){
    $("#myForm").submit(function(){
        parent.fancyBoxClose();
    });
});

它是如何工作的？
提交表单时，调用父函数。此函数将onload 事件处理程序附加到 Fancybox 框架。表单提交完成后，会加载一个新页面。
当页面完成加载时，onload 事件被触发。我们从这个onload 事件中调用$.fancybox.close()。结果，fancybox 按预期关闭。

相关答案：Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?

---

更新：另一种方法。小提琴：http://jsfiddle.net/hMcc8/9/show/。
根据 cmets，表单被提交到同一页面。当页面在同一个域中提供时，以下代码应该始终有效：

主要：

$(function() {
    $(".updateLink").fancybox({
         'padding'        : 0,
         'autoScale'      : false,
         'transitionIn'   : 'none',
         'transitionOut'  : 'none',
         'width'          : 650,
         'height'         : 560,
         'showCloseButton': true,
         'type'           : 'iframe',
         'onClosed': function(){ /* Reset variable when closing*/
             fancyBoxToClose = false;
         }
     });
});
var fancyBoxToClose = false;
function fancyBoxLoaded(){
    if (fancyBoxToClose) {
       fancyBoxToClose = false;// Reset flag
       $.fancybox.close();     // Close fancybox
       return true;            // Callback for frame
    }
}
function fancyBoxClose(){
    fancyBoxToClose = true;    // Activate flag
}

框架：

// You don't need fancybox code at this page
$(function(){
    if(parent.fancyBoxLoaded()){ /* Notify that the DOM has finished*/
        // If the parent function returned true, this page is going to be closed.
        $('body').hide();  //Hide body, so that the user cannot submit another form.
    }
    else {
        $("#myForm").submit(function(){
            parent.fancyBoxClose();
        });
    }
});