fancybox 유형 iframe에 양식을 제출하고 컨트롤러에서 상위 페이지로 데이터 및 메시지를 반환합니까?

아미 다 마루

나는 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 페이지 :

<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의 코드 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 최신 버전 (2.0)을 사용합니다.

이 문제를 해결하는 방법을 알려주세요! :(

케이시 플린

이벤트 바인딩이 약간 섞여 있습니다. 이벤트가 트리거되면 이벤트에 바인딩됩니다.

시험

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

    });
});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관