0

我使用 fancybox 类型的 iframe 并在其中放置一个表单。我有一个按钮类型的链接（不是输入提交按钮）。
我想在提交表单后关闭fancybox，它将表单字段和消息flashdata（在CodeIgniter中）返回到父页面。
下面的代码：
父页面
//click button from parent page, popup fancybox form (type iframe)

<a class="addnew hand-pointer" data-height="410" onclick="addnew();">Add new user</a>
<script type="text/javascript">
function addnew() {
    var url = '<?php echo $base_url; ?>' + 'ctl_user/load_popup_add_user';
    CreateFancyBox('a.addnew', url, '45%', 390);
}
<script>

框架页面：

<div style="background-color: white;">
    <form id="frmAddUser" method="post" action="">
        <table id="tblUserAdd" cellpadding="0" cellspacing="10" width="100%" border="0">
......
<tr>
<td></td>
      <td class="t-right">
      <a id="btnAdd" class="apply hand-pointer">Apply</a>
      <a href="#" class="cancel">Cancel</a>
      </td>
</tr>
</table>
        <input type="hidden" name="add" value="add_new_user" />
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#btnAdd').click(function(e)
        {
            e.preventDefault();
            $('#frmAddUser').bind('submit', function() 
            {
                $.ajax({
                    type: 'POST',
                    url: '<?php echo $base_url; ?>ctl_user/add_user',
                    data: $(this).serializeArray(),
                    success: function(data) {
                        //close fancybox
                        parent.$.fancybox.close();
                        //return data form fields to parent page
                                                //I dont know to write any more
                    }
                });
            });
        });
    });
</script>

代码创建 FANCYBOX：

function CreateFancyBox(selector, url, width, height) {
    $(selector).fancybox({
        'href': url,
        'scrolling'         : 'no',
        'titleShow'         : false,
        'titlePosition'     : 'none',
        'openEffect'        : 'elastic',
        'closeEffect'       : 'none',
        'closeClick'        : false,
        'openSpeed'         : 'fast',
        'type'              : 'iframe',
        'padding'           : 0,
        'preload'           : true,
        'width'             : width,
        'height'            : height,
        'fitToView'         : false,
        'autoSize'          : false,
        'helpers'           : { 
            overlay :   {
                'closeClick': false,
            }
        },
        afterClose          : function() { //I search StackOverflow, add this function to reload parent page, it will appear the flash data message notification which I write on controller "add_user"
            parent.location.reload();
        }
    });
}

CODEIGNITER 中的代码 CONTROLLER 用于将用户添加到数据库：

public function add_user() {
        // var_dump('hehehe');
        $departmentid    = $this->input->post('department');
        $fname           = $this->input->post('fullname');
        $email           = $this->input->post('email');
        $mobile          = $this->input->post('mobile');
        $result = $this->user->add_new_user($departmentid, $fname, $email, $mobile);
        if($result != FALSE) {
            $this->session->set_flashdata('msg','Success! New user has been added!');
            $this->session->set_flashdata('type_msg','success');
        } else {
            $this->session->set_flashdata('msg','Error! Can\'t add user!');
            $this->session->set_flashdata('type_msg','error');
        }
        if($this->input->post('add_new_user')) {
            header('Location: '.base_url().'ctl_user'); //return parent page after add user to database and close popup fancybox
            exit;
        }
    }

但是我没有关闭这个fancybox，数据没有提交到我的数据库，也没有收到来自父页面的消息通知。

我使用fancybox 最新版本（2.0）。

请告诉我如何解决这个问题！:(

4

2 回答 2

1

你的事件绑定有点混乱。当事件被触发时，您将绑定到一个事件。

尝试

$(document).ready(function() {
   $('#frmAddUser').bind('submit', function() 
        {
            $.ajax({
                type: 'POST',
                url: '<?php echo $base_url; ?>ctl_user/add_user',
                data: $(this).serializeArray(),
                success: function(data) {
                    //close fancybox
                    parent.$.fancybox.close();
                    //return data form fields to parent page
                                            //I dont know to write any more
                }
            });
        });
    $('#btnAdd').click(function(e)
    {
        $('#frmAddUser').trigger('submit');
        e.preventDefault();

    });
});
于 2013-07-12T03:22:05.593 回答
0

我会建议一种不同的技术。只需将表单正常提交到控制器方法并根据您可以编写的条件将数据插入数据库：

echo '<script type="text/javascript">parent.$.fancybox.close();</script>';
redirect('controller/method', 'refresh');
于 2013-07-12T06:39:36.837 回答