Friday, March 22, 2013

Re: ajax Update in a page with 2 divs

Hello.

When I have to update two (or more) different elements, but both of them with different content, I simply only set 'update' in a form on a element where I have to display more complex data (for example from database), and then I update second div using JavaScript (in a view of updated element).

For example:
I have a submit comment ajax form, and after the form is submitted - I want to save comment to database and display refreshed list of comments and also the message "Comment has been added" (but in a different place than updated list of comments).

Let's assume that the view (list of comments and comment submit form) looks like this:

<div>Add comment</div>
<div id="message"></div>
<div>
   <?php echo $this->Form->create('Comment')?>
   <?php echo $this->Form->textarea('comment')?>
   <?php echo $this->Js->submit('Add comment', array(
          'url' => '/comments/add/'.$p['Post']['id'],
          'update' => '#comments_list',
          'evalScripts' => true,
        ));?>
</div>
<div id="comments_list">
   //here goes the list of comments
</div>


After you submit a form, the action "add" in Comments controller is being done - a comment is entered to a database and you retrieve updated list of comments from database.
The div with "comments_list" id is updated with the list of updated comments.
So your "Comments/add.ctp" view contains list of comments and a JavaScript code to update "message" div with an info that comment has been added:

//here goes the list of comments
<script type="text/javascript">
  document.getElementById('message').innerHTML='<div class="message">Comment has been added. Thank you!</div>';
</script>


You have to remember to add 'evalScripts' => true to the submit button, otherwise JS code won't be executed.

Hope this helps a bit.



On Wednesday, March 20, 2013 11:12:52 AM UTC+1, Chris wrote:

hi guys,... how you all doing,.... can anyone help please,... 
I got an ajax form that submits and add bookmarks to a site and it's working,... 

Is it possible to Update in a page with 2 divs ? and how can I do that in a form: , 'update' => 'updateBookmark1',...? and where should I insert 'updateBookmark2',... ?? 

thanks in advance, 


<div id="updateBookmark1"> this update confirmation </div>
<div id="updateBookmark2"> this need to update content </div> ,... kind of refreshing content in a page
.............
.............
.............

<p style="float: left; margin: 0 0 0 35px;">
<?php echo $ajax->submit('Add', array('url'=> array('controller'=>'bookmarks', 'action'=>'add'), 'update' => 'updateBookmark1', 'complete' => 'javascript:resetBookmarkForm();' )); ?>
<?php echo $form->end(); ?>
</p>

--
Like Us on FaceBook https://www.facebook.com/CakePHP
Find us on Twitter http://twitter.com/CakePHP
 
---
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cake-php+unsubscribe@googlegroups.com.
To post to this group, send email to cake-php@googlegroups.com.
Visit this group at http://groups.google.com/group/cake-php?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

No comments: