Home/ Questions/Q 8289373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T12:29:38+00:00

I’m trying to create a simple sorting option for posts in my blog. The

  • 0

I’m trying to create a simple sorting option for posts in my blog. The problem is the last thing I want to use is a JS-based redirections because of the fact some users don’t have JS enabled in their browsers, thats why they wont be able to sort posts in me blog. Let me give you an example:

I have several categories in my blog:

//categories selection
<ul>
    <li class="active"><a id="cat1" href="/?category=music">Music</a></li>
    <li><a id="cat2" href="/?category=photo">Photo</a></li>
    <li><a id="cat3" href="/?category=cinema">Cinema</a></li>
    <li><a id="cat4" href="/?category=computers">Computes</a></li>
</ul>

Also, I have two sorting options:

//sorting options
<div>
    <a class="active">Last posts</a>
    <a>Last comments</a>
</div>

Depening on current active elements, user is redirected on page with such parameters, e.g. ‘/?category=music&sort=posted’ or ‘/?category=personal&sort=commented’.

For example, lets take that in categories selection ‘CINEMA’ tab is active at this moment (

<li class="actvie"><a id="cat3" href="/?category=cinema">Cinema</a></li>

). So, if user clicks Last comments link, it should redirect to 

'/?category=cinema&sort=comments'

Another example: currently Last comments is active (

<a class="active">Last comments</a>

). User clicks on Computes in category selection and it should redirect to 

'/?category=computers&sort=comments'.

So, are there any variants for performing such feature without JS? If no, could you suggest me the most elegant solution except manually running over every element in category and sorting optiona and generation link with JS/jQuery?

Thanks in advance!

SERVER SIDE:

db.collection("posts", function (err, collection) {
    //getting posts dependinc on requested category
    collection.find({category: req.query['category']}, {sort: [['time_added', -1]], limit:20}, function (err, posts) {
        //getting posts and rendering page
    });
});

UPDATE: I’ve found a so-so solution. For a separate category I render two div’s with different posts list. One for ‘Last posted’, the second – for ‘Last commented’. And the sort selector will just hide one div and shows another. The problem is just twice data size transfering to client side. I know, it will require a bit JS, but the main category links would be clear without ‘#’-hrefs. And sort options – it’s just a toogle, it may not have real link.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seems like you are doing a page refresh for selecting a new category. Use the selected category parameter to determine the URL of the sorting options. Would need some more code from your server side to give you a more concrete example.

    If you don’t want to use Javascript you will have to generate the href-attribute of your sorting links <a class="active">Last posts</a> dynamically based on which category is selected. How are you rendering the page today? Just static files? Have a look at a template engine like mustache.js and then you could do it like this: 

    <a class="active" href="/?category={{category}}&sort=comments">Last posts</a>

    Have a look at this tutorial for an Node.js example using mustache.js
    http://mrjaba.posterous.com/a-gentle-introduction-to-nodejs

    Edited after your comment: Or something like this using EJS

    <div>
    <a href="/?category=<%=category%>&sort=posts" class="active">Last posts</a>
    <a href="/?category=<%=category%>&sort=comments">Last comments</a>
</div>
    • 0