[eluser]blorriman[/eluser]
I'm having a problem using a form (with CKEditor) inside a Colorbox. Everything works great the first time I open it, but if I close Colorbox and open it again the textarea is not there.
I am getting this error in FF console from line 209 of jquery.colorbox.js
Code:
$.data(this, colorbox) is null
var relRelated = $.data(this, colorbox).rel || this.rel;
Here is the controller:
Code:
function modal() {
$this->load->library('lorros');
$form1 = $this->input->post('fullname');
$form2 = $this->input->post('email');
$comments = $this->input->post('comments');
$subject = 'this is a test subject';
if ($form1 != NULL) {
// add to database
$data = array(
'form1' => $form1,
'form2' => $form2,
'subject' => $subject,
'comments' => $comments,
);
$this->test_model->insert($data);
$this->test_model->add_cron_job($data);
}
$data['test_1'] = $this->test_model->test_modal();
$this->template->write_view('maincontent', 'test/colorbox', $data);
$this->template->write('title', 'testing colorbox');
$this->template->render();
}
function modal_form() {
$this->load->view('test/modal-form');
}
This is the view:
Code:
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]
[removed]
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
$("a[rel='test']").colorbox();
});
[removed]
<div id="content">
<div class="maincontent">
<div id="content-left">
<p>Test Modal Form</p>
<span class="icon16 clipboard_16"> </span>
<a href="/test/modal_form" rel="test" title="if you don't see the comments textarea, refresh the page" class="">
open form
</a>
<hr>
</div>
</div>
</div>
And this is the form:
Code:
[removed]
$(function(){
$.ajaxSetup ({
cache: false
});
$("#testForm").validate();
CKEDITOR.replace( 'comments',
{
toolbar : 'MyToolbar',
uiColor : '#d0d0d0'
});
$("#submit").click(function() {
CKEDITOR.instances.comments.updateElement();
})
});
[removed]
<?php
$attributes = array(
'class' => 'form',
'id' => 'testForm',
'rel' => 'test',
);
$label = array(
'class' => 'label',
);
$test_1 = array(
'name' => 'test_1',
'id' => 'test_1',
'value' => set_value('test_1'),
'maxlength' => 80,
'size' => 50,
'class' => 'textfield required',
);
$test_2 = array(
'name' => 'test_2',
'id' => 'test_2',
'value' => set_value('test_2'),
'maxlength' => 80,
'size' => 50,
'class' => 'textfield required email',
);
$comments = array(
'name' => 'comments',
'id' => 'comments',
'rows' => '10',
'cols' => '50',
'class' => 'textarea required',
);
$submit = array(
'name' => 'submit',
'id' => 'submit',
'value' => 'test form',
'class' => 'buttonForm',
// 'onclick' => 'return loadSubmit()',
);
?>
<div class="form-area-modal" id="test-form">
<h4><span class="icon24 clipboard_24"> </span>Test Modal Form</h4>
<?php echo form_open('/test/modal', $attributes); ?>
<?php
echo form_label('Name <span class="redtext">*</span>', 'test_1', $label, $test_1);
echo form_input($test_1);
?>
<div class="clear"></div>
<?php
echo form_label('Email <span class="redtext">*</span>', 'test_2', $label, $test_2);
echo form_input($test_2);
?>
<div class="clear"></div>
<?php
echo form_label('Comments <span class="redtext">*</span>', 'test_2', $label, $comments);
echo form_textarea($comments);
?>
<div class="clear"></div>
<div class="clear v-space-10"></div>
<p align="center"><?= form_submit($submit); ?></p>
<?php echo form_close(); ?>
</div>
Any suggestions would be greatly appreciated.