How can i dynamically pass variables to a PHP script call within setInterval function?

Question

I have a script here that is supposed to load a php script output into a specified 'div' within set intervals, and be able to apply filters by means of sending values from two 'select' lists to that script. I have realized the first thing with some help from another topic here on Stack, it's listed in $(document).ready() event. But then i have $("#status_filter").change() and $("#car_filter").change() events. They are supposed to first stop refreshId interval function, then change variables that i am supposed to send to PHP script, reload content with changed variables and start refreshId loop again. As a result, i have the loop working with zero values, but browser doesn't react to selecting options from the list. I've been playing with the code parts for a while now, but to no avail. Please, help me if you can.

var status_filter = 0;
var car_filter = 0;

$("#status_filter").change(function() {
    clearInterval(refreshId);
    status_filter = $(this).val();
    $("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
    var refreshId = setInterval(function() {
        $("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
    }, 30000);
});

$("#car_filter").change(function() (
    clearInterval(refreshId);
    car_filter = $(this).val();
    $("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
    var refreshId = setInterval(function() {
        $("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
    }, 30000);
});

$(document).ready(function() {
    $("#filterBar").load("get_filters.php");
    $("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
    var refreshId = setInterval(function() {
        $("#content").load("get_orders.php?status=" + status_filter + "&car=" + car_filter);
    }, 30000);
});

I have this script placed in the page's head 'head' tag. I haven't checked yet if placing all script in a separate file and linking it could help, though. I also fear that believing in js keeping it's variables alive until the page's closed or browser is shut down is wrong.

Answer 1

Have you tried setTimeout() ? You can create an easy looping function using this. The code below will print out a number every second, then call itself again.

 $(function() { var counter = 0; var loop = function() { setTimeout(function() { $('body').append(++counter); loop(); }, 1000); } loop(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

This can be tailored for you to a looping function like this:

function loop(status, car) {
//Check Values of status and car, set defaults otherwise.
    setTimeout(function() {
        $("#content").load("get_orders.php?status=" + status + "&car=" + car);
          loop();
    }, 1000);
}