AJAX pagination with CakePHP

1
votes

I'm struggling to get some ajax pagination with cakephp working. I've read the instructions here and various other pages on the internet eg: SO link

However I get an error in the console:

Uncaught type error undefined is not a function

Which occurs on the $(document).ready() function generated by $this->Js->writeBuffer(). Any ideas on what I'm doing wrong?

In my view index.ctp I set the paginator's options:

$this->Paginator->options(array(
        'update' => '#content',
    'evalScripts' => true)
);

Then carry on with the remainder of the view, in particular I render the table. The controller has fetched data to be displayed.

I output my pagination controls:

echo $this->Paginator->prev();
echo $this->Paginator->numbers();
echo $this->Paginator->next();

At the end of my view I do:

echo $this->Js->writeBuffer();

I have added the relevant helpers and components to my controller:

public $helpers = array('Js' => array('jquery'));

public $components = array(
    'Paginator',
    'RequestHandler'
);

In default.ctp I have included jquery by adding this to the end of the HTML (just before </body>:

<script src="https://code.jquery.com/jquery.js"></script>

It looks it works in that it generated the relevant javascript and provides the id's for the links but clicking the links just works like normal.

1
ajaxcakephppagination
Sounds like you haven't included jQuery, or some other script calls $.noConflict(). - JJJ
@AD7six You're right, I have updated my question to be more comprehensive. - Harry
The html output would be more relevant - but that's already enough information to give you an answer. Thanks. - AD7six

1 Answers

1
votes

Functions need to exist before they are called

In default.ctp I have included jquery by adding this to the end of the HTML (just before </body>

Jquery needs to be loaded before it is used. Ensure that script tags appear in the rendered html in this order:

<script src="//code.jquery.com/jquery.js"></script>
... anything or nothing ...
<script> 
    $(document).ready(
        ...