Infinite scroll

Source/assets/html/filter.twig

@@ -9,7 +9,7 @@
         </div>
         <div class="row nomargin">
         {% for lang in value[0] %}
-            <div class='codeFilterCheckBox'><input type='checkbox' class='codeFilterCheckBoxInput' checked='true' value='{{ lang[0] }}' onclick="getAjax()">  {{ lang[1] }}</div>
+            <div class='codeFilterCheckBox'><input type='checkbox' class='codeFilterCheckBoxInput' checked='true' value='{{ lang[0] }}' onclick="getAjax(true)">  {{ lang[1] }}</div>
         {% endfor %}
         </div>
     </div>
@@ -20,7 +20,7 @@
     </div>
     <div class="row">
         <div class="codeFilterSearch col-md-12">
-            <input type="text" class="codeFilterSearchInput" id="search" name="search" placeholder="Code's name or description" onkeyup="getAjax()">
+            <input type="text" class="codeFilterSearchInput" id="search" name="search" placeholder="Code's name or description" onkeyup="getAjax(true)">
         </div>
         {#<div class="codeFilterButton col-md-4"><button class="btn btn-default" onclick="getAjax()">Filter</button></div>#}
     </div>

Source/assets/js/functions.js

@@ -11,9 +11,16 @@ function doAjax(postValue) {
 }
 
 function ajaxresponse(){
-	if(conexion.readyState == 4){ //Esto es para que cambie cuando haya respuesta, que no es en todos los momentos
-		document.getElementById('ajaxPut').innerHTML = conexion.responseText; //Pondra todo lo devuelto por "file" (Que sera un php que de //echos dependiendo de lo enviado) en un div
-	}
+    if(conexion.readyState == 4){ //Esto es para que cambie cuando haya respuesta, que no es en todos los momentos
+        o++;
+        var ajaxPut = document.getElementById('ajaxPut');
+        if(newFilter){
+            newFilter=false;
+            ajaxPut.innerHTML = conexion.responseText; //Pondra todo lo devuelto por "file" (Que sera un php que de //echos dependiendo de lo enviado) en un div
+        }else{
+            ajaxPut.innerHTML = ajaxPut.innerHTML+conexion.responseText;
+        }
+    }
     reHightlight();
 }
 
@@ -30,7 +37,11 @@ function mostrar(div) {
     //obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
 }
 
-function getAjax() {
+function getAjax(reset=false) {
+    if(reset){
+        resetFilter();
+    }
+
     var checkboxes = document.getElementsByClassName("codeFilterCheckBoxInput");
     var i;
     var count = false;
@@ -47,6 +58,7 @@ function getAjax() {
     }
     if(document.getElementById("search").value!="")
         send = send+"&search="+document.getElementById("search").value;
+    send = send+"&o="+o;
     doAjax(send);
 }
 
@@ -103,7 +115,7 @@ function unselectAll() {
             checkboxes[i].innerHTML = "Select all";
         }
     }
-    getAjax();
+    getAjax(true);
 }
 
 function selectAll() {
@@ -117,10 +129,27 @@ function selectAll() {
             checkboxes[i].innerHTML = "Unselect all";
         }
     }
-    getAjax();
+    getAjax(true);
 }
 
-//From https://stackoverflow.com/questions/35297919/javascript-select-all-text-inside-a-pre-code-block-on-double-click
+function resetOffset(){
+    o=0;
+}
+
+function resetFilter(){
+    newFilter=true;
+    resetOffset();
+}
+
+resetOffset();
+
+$(window).scroll(function () {
+    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
+        getAjax();
+    }
+ });
+
+ //From https://stackoverflow.com/questions/35297919/javascript-select-all-text-inside-a-pre-code-block-on-double-click
 window.onload = function(){
 
     document.body.addEventListener('dblclick', function(e){