Question

我使用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>

IFRAME PAGE：

<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>

CODE CREATE 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中的代码控制器用于将用户添加到数据库：

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）。

请告诉我如何解决这个问题！：（

Answer 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();

    });
});

Answer 2

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

echo '<script type="text/javascript">parent.$.fancybox.close();</script>';
redirect('controller/method', 'refresh');

在fancybox类型iframe上提交表单从控制器返回数据和消息到父页面？

2 个答案: