Question

I have some javascript sorting my ul, alphabetically a-z or z-a. It works fine on page one, but if there is more than one page it ignores the list on page 2 etc.

So, instead of using javascript to sort the li’s, I want to pass the selection back to the page’s query and reload

here’s my script, most of which is redundant now.

var select = document.getElementById('organise');

        $('#organise').change(function() {

            if(select.value === 'A') {

                $('.recipeTable li').sortElements(function(a,b){

                    var aText = $.text([a]);
                    var bText = $.text([b]);

                    return aText.toLowerCase() > bText.toLowerCase() ? 1 : -1;
                });

            } else {

                $('.recipeTable li').sortElements(function(a,b){

                    var aText = $.text([a]);
                    var bText = $.text([b]);

                    return aText.toLowerCase() > bText.toLowerCase() ? -1 : 1;
                });

            }

        });

So I want to detect the selected dropdown value (either A or Z) and pass that into the url and reload. I’m stuck ;-?

Rich 🙂

Answer 1

I am not sure this is the best way to approach the problem, and maybe you should elaborate what doesn’t work with your pagination. In any case, you can achieve what you need to do by doing something like this (explaination in the code comments):

var queryString = {};

// Get the previous query string with a little help from PHP
// this shouldn't be a problem since you are already using PHP
// for your project.
queryString = <?php json_encode( $_GET ); ?>;

$('#organise').change( function() {

    // Set the sort property of the object to the value of the select.
    queryString.sort = $(this).val();

    // jQuery will help you serialise the JSON object back to
    // a perfectly valid query string (you may want to escape
    // characters)
    newQueryString = $.param( queryString );

    // Append the new query string
    window.location = newQueryString;

});

This function will properly check if you already have any query string and preserve that; also, if the user changes the select multiple times, it will not add up several query strings.