update current URL to ajax GET request url jquery

Question

I am working on filters in my website. The user can select multiple filters at a time and results will come according to that just like any E-commerce website. I am able to fetch results using ajax GET request. I am using following function every time any filter changes.

function filterCandidates() {
var edu = [];
var salary_exp = [];
var jobtype = [];
var url = window.location.href;
//var tech = [];
var gender = [];
var sorting = $('#sorting').val();

$('input.edu:checked').each(function () {
    var ed = $(this).val();
    edu.push(ed);
});
$('input.sldr').each(function () {
    var t_sc = $(this).val();
    salary_exp.push(t_sc);
});
$('input.gndr:checked').each(function () {
    var c_sc = $(this).val();
    gender.push(c_sc);
});
$('input.jtype:checked').each(function () {
    var jt = $(this).val();
    jobtype.push(jt);
});

var edu_str = '';
if (edu.length > 0) {
    edu_str = '&edu[]=' + edu;
}
var gender_str = '';
if (gender.length > 0) {
    gender_str = '&gender[]=' + gender;
}
var jobtype_str = jobtype.length > 0 ? '&jobtype[]=' + jobtype : '';
var salaryexp_str = salary_exp.length > 0 ? '&salary[]=' + salary_exp : '';
var sort_str = sorting != '' && typeof sorting !== 'undefined' ? '&sort=' + sorting : '';

var addition_url = edu_str + gender_str + +salaryexp_str + jobtype_str + sort_str;
var data = {};

 $('#loading-img').show();
$.ajax({
    url: url + addition_url,
    data: data,
    cache: false,
    type: 'get',
    beforeSend: function (xhr) {
        var token = $('meta[name="csrf_token"]').attr('content');

        if (token) {
            return xhr.setRequestHeader('X-CSRF-TOKEN', token);
        }
    },
    success: function (data) {
        if (data === 'No Results Found') {
            $('#search_res').hide();
            $("#no_candidate").removeClass('hidden');
        } else {
            $('#search_res').show().html(data);
            $("#no_candidate").addClass('hidden');
        }
        $('#loading-img').hide();
        window.scrollTo(0, 0);
        //$('#search_res').load(document.URL+" #search_res");
    },
    error: function (xhr, status, error) {
        var err = eval("(" + xhr.responseText + ")");
        alert(err.Message);
    }

});

}

I want to know how E-commerce sites pass parameter in URL on filter(checkbox or select) change.I'll really appreciate any help.

Answer 1

Do you want to add all filter values to the current displayed url in browser address bar?

If so, you should save every change of filter to window.location.hash . For example window.location.hash = 'gender[]=male&edu[]=foo'; will add www.example.com#gender[]=male&edu[]=foo to your url.

Then before you performing the ajax request, you can add the value of window.location.hash to the ajax url and request the filtered data.

So webshop users are able to share the url www.example.com#gender[]=male&edu[]=foo and you have to check if there are already defined filter in the url when someone opens the website. And if so you have to perform the ajax call immediately.