CODEWITHSUNDEEP
javascriptphpjqueryajax
Sebastian Jeliazkov
Sebastian Jeliazkov

Reputation: 91

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

Upvotes: 0

Views: 344

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7093

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();
    }
}

Upvotes: 1

Related Questions