capturing and updating variable values after ajax request in url

Question

I would really appreciate some help on this. I have a page that shows products in a store using laravel pagination. I have filters on the page based on brands, category, and available products. for filtering the products I am using a checkbox. if a checkbox is checked I use ajax get request and send status via URL to a controller to filter available products.

status = 1 is for available products, and status = 0 is for all products.Url is looks like this:

/Collections/Newest_Items?status=1&page=2

Here is the situation. I want to know if is it possible to change the variable value in URL and regenerate the URL base on the page number and new filters dynamically? Is it a way to get the URL of the page using jquery and change the values and then change the Url with window.history.pushState("", "", URL);? Here is my ajax:

       $(document).on('click', "#only_available", function () {

                if ($('#only_available').is(':checked')) {
                    var status = 1;
                    url = '/Collections/Newest_Items?status='+status;
                } else {
                    var status = 0;
                    url = '/Collections/Newest_Items';
                }

                window.history.pushState("", "", url);

                $.ajax({
                    url: '/Collections/Newest_Items',
                    type: "GET",
                    data: {status: status},
                    cash: false,
                    success:
                        function (response) {
                            $('#products-load').html(response);
                        }

                });
            });
        });

I do this by writing the URL by myself. In this situation, I must write the URL after every filter applied to the page. this way I cant get the page the user currently in and it goes back to the first page. But what I want to achieve here is, I want to make the Url dynamically with page number the user currently on with all filters applied to it.

it seams you forgot to add `url = '/Collections/Newest_Items?status='+status;` for when `var status = 0;` — Cesar Bielich, Jan 20 '18 at 09:36
@CesarBielich I know. its because I cant figure out the paging and filtering together. so I erased the staus=0.so that it shows all the products without filter — Salar Bahador, Jan 20 '18 at 09:39
Im having a hard time understanding exactly what you want to do. — Cesar Bielich, Jan 20 '18 at 09:41
So am I right to assume that your `status` is your filter you want to pass AND you want to pass the page number as well to the ajax request so that you can return the appropriate results based on the page number and filter? — Cesar Bielich, Jan 20 '18 at 09:46
@CesarBielich yes something like that. But it gets tricky when multiple filters are applied to the page URL — Salar Bahador, Jan 20 '18 at 09:48
How are you passing these `multiple` filters, I dont see how you are doing that in your code. You are only showing that you are passing `status` — Cesar Bielich, Jan 20 '18 at 09:49

score 1 · Answer 1 · answered Jan 20 '18 at 09:40

1

You can use window.location.search which will give you something like: status=1&page=2 in your example. Then you will need to parse out those variables to get the page number you're looking for.

answered Jan 20 '18 at 09:40

njsokol

119
3
11

Also, in you're ajax, you need to set `url` to your `url` variable defined above – njsokol Jan 20 '18 at 09:42
[this answer](https://stackoverflow.com/questions/523266/how-can-i-get-a-specific-parameter-from-location-search) has a good snippet for the parsing part – njsokol Jan 20 '18 at 09:45
nice! but how can I change the status or page in this method? – Salar Bahador Jan 20 '18 at 09:49

Cesar Bielich · Answer 2 · 2018-01-20T10:25:40.127

Ok I think I understand what you are asking for. So with each unique filter event that you are firing you need to query the current url before pushstate and get the values with something like this.

For instance if someone clicks Brand then you would get the new brand variable as well as the current status and page variables to pass with ajax like this

also just POST it instead of GET

$(document).on('click', ".brand", function () {
    var brand = $(this).attr('id);

    //Example how to use it: 
    var params = parseQueryString();
    var status = params["status"]);
    var page = params["page"]);
    // if you have more variables than this then you would add them here and make sure you pass them along to the ajax data.

    url = '/Collections/Newest_Items?status='+status+'&page='+page+'&brand='+brand;

    window.history.pushState("", "", url);

    $.ajax({
        url: '/Collections/Newest_Items',
        type: "POST",
        data: {status: status, page: page, brand: brand},
        cash: false,
        success:
            function (response) {
                $('#products-load').html(response);
            }
    });
});

var parseQueryString = function() {

    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};

if one of the params doesn't exist like status what happens then? in that situation does the code works fine? — Salar Bahador, Jan 20 '18 at 11:14
it has to be get request. because the URL renders in the pagination page links. — Salar Bahador, Jan 20 '18 at 11:15
can you instruct me to how to get value from array like this in url: brand[0]; I use your code bud in this situation it gives me undefined. — Salar Bahador, Jan 20 '18 at 12:15

Salar Bahador · Accepted Answer · 2018-01-21T20:42:00.510

tnx to @CesarBielich and @Sokies I finally manage to solve the problem. they give me part of the answer but not all.I made it unique to my question:

what we need here is the path and the parameters that nested in URL. so for getting the path of the route, we must use window.location.pathname and for getting all the parameters must use window.location.search. after that, we must combine the path and params so that the URL comes out of it. then we must add the new parameter like status after that. So that all the parameters can be accessed by the controller. both the old params and the new one. this way laravel pagination knows what url to make, in the href links to other pages.

        $(document).on('click', "#only_available", function () {

                if ($('#only_available').is(':checked')) {
                    var status = 1;
                } else {
                    var status = 0;
                }

                var params = window.location.search;
                var path = window.location.pathname;

                var old_url = path+params;
               var url = old_url+'&status=' + status;

                window.history.pushState("", "", url);

                $.ajax({
                    url: url,
                    type: "GET",
                    cash: false,
                    success:
                        function (response) {
                            $('#products-load').html(response);
                        }

                });
            });
        });

capturing and updating variable values after ajax request in url

3 Answers3