Re: Creating a Preview page

Got it now.

In case it helps anyone else, here's what I did:

In the header, include:

echo $javascript->link('jquery.form.js');
echo $javascript->link('jquery.jqmodal.js');
echo $html->css('jqmodal.css');

In the controller, include 'Ajax' in the $helpers array.

The view itself (/pages/admin_edit.ctp):

<!--
Include an empty div which the modal dialog will show in
At some point, I may change the message 'please wait' to an animated
'waiting' gif
It's important that the first div here has the class 'jqmWindow'; the
ids can be anything
-->
<div id="page_modal" class="jqmWindow"><div
id="page_modal_content">Generating preview... please wait...</div></
div>
<!-- Create the form, I called it 'ajaxForm' -->
<?php echo $form->create('Page', array('id' => 'ajaxForm'));?>
<!-- form elements -->
...
<!-- content area for fck ('Cake' is the name of the toolbar I'm
using ) -->
echo '<div class="input textarea">';
echo $form->label('Content');
echo $form->input('content', array('type' => 'textarea', 'rows' =>
20, 'cols' => 50, 'label' => ''));
echo $fck->load('Page/content', 'Cake');
echo '</div>';
<!-- Form submission - the preview button has to have class 'jqModal'
-->
echo '<input type="submit" value="Preview Page" id="preview_btn"
class="jqModal"/>';
echo '<input type="submit" value="Save Changes" />';
echo '</form>';

And the the script (still in the view file):
<script type="text/javascript">
$('#page_modal').jqm(); // initialises dialog
// Now set onclick
$('#preview_btn').click(function(e){
// Get current page content from fck iframe and copy it into the
textarea which has $data in it (fck doesn't automatically update)
var oEditor = FCKeditorAPI.GetInstance('PageContent'); // Instance
name is PageContent because the text area is data[Page][content]
var newcontent = oEditor.GetData();
$('#PageContent').html(newcontent); // The textarea generated by fck
has the same name as the Instance
// Submit the form using ajax
$('#ajaxForm').ajaxSubmit({
url: '/admin/pages/preview',
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
},
success: function(responseText){
$
('#page_modal').jqmShow().find('#page_modal_content').html(responseText);
}
});
// Prevent the form from submitting
e.preventDefault();
});
</script>

In the controller I have:
function admin_preview() {
if (!empty($this->data)) {
$page = $this->data;
}else {
return null;
}
$this->set('page', $page);
// Get page navigation
$navlist = $this->get_nav();
if($navlist) {
$this->set('navlist',$navlist);
}
$this->render('display');
}

Hope this helps someone else. Thanks again to cricket and others for
the help! I feel like I've learned a whole new thing now!

--
Our newest site for the community: CakePHP Video Tutorials http://tv.cakephp.org
Check out the new CakePHP Questions site http://ask.cakephp.org and help others with their CakePHP related questions.

To unsubscribe from this group, send email to
cake-php+unsubscribe@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php