I'm getting there, I think. The first problem was that I had <script
language="text/javascript"> instead of <script type="text/javascript">
(d'oh!).
Reading round the documentation for jqm and ajaxSubmit, I've made a
few changes. I can now get it so that the preview window is shown
when you click, with the correct content, but in doing so I seem to
destroy the layout of the initial page (the one with the form on it).
Alternatively, I can get it all to play nice if I remove the ajax
request, but obviously in that case I can only populate the modal
window with fixed content.
I've kept the controller the same as before, but now I have in the
view:
At the top:
<div id="page_modal" class="jqmWindow"><div id="page_modal_content"></
div></div>
Then the form:
echo $form->create('Page', array('id' => 'ajaxForm'));
... form content ...
echo '<input type="submit" value="Preview Page" id="preview_btn"
class="jqModal"/>';
echo '<input type="submit" value="Save Changes" />';
echo '</form>';
Now, if I add the following, I get the pop-up window, but the edit
form is broken, presumably because the ajaxRequest is populating the
pop-up as soon as it reads this bit in, and that messes up the div
(plus it only shows the inital value of the form fields):
<script type="text/javascript">
$('#ajaxForm').ajaxSubmit({
url: '/admin/pages/preview',
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
},
success: function(responseText){
$
('#page_modal').jqm().find('#page_modal_content').html(responseText);
}
});
</script>
So, i added an 'onclick' event to the preview button, so that it
wouldn't fire until the button is clicked; in this case nothing
happens when I click (or, possibly, something happens but takes
ages... I'm not quite sure - sometimes when i go back to the page
after a while, the layout is messed up again, and then when I click
'Preview' it submits the form):
<script type="text/javascript">
$('#preview_btn').click(function(e){
$('#ajaxForm').ajaxSubmit({
url: '/admin/pages/preview',
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
},
success: function(responseText){
$
('#page_modal').jqm().find('#page_modal_content').html(responseText);
}
});
e.preventDefault();
});
</script>
So the problem seems to be in hiding the ajax request inside the
'click' event. Can anyone help?
Thanks again, I really appreciate all the help.
Sharon
On Feb 22, 11:09 pm, cricket <zijn.digi...@gmail.com> wrote:
> On Tue, Feb 22, 2011 at 3:29 PM, WhyNotSmile <sharongilmor...@gmail.com> 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):
>
> > <div class="pages form">
> > <?php echo $form->create('Page');?>
> > <fieldset>
> > <?php
> > echo $form->input('id');
> > echo '<div class="input textarea">';
> > echo $form->label('Content') . '<br/>';
> > echo $form->input('content', array('type' => 'textarea', 'rows' =>
> > 20, 'cols' => 50, 'label' => ''));
> > echo $fck->load('Page/content', 'Cake');
> > echo '</div>';
>
> > echo '<input type="submit" value="Preview Page" id="preview_btn" /
> >>';
> > echo '<input type="submit" value="Save Changes" />';
> > echo '</form>';
> > ?>
> > </fieldset>
> > </div>
> > <div id="page_modal"><div id="page_modal_content"></div></div>
>
> > <script language="text/javascript">
> > $('#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();
> > });
> > </script>
>
> 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+unsubscribe@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php
No comments:
Post a Comment