[eluser]Bacu[/eluser]
Dear collegues,
Please could someone help me!!! I would like to load a form on a ligthbox. I need to show inside the ligthbox an error and success messages. I do not know what is missing. when I click on the submit button it loads another page. I want it to show the result inside the ligthbox without a new page loading.
Link.php // link call form in a lightbox popup
Code:
<div class="mail-signup-content">
<a href="/mail_signup" class="form-in-link">Call ligthbox popup form</a>
</div>
View - mail_signup.php // form
Code:
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="mail-signup-content">
<a class="close" href="close">
close
</a>
<form id="sign-up" method="post" action="<?php base_url() ?>/mail_signup">
<p class="space"><input type="text" name="email" value="<?php echo set_value('email'); ?>" size="30" />
<input type="hidden" name="type" value="<?php echo set_value('type'); ?>" size="50" />
<input type="submit" class="button" value="Submit" />
</form>
<div class="form-message"><?php if(isset($result)) echo $result; ?></div>
</div>
</div>
[removed][removed]
[removed][removed]
</body>
</html>
controller - Mail_signup.php // I dont know what is missing to print the result on the popup ligthbox without refresh other page
Code:
<?php
Class Mail_signup extends CI_controller
{
public function __construct()
{
parent::__construct();
$this->load->model('signup_model');
}
public function index()
{
$this->load->helper(array('form', 'url'));
$this->load->view('mail_signup');
$data['base'] = $this->config->item('base_url');
$data['css'] = $this->config->item('css');
}
public function getSignupForm()
{
print_r(JSON_ENCODE($this->load->view('mail_signup', $data, true)));
}
}
generic.js // Jquery Overlay ligthbox form Popup
Code:
$('a.form-in-link').click(function(e){
ContactForm(e);
});
$(window).resize(function(e){
$('div.overlay').css({
width : $(document).width(),
height : $(document).height()
});
});
//Define and append an opaque overlay to the page
function appendOverlay()
{
$('body').append('<div id="overlay" class="overlay"></div>');
var docHeight = $(document).height();
var docWidth = $(document).width();
$('div.overlay').css(
{
width : docWidth
,height : docHeight
,backgroundColor : '#000'
,position : 'fixed'
,top : '0px'
,left : '0px'
});
$('div.overlay').animate({
opacity: 0.85
}, 1000);
}
//If the overlay itself is clicked then remove it
$('div.overlay').live('click', function(){
$('.lb').fadeOut('fast', function()
{
$('div.overlay').fadeOut(1000);
$('div.overlay').remove();
$('.lb').remove();
});
});
//Watch for the click of the close button and take action
$('a.close').live('click', function(e){
e.preventDefault();
$('.lb').fadeOut('fast', function(){
$('div.overlay').fadeOut(1000);
$('div.overlay').remove();
$('.lb').remove();
});
return false;
});
function ContactForm(e)
{
e.preventDefault();
appendOverlay();
$.ajax(
{
type: "POST"
,url: '/val_signup'
,success : function(response)
{
$('body').append(response);
//Work out the number of pixels that have been scrolled so that the form is always displayed in the viewport
scrollPos = $(window).scrollTop();
posTop = parseInt(($(window).height()-350)/2)+scrollPos;
$('.mail-signup-content').css(
{
opacity : '0'
,position : 'absolute'
,top : posTop+'px'
,left : parseInt(($(window).width()-1020)/2+225)+'px'
,zIndex : 100
})
//fade in the contact form
$('.mail-signup-content').animate({
opacity: 1
}, 1000, function(){
});
}
});
}
controller - val_signup //validation form
Code:
<?php
class Val_signup extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('signup_model');
}
public function index()
{
$data['result'] ='';
$this->load->library('form_validation');
$this->load->database();
$this->form_validation->set_rules('email', 'Email', 'required|valid_email', 'E-mail is not valid!');
if ($this->form_validation->run() == FALSE)
{
$data['result'] = validation_errors();
$this->load->view('mail_signup', $data);
}
else
{
// call model DB
$data['result'] = $this->signup_model->create();
$this->load->view('mail_signup', $data);
}
}
}
