Sebastian Jeliazkov Sebastian Jeliazkov - 6 months ago 18
Ajax Question

jQuery function when using Infinite Ajax Scroll

I got Filter with options in it and with jQuery if i specific for example option "dead" it shows only rows with Status: dead; but when i scroll down and infinite ajax scroll was triggered the new data from the database is not only showing rows with Status: dead.Can save the filter to be used for the new page with the ajax scroll

My code

<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<img src="css/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 5 // show load more if scroll more than this
});
});
</script>
<script>
function replaceQueryParam(param, newval, search) {
var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
var query = search.replace(regex, "$1").replace(/&$/, '');

return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}
$(window).load(function() {
$('#select_box').change(function() {
if($(this).val() == 'notresolved') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:contains('Разрешен')").hide();
}
if($(this).val() == 'new') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Нов'))").hide();
}
if($(this).val() == 'opened') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Отворен'))").hide();
}
if($(this).val() == 'resolved') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Разрешен'))").hide();
}
if($(this).val() == 'dead') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Dead'))").hide();
}

if($(this).val() == 'all') {
$( '#table-tbody #table-tr').show();
}
});
$('#queue_box').change(function() {
if($(this).val() == 'mitev') {
window.location = 'test1.php' + replaceQueryParam('quid', 5, window.location.search)
}
if($(this).val() == 'all') {
window.location = 'test1.php' + replaceQueryParam('quid', -1, window.location.search)
}
if($(this).val() == 'office') {
window.location = 'test1.php' + replaceQueryParam('quid', 6, window.location.search)
}
if($(this).val() == 'support_c') {
window.location = 'test1.php' + replaceQueryParam('quid', 2, window.location.search)
}
if($(this).val() == 'clients') {
window.location = 'test1.php' + replaceQueryParam('quid', 8, window.location.search)
}
if($(this).val() == 'mtel') {
window.location = 'test1.php' + replaceQueryParam('quid', 10, window.location.search)
}
if($(this).val() == 'ro-ni') {
window.location = 'test1.php' + replaceQueryParam('quid', 11, window.location.search)
}
});
});

$(function() {
if (localStorage.getItem('queue_box')) {
$("#queue_box option").eq(localStorage.getItem('queue_box')).prop('selected', true);
}

$("#queue_box").on('change', function() {
localStorage.setItem('queue_box', $('option:selected', this).index());
});

});

</script>
</head>
<body>
<?php
session_start();
if(!isset($_SESSION['customer_id']) && empty($_SESSION['customer_id'])) {
header("Location: login.php");
}
?>
<div id="wrapper">
<div id="header">
<h1><a href="index.php" style="text-decoration:none;color:#039;">Ticket system</a></h1>
<div style="text-align:left;vertical-align:bottom;">
<img src="images/save.gif" /><a href="addticket.php" style="text-decoration:none;color:#039;">New Ticket</a>
</div>
</div>
<div id="filter">
<!--Нови: <input type="checkbox" id="check_box1">
Разрешени: <input type="checkbox" id="check_box2">
Отворени: <input type="checkbox" id="check_box3">
Неразрешени: <input type="checkbox" id="check_box4"> -->
Queue: <select id="queue_box" style="height:35px;">
<option value="all" selected="selected">- всички -</option>
<option value="mitev"> Стойчо Митев</option>
<option value="office"> Офис & инфо</option>
<option value="support_c"> Поддръжка Клиенти</option>
<option value="clients"> Клиенти</option>
<option value="mtel"> Огледи Мтел</option>
<option value="ro-ni"> Поддръжка Ро-Ни</option>
</select><br>
Статус: <select id="select_box" style="height:35px;">
<option value="all">- всички -</option>
<option value="new">нов</option>
<option value="opened">отворени</option>
<option value="resolved">разрешени</option>
<option value="dead">dead</option>
<option value="notresolved">неразрешени</option>
</select>
</div>



i was thinking of something like this

`ias.on('load', function(event) {
if($("#select_box").val() == 'notresolved') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:contains('Разрешен')").hide();
}
if($("#select_box").val() == 'new') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Нов'))").hide();
}
if($("#select_box").val() == 'opened') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Отворен'))").hide();
}
if($("#select_box").val() == 'resolved') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Разрешен'))").hide();
}
if($("#select_box").val() == 'dead') {
$( '#table-tbody #table-tr').show();
$( "#table-tbody #table-tr:not(:contains('Dead'))").hide();
}

if($("#select_box").val() == 'all') {
$( '#table-tbody #table-tr').show();
}
});`


i was thinking of something like this what would you say

Answer

I couldn't find anything that allows for ias() to use additional parameters, so I can only suggest (which is probably not the best solution right now) to constantly (like after firing certain event) use $('#select_box').change(function() as you do use now. If I'm missing something in ias(), please notify me.

Example:

$(document).ready(function() {
  // Infinite Ajax Scroll configuration
  jQuery.ias({
    container : '.wrap', // main container where data goes to append
    item: '.item', // single items
    pagination: '.nav', // page navigation
    next: '.nav a', // next page selector
    loader: '<img src="css/ajax-loader.gif"/>', // loading gif
    triggerPageThreshold: 5, // show load more if scroll more than this
    onLoadItems: apply_changes()
    // OR:
    onLoadItems: function(items) {
        // Paste everything that function apply_changes() has.
    }
}
});

function apply_changes()
{
    if($('#select_box').val() == 'notresolved') {
      $( '#table-tbody #table-tr').show();
      $( "#table-tbody #table-tr:contains('Разрешен')").hide();
    }
    if($('#select_box').val() == 'new') {
      $( '#table-tbody #table-tr').show();
      $( "#table-tbody #table-tr:not(:contains('Нов'))").hide();
    }
    if($('#select_box').val() == 'opened') {
      $( '#table-tbody #table-tr').show();
      $( "#table-tbody #table-tr:not(:contains('Отворен'))").hide();
    }
    if($('#select_box').val() == 'resolved') {
      $( '#table-tbody #table-tr').show();
      $( "#table-tbody #table-tr:not(:contains('Разрешен'))").hide();
    }
    if($('#select_box').val() == 'dead') {
      $( '#table-tbody #table-tr').show();
      $( "#table-tbody #table-tr:not(:contains('Dead'))").hide();
    }

    if($('#select_box').val() == 'all') {
      $( '#table-tbody #table-tr').show();
    }
}