Re: Creating a Preview page
On Tue, Feb 22, 2011 at 3:29 PM, WhyNotSmile wrote:
> I've finally got back to this. I just cannot get it to do anything
> other than submit the form. When I click the 'Preview' button, the
> form submits, I get a success message, and go back to the index page -
> which is exactly what happens if I submit the form using the regular
> Submit button.
>
> I'd really appreciate any help - I'm new to Ajax, so I'm sure I'm just
> doing something stupid, but I don't know where to start looking for
> it.
>
> Thanks!
> Sharon
>
>
>
> Here's what I have so far:
>
>
> PAGES_CONTROLLER.PHP:
>
> class PagesController extends AppController {
>
> var $helpers = array('Html', 'Form', 'Javascript', 'Time', 'Fck',
> 'Ajax');
>
> ... $uses, some functions etc ...
>
> function admin_edit($id = null) {
> $this->checkSession();
> $this->layout = 'admin';
> if (!$id && empty($this->data)) {
> $this->Session->setFlash('Invalid page requested',
> 'flash_failure');
> $this->redirect('/admin/pages/index');
> exit();
> }
> if (!empty($this->data)) {
> if ($this->Page->save($this->data)) {
> $this->Session->setFlash('Changes saved', 'flash_success');
> $this->redirect('/admin/pages/index');
> exit();
> }else {
> $this->Session->setFlash('Unable to save changes. Please correct
> errors below', 'flash_failure');
> }
> }else {
> $pagelist = $this->Page->find('list', array('conditions' =>
> array('visible' => 1, 'parent_id' => 0, 'title !=' => 'Home')));
> $this->set('pagelist', $pagelist);
> if (empty($this->data)) {
> $this->data = $this->Page->read(null, $id);
> }
> }
> }
>
> function admin_preview($id = null) {
> if (!empty($this->data)) {
> $this->Page->save($this->data);
> $page = $this->Page->read(null, $id);
> }else if (isset($id)) {
> $page = $this->Page->read(null, $id);
> }else {
> return null;
> }
> $this->set('page', $page);
> $this->render('view');
>
> }
>
> }
>
> IN VIEWS/PAGES/ADMIN_EDIT.PHP (I've left out a few divs, inputs etc.
> to make it shorter):
>
>
> create('Page');?>
>
> echo $form->input('id');
> echo '';
> echo $form->label('Content') . '';
> echo $form->input('content', array('type' => 'textarea', 'rows' =>
> 20, 'cols' => 50, 'label' => ''));
> echo $fck->load('Page/content', 'Cake');
> echo '';
>
> echo '>';
> echo '';
> echo '';
> ?>
>
>
>
>
>
> $('#preview_btn').click(function(e) {
> $(this).parents('form').ajaxSubmit({
> url: '/admin/pages/preview',
> error: function(XMLHttpRequest, textStatus, errorThrown)
> {
> alert(textStatus);
> },
> success: function(responseText){
> $
> ('#page_modal').jqmShow().find('#page_modal_content').html(responseText);
> }
> });
> e.preventDefault();
> });
>
I suspect the problem is that you haven't loaded the jquery.form
plugin. If that's the case, you'd get a fatal JS error and so the
preventDefault() wouldn't run, causing the form to submit normally to
your edit action.
If you happen to have an element for loading your FCK code, you could
add the form plugin there. For example, my jwysiwyg element has:
-- snip --
$this->Html->css('jwysiwyg/jquery.wysiwyg', 'stylesheet',
array('media'=>'screen,projector', 'inline' => false));
$this->Html->css('jwysiwyg/inline_upload', 'stylesheet',
array('media'=>'screen,projector', 'inline' => false));
echo $this->Html->script('lib/jquery.form.min', false);
echo $this->Html->script('lib/jwysiwyg/jquery.wysiwyg', false);
echo $this->Html->script('editor', false);
/* Pass an empty string if uploads should not be enabled
*/
if (!isset($upload_path)) $upload_path = '';
/* Hidden should be an array of key => value pairs representing name/value for
* any hidden form elements that should be included in the upload form
*/
if (!isset($hidden)) $hidden = array();
$hidden = json_encode($hidden);
$code = '$(function() { ';
foreach($selectors as $selector)
{
$code .= "initEditor('${selector}', '${upload_path}', ${hidden});\n";
}
$code .= '});';
$this->Html->scriptBlock($code, array('inline' => false));
-- snip --
http://jquery.malsup.com/form/
Also, it's been awhile since I used FCK. Does it have an autosave
feature? Some of these editor widgets don't automatically save the
contents of the iframe (or whatever) back to the original textarea
when something changes. You may have to make a point of copying the
FCK content to your form before submitting.
Also, also: Instead of adding a break after your label, youcould
instead style it as display: block.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
I've finally got back to this. I just cannot get it to do anything
other than submit the form. When I click the 'Preview' button, the
form submits, I get a success message, and go back to the index page -
which is exactly what happens if I submit the form using the regular
Submit button.
I'd really appreciate any help - I'm new to Ajax, so I'm sure I'm just
doing something stupid, but I don't know where to start looking for
it.
Thanks!
Sharon
Here's what I have so far:
PAGES_CONTROLLER.PHP:
class PagesController extends AppController {
var $helpers = array('Html', 'Form', 'Javascript', 'Time', 'Fck',
'Ajax');
... $uses, some functions etc ...
function admin_edit($id = null) {
$this->checkSession();
$this->layout = 'admin';
if (!$id && empty($this->data)) {
$this->Session->setFlash('Invalid page requested',
'flash_failure');
$this->redirect('/admin/pages/index');
exit();
}
if (!empty($this->data)) {
if ($this->Page->save($this->data)) {
$this->Session->setFlash('Changes saved', 'flash_success');
$this->redirect('/admin/pages/index');
exit();
}else {
$this->Session->setFlash('Unable to save changes. Please correct
errors below', 'flash_failure');
}
}else {
$pagelist = $this->Page->find('list', array('conditions' =>
array('visible' => 1, 'parent_id' => 0, 'title !=' => 'Home')));
$this->set('pagelist', $pagelist);
if (empty($this->data)) {
$this->data = $this->Page->read(null, $id);
}
}
}
function admin_preview($id = null) {
if (!empty($this->data)) {
$this->Page->save($this->data);
$page = $this->Page->read(null, $id);
}else if (isset($id)) {
$page = $this->Page->read(null, $id);
}else {
return null;
}
$this->set('page', $page);
$this->render('view');
}
}
IN VIEWS/PAGES/ADMIN_EDIT.PHP (I've left out a few divs, inputs etc.
to make it shorter):
create('Page');?>
input('id');
echo '';
echo $form->label('Content') . '';
echo $form->input('content', array('type' => 'textarea', 'rows' =>
20, 'cols' => 50, 'label' => ''));
echo $fck->load('Page/content', 'Cake');
echo '';
echo '';
echo '';
echo '';
?>
$('#preview_btn').click(function(e) {
$(this).parents('form').ajaxSubmit({
url: '/admin/pages/preview',
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
},
success: function(responseText){
$
('#page_modal').jqmShow().find('#page_modal_content').html(responseText);
}
});
e.preventDefault();
});
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
Not yet, but will share when I get it working.
On Feb 7, 11:50 am, earth wrote:
> Hello,
>
> Did you succeed in implementing the Preview feature.
> Can you please share your code.
>
> On Jan 24, 9:03 pm, WhyNotSmile wrote:
>
> > Thanks, yes, i'd renamed them for my own purposes, sorry about that!
>
> > I'll give all that a go.
>
> > Thanks again.
>
> > On Jan 22, 2:53 pm, cricket wrote:
>
> > > On Sat, Jan 22, 2011 at 9:37 AM, WhyNotSmile
> > > wrote:
> > > > Another question:
>
> > > > what are 'pages_modal' and 'pages_modal_content'? Are those in the
> > > > original window or the pop-up?
>
> > > It's '#newsletter_modal'. That's a hidden div in thepagethat JQModal
> > > uses to create the pop-up (it's not a separate window).
> > > See:http://dev.iceburg.net/jquery/jqModal/
>
> > > This gets JQModal to show the hidden div, styled as a popo-up.
> > > $('#newsletter_modal').jqmShow()
>
> > > And this part places the rendered view in the inner content div.
> > > .find('#newsletter_modal_content').html(responseText);
>
> > > But there are a ton of other plugins available (lightbox, etc.) to
> > > choose from for creating a pop-up.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
Hello,
Did you succeed in implementing the Preview feature.
Can you please share your code.
On Jan 24, 9:03 pm, WhyNotSmile wrote:
> Thanks, yes, i'd renamed them for my own purposes, sorry about that!
>
> I'll give all that a go.
>
> Thanks again.
>
> On Jan 22, 2:53 pm, cricket wrote:
>
> > On Sat, Jan 22, 2011 at 9:37 AM, WhyNotSmile
> > wrote:
> > > Another question:
>
> > > what are 'pages_modal' and 'pages_modal_content'? Are those in the
> > > original window or the pop-up?
>
> > It's '#newsletter_modal'. That's a hidden div in thepagethat JQModal
> > uses to create the pop-up (it's not a separate window).
> > See:http://dev.iceburg.net/jquery/jqModal/
>
> > This gets JQModal to show the hidden div, styled as a popo-up.
> > $('#newsletter_modal').jqmShow()
>
> > And this part places the rendered view in the inner content div.
> > .find('#newsletter_modal_content').html(responseText);
>
> > But there are a ton of other plugins available (lightbox, etc.) to
> > choose from for creating a pop-up.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
Thanks, yes, i'd renamed them for my own purposes, sorry about that!
I'll give all that a go.
Thanks again.
On Jan 22, 2:53 pm, cricket wrote:
> On Sat, Jan 22, 2011 at 9:37 AM, WhyNotSmile
> wrote:
> > Another question:
>
> > what are 'pages_modal' and 'pages_modal_content'? Are those in the
> > original window or the pop-up?
>
> It's '#newsletter_modal'. That's a hidden div in thepagethat JQModal
> uses to create the pop-up (it's not a separate window).
> See:http://dev.iceburg.net/jquery/jqModal/
>
> This gets JQModal to show the hidden div, styled as a popo-up.
> $('#newsletter_modal').jqmShow()
>
> And this part places the rendered view in the inner content div.
> .find('#newsletter_modal_content').html(responseText);
>
> But there are a ton of other plugins available (lightbox, etc.) to
> choose from for creating a pop-up.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
very nice -- 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+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php
Re: Creating a Preview page
NICE
On Sat, Jan 22, 2011 at 6:53 AM, cricket wrote:
> On Sat, Jan 22, 2011 at 9:37 AM, WhyNotSmile
> wrote:
> > Another question:
> >
> > what are 'pages_modal' and 'pages_modal_content'? Are those in the
> > original window or the pop-up?
>
> It's '#newsletter_modal'. That's a hidden div in the page that JQModal
> uses to create the pop-up (it's not a separate window). See:
> http://dev.iceburg.net/jquery/jqModal/
>
> This gets JQModal to show the hidden div, styled as a popo-up.
> $('#newsletter_modal').jqmShow()
>
> And this part places the rendered view in the inner content div.
> .find('#newsletter_modal_content').html(responseText);
>
> But there are a ton of other plugins available (lightbox, etc.) to
> choose from for creating a pop-up.
>
> --
> 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+unsubscr...@googlegroups.comFor
> more options, visit this group at
> http://groups.google.com/group/cake-php
>
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
On Sat, Jan 22, 2011 at 9:37 AM, WhyNotSmile wrote:
> Another question:
>
> what are 'pages_modal' and 'pages_modal_content'? Are those in the
> original window or the pop-up?
It's '#newsletter_modal'. That's a hidden div in the page that JQModal
uses to create the pop-up (it's not a separate window). See:
http://dev.iceburg.net/jquery/jqModal/
This gets JQModal to show the hidden div, styled as a popo-up.
$('#newsletter_modal').jqmShow()
And this part places the rendered view in the inner content div.
.find('#newsletter_modal_content').html(responseText);
But there are a ton of other plugins available (lightbox, etc.) to
choose from for creating a pop-up.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
Another question: what are 'pages_modal' and 'pages_modal_content'? Are those in the original window or the pop-up? Thanks. -- 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+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php
Re: Creating a Preview page
On Sat, Jan 22, 2011 at 9:32 AM, WhyNotSmile wrote: > Ok, my first questions are: > > * Is it ok to comment out $.wymeditors(0).update(); - I'm using FCK > Editor rather than wymeditor? Yes. That's specific to WYMEditor. I haven't used FCK in a long time; if it's necessary to update the underlying form with the HTML content, do so before allowing the form to be submitted. > * What does showIndicator do? Is that a jQuery command? It seems > like the script is bailing out at this point. That was just a function for displaying the AJAX "loading" gif. Sorry, I should have removed that. -- 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+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php
Re: Creating a Preview page
Ok, my first questions are: * Is it ok to comment out $.wymeditors(0).update(); - I'm using FCK Editor rather than wymeditor? * What does showIndicator do? Is that a jQuery command? It seems like the script is bailing out at this point. Thanks! -- 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+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php
Re: Creating a Preview page
Thank you, that's extremely helpful, exactly what I was looking for.
I'll try it out... may be back with questions!
Regards,
Sharon
On Jan 21, 9:01 pm, cricket wrote:
> On Fri, Jan 21, 2011 at 9:05 AM, WhyNotSmile
> wrote:
> > In my admin area, I would like to give the user the option to
> > 'Preview' the page they are creating or editing. I just can't quite
> > get my head around how to do it, so wondered if anyone can advise me.
>
> > Ideally, here's what I'd like: the user is editing a page in the admin
> > area, and at any time can click a button which says 'Preview'. This
> > opens a new window which shows what the page would look like if the
> > current information was saved. The user can close the window, edit
> > the page some more, and preview it as much as they want.
>
> > The issue is this:
> >> If I use a 'Preview' button, I can send the current data to the controller
> >> and show a page with that data. However, this doesn't let me open the
> >> page in a new window. I don't really want the user to have to use the
> >> back button, as that interrupts the flow of the process.
> >> If I use a Preview link, I can open a new window, but cannot send the data
> >> to the page for display.
>
> > Has anyone done this before, and can you suggest how I might go about
> > it? Would I need to use javascript or ajax? I haven't used Ajax
> > before, although I'm happy enough with javascript.
>
> I've done this. It was for an HTML newsletter (yuk!) and I included a
> preview button which did exactly this. I used JQuery and the form
> plugin to submit the form with AJAX.
>
> $('#newsletter_preview_btn').click(function(e)
> {
> showIndicator('body');
>
> /* allow editor to update itself
> */
> $.wymeditors(0).update();
>
> $(this).parents('form').ajaxSubmit({
> url: '/admin/newsletter/preview',
> error: function(XMLHttpRequest, textStatus, errorThrown)
> {
> alert(textStatus);
> },
> success: function(responseText)
> {
> hideIndicator();
>
> $('#newsletter_modal').jqmShow().find('#newsletter_modal_content').html(responseText);
> }
> });
>
> e.preventDefault();
>
> });
>
> So, here, I was using WYMEditor for the markup and JQModal for the
> pop-up. Not what I'd use today but this was quite a while ago.
>
> public function admin_preview($id = null)
> {
> Configure::write('debug', 0);
> $this->layout = 'email/html/newsletter';
> $this->viewPath = 'elements/email/html';
>
> if (!empty($this->data))
> {
> $this->Newsletter->save($this->data);
> $newsletter = $this->Newsletter->read(null, $id);
> }
> else if (isset($id))
> {
> $newsletter = $this->Newsletter->read(null, $id);
> }
> else
> {
> return null;
> }
>
> $this->set(
> 'newsletter',
> $this->Newsletter->prepareForDelivery($newsletter)
> );
> $this->render('newsletter');
>
> }
>
> The prepareForDelivery() method just did a bunch of str_replace() to
> add inline CSS, etc. I really loathe HTML email.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
Re: Creating a Preview page
On Fri, Jan 21, 2011 at 9:05 AM, WhyNotSmile wrote:
> In my admin area, I would like to give the user the option to
> 'Preview' the page they are creating or editing. I just can't quite
> get my head around how to do it, so wondered if anyone can advise me.
>
> Ideally, here's what I'd like: the user is editing a page in the admin
> area, and at any time can click a button which says 'Preview'. This
> opens a new window which shows what the page would look like if the
> current information was saved. The user can close the window, edit
> the page some more, and preview it as much as they want.
>
> The issue is this:
>> If I use a 'Preview' button, I can send the current data to the controller
>> and show a page with that data. However, this doesn't let me open the page
>> in a new window. I don't really want the user to have to use the back
>> button, as that interrupts the flow of the process.
>> If I use a Preview link, I can open a new window, but cannot send the data
>> to the page for display.
>
> Has anyone done this before, and can you suggest how I might go about
> it? Would I need to use javascript or ajax? I haven't used Ajax
> before, although I'm happy enough with javascript.
I've done this. It was for an HTML newsletter (yuk!) and I included a
preview button which did exactly this. I used JQuery and the form
plugin to submit the form with AJAX.
$('#newsletter_preview_btn').click(function(e)
{
showIndicator('body');
/* allow editor to update itself
*/
$.wymeditors(0).update();
$(this).parents('form').ajaxSubmit({
url: '/admin/newsletter/preview',
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
},
success: function(responseText)
{
hideIndicator();
$('#newsletter_modal').jqmShow().find('#newsletter_modal_content').html(responseText);
}
});
e.preventDefault();
});
So, here, I was using WYMEditor for the markup and JQModal for the
pop-up. Not what I'd use today but this was quite a while ago.
public function admin_preview($id = null)
{
Configure::write('debug', 0);
$this->layout = 'email/html/newsletter';
$this->viewPath = 'elements/email/html';
if (!empty($this->data))
{
$this->Newsletter->save($this->data);
$newsletter = $this->Newsletter->read(null, $id);
}
else if (isset($id))
{
$newsletter = $this->Newsletter->read(null, $id);
}
else
{
return null;
}
$this->set(
'newsletter',
$this->Newsletter->prepareForDelivery($newsletter)
);
$this->render('newsletter');
}
The prepareForDelivery() method just did a bunch of str_replace() to
add inline CSS, etc. I really loathe HTML email.
--
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+unsubscr...@googlegroups.com For more options, visit this group at
http://groups.google.com/group/cake-php
