Saturday, June 23, 2012

Re: Ajax Pagination not working ?

Ok you were right it worked !

But there's still a little problem (?) :

The ajax works indeed in the div with the correct ID, but it load the full page again in the div, meaning I have my full page appearing ... in my page. The only way to prevent this is to wrap the entire content in the div, but then all the other requests on the page are re-sent too.

Is this the way it's supposed to work, reloading the full page  ?

Thanks a lot for your time.



Le samedi 23 juin 2012 12:31:27 UTC+2, Andras Kende a écrit :
google : "Uncaught ReferenceError : $ is not defined"  this looks like jquery not loaded error…

I would put jquery at the top inside <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

Andras Kende



On Jun 23, 2012, at 2:54 AM, JonStark wrote:

The strange thing is that when I inspect with chrome, the script seems to be there :

There's an error : Uncaught ReferenceError : $ is not defined

Then the script :

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. $(document).ready(function () {$("#link-187169656").bind("click", function (event){$.ajax({beforeSend:function (XMLHttpRequest) {$("#busy-indicator").fadeIn();}, complete:function (XMLHttpRequest, textStatus) {$("#busy-indicator").fadeOut();}, dataType:"html", evalScripts:true, success:function (data, textStatus){$("#content").html(data);}, url:"\/manager\/users\/timeline\/username\/page:2"});
  4. Uncaught ReferenceError: $ is not defined
  5. return false;});
  6. $("#link-672602788").bind("click", function (event) {$.ajax({beforeSend:function(XMLHttpRequest) {$("#busy-indicator").fadeIn();}, complete:function(XMLHttpRequest, textStatus) {$("#busy-indicator").fadeOut();}, dataType:"html", evalScripts:true, success:function (data, textStatus) {$("#content").html(data);}, url:"\/manager\/users\/timeline\/username\/page:1"});
  7. return false;});
  8. $("#link-1178929767").bind("click", function (event) {$.ajax({beforeSend:function(XMLHttpRequest) {$("#busy-indicator").fadeIn();}, complete:function(XMLHttpRequest, textStatus) {$("#busy-indicator").fadeOut();}, dataType:"html", evalScripts:true, success:function (data, textStatus) {$("#content").html(data);}, url:"\/manager\/users\/timeline\/username\/page:2"});
  9. return false;});
  10. $("#link-809703014").bind("click", function (event) {$.ajax({beforeSend:function(XMLHttpRequest) {$("#busy-indicator").fadeIn();}, complete:function(XMLHttpRequest, textStatus) {$("#busy-indicator").fadeOut();}, dataType:"html", evalScripts:true, success:function (data, textStatus) {$("#content").html(data);}, url:"\/manager\/users\/timeline\/username\/page:4"});
  11. return false;});
  12. $("#link-1406013841").bind("click", function (event) {$.ajax({beforeSend:function(XMLHttpRequest) {$("#busy-indicator").fadeIn();}, complete:function(XMLHttpRequest, textStatus) {$("#busy-indicator").fadeOut();}, dataType:"html", evalScripts:true, success:function (data, textStatus) {$("#content").html(data);}, url:"\/manager\/users\/timeline\/username\/page:4"});
  13. return false;});});
  14. //]]>
  15. </script>

Le vendredi 22 juin 2012 18:03:11 UTC+2, JonStark a écrit :
I don't understand why ajax pagination won't work on my app.

In my Users controller :

<?php
class UsersController extends AppController {
public $name = 'Users';
public $helpers = array('Html', 'Form', 'Paginator', 'Js');
public $components = array('RequestHandler');

In my layout :

    <!-- Javascript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
   
    <!-- Loading gif -->
    <?php echo $this->Html->image('loading.gif', array('id' => 'busy-indicator')); ?> 

And in User/view.ctp

A div with Id "post"

<div id="posts"> Content to paginate  </div

The pagination :

<?php $this->Paginator->options(array(
     'update' => '#posts',
     'evalScripts' => true,
     'before' => $this->Js->get('#busy-indicator')->effect('fadeIn', array('buffer' => false)),
     'complete' => $this->Js->get('#busy-indicator')->effect('fadeOut', array('buffer' => false)),
  )); ?>
 
  <div style="text-align: center;">
  <?php 
  if ($this->Paginator->hasPage(2)) {
  echo $this->Paginator->prev();
  echo (" | ");
  } ?> 
  <?php echo $this->Paginator->numbers(); ?> 
  <?php 
  if ($this->Paginator->hasPage(2)) { 
  echo (" | ");
  echo $this->Paginator->next();
  } ?>
 
  <?php echo $this->Js->writeBuffer(); ?>
  </div>


 But this ouputs the standard HTML paginator... I'm lost here.

Any idea ? Thanks a lot.

--
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

--
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
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)