Change url query string value using jQuery

Question

I have an example URL like:

http://domain.com/Documents/?page=1&name=Dave&date=2011-01-01

The query string contains the current page number and two additional filters (name and date).

Using the following URL parser: https://github.com/allmarkedup/purl I am able to access certain parts of the URL such as just the page number.

I'm trying to create a way for a user to be able to type a number into a textbox and then load that page number whilst keeping all the other query strings intact.

$(document).ready(function () {

        $('.pageNum').live('keyup', function (e) {
            e.preventDefault();
            if (e.which == 13) {

                var currentUrl = window.location.href;

                var parsedUrl = $.url(currentUrl);

                var currentPageNum = parsedUrl.param('page');

                var newPageNum = $(this).val();

                var newUrl = //

                window.location.href = newUrl;

            }
        });

    });

So when a user hits return on the pageNum textbox, it will get the current page url, parse it, then find out the current page number and then I need a way to replace the value of the page number with the new value in the textbox to create a new url, and then finally refresh the page using this new url.

Is it possible to change the param value and then add it back in?

Note: The additional parameters could be anything, so I can't manually add them onto the pathname with the new page number!

Answer 1

If you only need to modify the page num you can replace it:

var newUrl = location.href.replace("page="+currentPageNum, "page="+newPageNum);

Answer 2

purls $.params() used without a parameter will give you a key-value object of the parameters.

jQuerys $.param() will build a querystring from the supplied object/array.

var params = parsedUrl.param();
delete params["page"];

var newUrl = "?page=" + $(this).val() + "&" + $.param(params);

Update
I've no idea why I used delete here...

var params = parsedUrl.param();
params["page"] = $(this).val();

var newUrl = "?" + $.param(params);