How to implement algolia intantsearch pagination?

Question

Can anyone guide me please on how to add algolia instantsearch pagination? I have tried following code.. not worked :

instantsearch.js

var search = instantsearch({
  // Replace with your own values
  appId: 'myid',
  apiKey: 'mykey', // search only API key, no ADMIN key
  indexName: 'instant_search',
  urlSync: true
});

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination-container'
  })
);

Html:

<div id='pagination-container'></div>

error

Uncaught ReferenceError: instantsearch is not defined
    at instantsearch.js:1

You are passing `search.addWidget()` as the second parameter to `instantsearch`. That can't be right — thanksd, May 09 '17 at 17:14
i put it outside also but not working still.. can u please suggest me how to do this?? @thanksd — Wahidul Alam, May 09 '17 at 17:18
Can you update your question to include the updated code and also provide the error message you are getting? — thanksd, May 09 '17 at 17:19
Your error means you never load `instantsearch`. Put `` in your `` — thanksd, May 09 '17 at 17:29
your cdn is not working; shows : "GET http://cdn.jsdelivr.net/instantsearch.js/1/instantsear%E2%80%8C%E2%80%8Bch.min.js" — Wahidul Alam, May 09 '17 at 17:46
Works for me: https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js — thanksd, May 09 '17 at 17:52
still shows these errors: "GET http://127.0.0.1:8000/js/instantsear%E2%80%8C%E2%80%8Bch.min.js 127.0.0.1/:144 GET http://127.0.0.1:8000/%7B%7Bmovie.image%7D%7D 404 (Not Found) 127.0.0.1/:167 GET http://127.0.0.1:8000/js/instantsear%E2%80%8C%E2%80%8Bch.min.js 404 (Not Found) autocomplete.js:22 Uncaught TypeError: Cannot read property 'addEventListener' of null at autocomplete.js:22 (anonymous) @ autocomplete.js:22 pagination.js:1 Uncaught ReferenceError: instantsearch is not defined at pagination.js:1" — Wahidul Alam, May 09 '17 at 18:20
thanks for ur effort. but it may occur for some js conflict. so i pasted my whole code here : https://paste.laravel.io/WzGkq give it a look kindly. — Wahidul Alam, May 09 '17 at 18:39
ok its working now.. but new problem .. it shows the pagination but it doesn't bring the new page when click to 2,3 ... i have set hits per page to 20 . still it doesn't show anything when click the page number buttons.. — Wahidul Alam, May 09 '17 at 19:18

score 1 · Accepted Answer · answered May 10 '17 at 07:22

1

The ReferenceError: instantsearch is not defined exception is thrown when the value of instantsearch is undefined. This means that at this point the value is not set.

As suggested by @thanksd this probably means that it the InstantSearch.js library is not yet loaded, when this script is executed. The easiest way to fix that is loading the library in the head of your HTML page.

answered May 10 '17 at 07:22

bobylito

3,172
22
27

Thanks for the reply. Yes its working now. but new problem .. it shows the pagination but it doesn't bring the new page when click to 2,3 ... i have set hits per page to 20 . still it doesn't show anything when click the page number buttons.. @bobylito – Wahidul Alam May 10 '17 at 13:54
We should probably continue this discussion on support@algolia.com or on the community forum (https://discourse.algolia.com/) :) – bobylito May 15 '17 at 08:27
1

here i created the issue : https://discourse.algolia.com/t/instantsearch-pagination-not-working-properly/1331?u=wahid.sherief123 – Wahidul Alam May 15 '17 at 15:19

How to implement algolia intantsearch pagination?

1 Answers1