CodeIgniter Forums
Codeigniter + Infinity scroll help - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forum-5.html)
+--- Forum: General Help (https://forum.codeigniter.com/forum-24.html)
+--- Thread: Codeigniter + Infinity scroll help (/thread-72376.html)



Codeigniter + Infinity scroll help - HarrysR - 12-11-2018

Hey guys,
I was wondering, has anyone made a project with infinite scroll and filtering data with "GET" parameters in url? Do you know any good examples to begin with? 
Since every tut i found on internet was about infinite scroll and not with data filtering using query string parameters. 

Should i make two different controllers (sth like "index" and "entries") or can i achieve it with a single controller?

Note that i don't want to refresh the page on every dropdown change, i just want to refresh the "div" content.

I hope i made myself clear! If you need any further clarification feel free to ask!

Thanks!


RE: Codeigniter + Infinity scroll help - Pertti - 12-12-2018

So this is two part problem really, one is making Ajax call with JavaScript on your page in browser when certain conditions are met, either dropdown change or user scrolls to the end (or my personally preferred option with "Show more" button).

And second part is making a controller that returns correct data.

How are you doing your front end? Vanilla or jQuery JS, or are you using a full front-end framework?


RE: Codeigniter + Infinity scroll help - HarrysR - 12-12-2018

(12-12-2018, 01:37 AM)Pertti Wrote: So this is two part problem really, one is making Ajax call with JavaScript on your page in browser when certain conditions are met, either dropdown change or user scrolls to the end (or my personally preferred option with "Show more" button).

And second part is making a controller that returns correct data.

How are you doing your front end? Vanilla or jQuery JS, or are you using a full front-end framework?

Well let's say that i make the first part as for the Ajax. Have you ever created something like that? Or is there any examples where i can start from? 

As for the second part, so you mean that this is possible to be created with a single controller right? 

I use Jquery. I've created a dynamic dependend dropdown but this approach:


Code:
$output = '';
$output .= '<div>';
$output .= '<span>';
$output .= 'etc... etc..';
$output .= '</span>';
$output .= '</div>';
it's kinda messed up since it's not just a single dropdown option, but some divs inside other divs etc.. etc.. 

So any ideas on that?


RE: Codeigniter + Infinity scroll help - dave friend - 12-14-2018

You can find all the solutions and examples you could possibly want by searching Google for "jquery infinite scroll"


RE: Codeigniter + Infinity scroll help - HarrysR - 12-14-2018

(12-14-2018, 10:54 AM)dave friend Wrote: You can find all the solutions and examples you could possibly want by searching Google for "jquery infinite scroll"

As for this, i've tried it and 
1) The jquery plugin didn't quite helped,
2) Every example i found (even for codeigniter) was about inserting table rows and not loading a whole view file. 
3) And the most important thing i didn't manage to find an example or even a brief explanation on how infinite scroll with dropdown filters work. 

Any suggestion are welcomed though! 

Thanks!


RE: Codeigniter + Infinity scroll help - dave friend - 12-14-2018

(12-14-2018, 12:56 PM)HarrysR Wrote: As for this, i've tried it and
1) The jquery plugin didn't quite helped,

It is rare for "free code" to do exactly what you are looking for. Still, it usually provides usable ideas and some directional guidance. If you understand what the example is doing compared to what you want to do it is often possible to devise a custom solution.

(12-14-2018, 12:56 PM)HarrysR Wrote: 2) Every example i found (even for codeigniter) was about inserting table rows and not loading a whole view file.

It should be very easy to substitute <div> where the examples use <tr>. It is not important what kind of HTML element you are working with because in every case you are going to be using one of the JQuery DOM insertion or other DOM manipulation methods to do the work. That's true for both an "infinite scroll" or all new content due to a filter (dropdown) change.

(12-14-2018, 12:56 PM)HarrysR Wrote: 3) And the most important thing i didn't manage to find an example or even a brief explanation on how infinite scroll with dropdown filters work.

On the frontend, filtered (dropdowns) + infinite-scroll would use about the same approach as filtered pagination. The biggest difference being that filtered + infinite-scroll uses ajax to request and receive HTML while filtered + pagination uses redirection to get a completely new page of HTML.

At the backend the questions are the same:
  1. What data makes a page (filters)?
  2. How big is a page (how much data)?
  3. How many pages (n-pages) are there (given the filters and page size)
  4. Which page of n-pages should be returned?

Pagination returns a complete "view" while scrolling returns only the HTML of the new data.


RE: Codeigniter + Infinity scroll help - HarrysR - 12-14-2018

(12-14-2018, 04:03 PM)dave friend Wrote:
(12-14-2018, 12:56 PM)HarrysR Wrote: As for this, i've tried it and
1) The jquery plugin didn't quite helped,

It is rare for "free code" to do exactly what you are looking for. Still, it usually provides usable ideas and some directional guidance. If you understand what the example is doing compared to what you want to do it is often possible to devise a custom solution.

(12-14-2018, 12:56 PM)HarrysR Wrote: 2) Every example i found (even for codeigniter) was about inserting table rows and not loading a whole view file.

It should be very easy to substitute <div> where the examples use <tr>. It is not important what kind of HTML element you are working with because in every case you are going to be using one of the JQuery DOM insertion or other DOM manipulation methods to do the work. That's true for both an "infinite scroll" or all new content due to a filter (dropdown) change.

(12-14-2018, 12:56 PM)HarrysR Wrote: 3) And the most important thing i didn't manage to find an example or even a brief explanation on how infinite scroll with dropdown filters work.

On the frontend, filtered (dropdowns) + infinite-scroll would use about the same approach as filtered pagination. The biggest difference being that filtered + infinite-scroll uses ajax to request and receive HTML while filtered + pagination uses redirection to get a completely new page of HTML.

At the backend the questions are the same:
  1. What data makes a page (filters)?
  2. How big is a page (how much data)?
  3. How many pages (n-pages) are there (given the filters and page size)
  4. Which page of n-pages should be returned?

Pagination returns a complete "view" while scrolling returns only the HTML of the new data.

So to sum up, two major questions:
1) Is it possible for this to be achieved with just a single controller (e.g.: index.php) or should i create a second one (something like "get_data.php")?
Since i kinda made it by using ajax and "GET" method, with an extra controller and i load the new data using "load->view->('new_data', $data) etc.. etc..) in that controller. 

2) And this is only to clarify it in my head, is it safe to load those new data using ".html(data)" function?

Might be a silly one but you know.. kinda new here and i'm tryin to be sure if there are safer ways as for the frontend to do this.


RE: Codeigniter + Infinity scroll help - dave friend - 12-14-2018

(12-14-2018, 04:36 PM)HarrysR Wrote: So to sum up, two major questions:
1) Is it possible for this to be achieved with just a single controller (e.g.: index.php) or should i create a second one (something like "get_data.php")?
Since i kinda made it by using ajax and "GET" method, with an extra controller and i load the new data using "load->view->('new_data', $data) etc.. etc..) in that controller. 

2) And this is only to clarify it in my head, is it safe to load those new data using ".html(data)" function?

My first reaction is to think in terms of one controller using several methods. For instance, an "index" method would load the initial "page" and some other method - let's call it "filter" - is the target URL in the dropdown change .ajax call. A hypothetical "scroll" method would handle the infinite-scrolling workload by way of a separate ajax call.

It would be equally valid to use two controllers - one for the initial page load and another that responds to ajax requests.

Is it "safe" to use  ".html(data)"? Without any knowledge of what you are outputting and where it came from I cannot answer. The use of ".html(data)" isn't inherently dangerous on its own.  (Actually, your likely going to want to use ".append(data)" instead of ".html".) Either way, the danger lies in data that came from "the outside" and could be attempting an exploit of some kind. But the danger isn't any different from loading a view page.


RE: Codeigniter + Infinity scroll help - HarrysR - 12-14-2018

(12-14-2018, 06:16 PM)dave friend Wrote:
(12-14-2018, 04:36 PM)HarrysR Wrote: So to sum up, two major questions:
1) Is it possible for this to be achieved with just a single controller (e.g.: index.php) or should i create a second one (something like "get_data.php")?
Since i kinda made it by using ajax and "GET" method, with an extra controller and i load the new data using "load->view->('new_data', $data) etc.. etc..) in that controller. 

2) And this is only to clarify it in my head, is it safe to load those new data using ".html(data)" function?

My first reaction is to think in terms of one controller using several methods. For instance, an "index" method would load the initial "page" and some other method - let's call it "filter" - is the target URL in the dropdown change .ajax call. A hypothetical "scroll" method would handle the infinite-scrolling workload by way of a separate ajax call.

It would be equally valid to use two controllers - one for the initial page load and another that responds to ajax requests.

Is it "safe" to use  ".html(data)"? Without any knowledge of what you are outputting and where it came from I cannot answer. The use of ".html(data)" isn't inherently dangerous on its own.  (Actually, your likely going to want to use ".append(data)" instead of ".html".) Either way, the danger lies in data that came from "the outside" and could be attempting an exploit of some kind. But the danger isn't any different from loading a view page.

Thank you very much! I will take a look at what you suggested!