나는 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] 삭제
몇 마디 만하겠습니다