How to sort posts with a dropdown menu PHP

Question

I'm trying to create a menu which can be used to sort or filter posts from my database, much like how imgur.com sorts their posts. What I'm going for is sorting posts by either newest first or most popular and filtering by category. The sort order I can manage, but I'm not sure how to dynamically change it by which option is selected. Here's some example code.

<html>
<div id="sort-menu">
<span>Sort by</span>
<select>
    <option>Newest first</option>
    <option>Most popular</option>
</select>
<span>in</span>
<select>
    <option>All</option>
    <option>Category1</option>
    <option>Category2</option>
    <option>Category3</option>
</select>
</div>
</html>

Robert Calove · Accepted Answer · 2016-01-10 16:59:18Z

2

In order to dynamically change the contents of a page, you're going to need to use Javascript and AJAX. With your select box, you need to have an event handler watching for a change in the element's value. On change, you parse that value and make an AJAX call to your server to pull the data you want to display. Upon completion, use that data to populate the content on the page.

Another alternative is you can load all of the data you want, albeit inefficient, and just hide the different content until a user selects the corresponding option in the option box. The problem with this is if you have a lot of content spread among those pages, then there will be a performance issue.

EDIT (with sample code):

<div id='content-one'>
    ...
</div>

<div id='content-two'>
    ...
</div>

<select id='choice'>
    <option value='one'>Content One</option>
    <option value='two'>Content Two</option>
</select>

<script>
    $(function() {
        // When our select changes, we execute a callback
        $('#choice').change(function() {
            var val = $('#choice').val();

            // This implementation can be changed. This is just how I would do it
            $.ajax({
                type: 'GET',
                url: 'path/to/content/' + val; // ie 'path/to/content/one' or 'path/to/content/two'
            }).done(function(data){
                if (val == 'one')
                    // Populate content for one
                else
                    // Populate content for two
            });

            // Hide everything, then show the content that was selected
            $("#content-one, #content-two").hide();
            $("#content-" + val).show();
        });
    });

</script>

edited Jan 10, 2016 at 16:59

answered Jan 10, 2016 at 16:28

Robert Calove

4493 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Codedstuff Over a year ago

Ok, sounds promising. Can the event handler just be a form with the action being the call? I'm not great with javascript and AJAX though so do you think you could possibly give a quick example of what that may look like? Thanks for your help

Codedstuff Over a year ago

sorry, one more thing, I'm getting a syntax error with this line var val = $(#choice).val();

Robert Calove Over a year ago

I apologize, the parameter should be a string, like so: $('#choice').val(); My mistake, I'll update the code.

Codedstuff Over a year ago

no worries. Now though, I'm getting one here url: 'path/to/content/' + val;

Robert Calove Over a year ago

This was just an example. This URL needs to be a server implementation written by you to acquire the data you need for the page.

|

Collectives™ on Stack Overflow

How to sort posts with a dropdown menu PHP

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related