Question

我有一个从数据库填充的在线用户名单。每个用户名都是一个链接，用于在fancybox（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，因为它可以通过按从输入字段内提交表单输入。

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

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

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

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

主：

$(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();
        });
    }
});

在提交时关闭iFrame fancybox的问题

1 个答案: