Need info on sort-select class in Skyscraper sort form

[mdp]

Hello PW Friends,

I'm building my first ProcessWire site, having made the leap from WordPress, and all I can say is WOWWWW!!!  ProcessWire is fantastic. Thanks to all of you for your wonderful work and dedication. And especially to Ryan. The site I'm working on has a lot of structured data and needs to scale, and this cms will make my job so much easier. And without all the plug-ins!  It's the perfect tool for the job.

I'm basing my site on the Skysraper profile and need to use the 'sort' feature.  I'm using the code from the 'syskraper-list-sort.php' file, which is in the 'includes' folder (pasted below).  The select control has the id  'skyscraper-sort-select' and the class  'sort-select'. The skyscraper.js file is looking for '.sort-select'.  It is different on the page http://modules.processwire.com/modules/?sort=title.

• Will the skyscraper.js file code trigger on whatever is called 'sort-select', either the class or the id?
• Is there another way to handle the sorting that would be the preferred method?

Many thanks,
mdp

<form method='get' class='uk-form sort-form'>
    <label for='skyscraper-sort-select' class='uk-text-muted'>
        Sort:
    </label>
    <select id='skyscraper-sort-select' class='sort-select'><?php 
        foreach($options as $value => $label) {
            $selected = $label == $selectedLabel ? ' selected' : '';
            echo "<option$selected value='$value'>$label</option>";
        }
    ?></select>    
</form>

in the skyscraper.js file is this script:

$(document).ready(function() {
	$('.sort-select').on('change', function() {
		window.location.href = $(this).val();
	});
}); 

The sort select form at the PW site  http://modules.processwire.com/modules/?sort=title 

<form id=sort-select action=./>
<select name=sort onchange="window.location.href='?sort='+jQuery(this).val()">
	<option value=-likes>Sort by: # Recommendations
	<option selected value=title>Sort by: Title (A-Z)
	<option value=-title>Sort by: Title (Z-A)
	<option value=-created>Sort by: Date Added (Newest-Oldest)
	<option value=created>Sort by: Date Added (Oldest-Newest)
	<option value=-modified>Sort by: Date Last Modified (Newest-Oldest)
	<option value=modified>Sort by: Date Last Modified (Oldest-Newest)
	<option value=-release_state>Sort by: Release State (Stable-Alpha)
	<option value=release_state>Sort by: Release State (Alpha-Stable)
</select>
</form>

 

Edited January 20, 2019 by mdp
Updated to clarify the question

[MoritzLost]

Hey mdp,

regarding your questions:

Quote

 Will the skyscraper.js file code trigger on whatever is called 'sort-select', either the class or the id?

The code you pasted will be called whenever any select element (or other input element, for that matter) with the class sort-select. This part is the key:

$('.sort-select')

That's a jQuery selector, the dot symbolizes a class selector (it mimics CSS selectors). If you want to do the same thing for an element with an id, use a pound sign instead instead:

// select the element with id 'sort-select'
$('#sort-select')

// select any element that has either the class or the id 'sort-select'
$('.sort-select, #sort-select')

 

Quote

 Is there another way to handle the sorting that would be the preferred method?

A cleaner, native way to handle this are GET-parameters in the url. First, you need to include a submit button in the form:

<form id="sort-select" method="get">
  <select name="sort">
    <option value="-likes">Sort by: # Recommendations</option>
	<option selected value="title">Sort by: Title (A-Z)</option>
	<option value="-title">Sort by: Title (Z-A)</option>
	<!-- ... -->
  </select>
  <input type="submit" value="Submit">
</form>

Just a side-note, your HTML attribute values should be encased by quotes. Also, the options need closing tags to be valid HTML5. I also removed the onchange attribute, though you can keep it in if you want to automatically trigger the submit.

This is actually all that is needed! Since the form doesn't have an action attribute, it will go to the same page the form is on. The selected sort-option will be included in the targeted URL as a GET-parameter, where it can be picked up by PHP to generate the results listing. The onchange-attribute does the same thing, it basically auto-submits the form whenever you change the value of the select input (the code in the skyscraper.js file does the same thing, by the way). However, by including the submit-button, you make the entire form more accessible and ensure it will even work if JavaScript is disabled.

[mdp]

Hi MoritzLost,

Thank you so much for explaining the jquery!  That's very helpful.  And I usually do close the option tags, but I noticed that on the processwire site, they weren't included. So I wasn't sure if there was a new ways of doing things. Or maybe the code I copied from the site (using the Inspect tools on Chrome) clipped them off? Anyway, I agree it's good to always close the html tags.

As to the submit button, that's a good idea. And definitely much easier and cleaner.  I've done sorting and filtering before using the submit button. But for this project, it has to work without a button.  I'm new to jquery, and your explanation about the class and id has cleared up my confusion.

Best wishes,
mdp

[bernhard]

2 hours ago, mdp said:

And I usually do close the option tags, but I noticed that on the processwire site, they weren't included. So I wasn't sure if there was a new ways of doing things. Or maybe the code I copied from the site (using the Inspect tools on Chrome) clipped them off? Anyway, I agree it's good to always close the html tags.

The site where you copied your code from uses ProCache and this https://processwire.com/blog/posts/processwire-2.6.9-core-updates-and-new-procache-version/#major-enhancements-to-html-minify-capabilities

Quote

ProCache uses our own homegrown HTML minify library, and we're constantly optimizing and improving it. The result is in ProCache 3.1. I now believe we have the best HTML minify library available. I've compared it with other popular HTML minify libraries, and have found ours can save more bytes than any other library I've tested with… and often, significantly more so. If you can find an HTML minify library that can minify your HTML better than ours, we'd like to know about it. Here are some of the new features added in ProCache's HTML minification tool:

If you are new to jQuery it's worth doing some homework here: https://learn.jquery.com/  While it is not necessary to use it on your frontend, it is used in the PW backend all over, so understanding jQuery at least a little will make your life easier.

Welcome on board and good luck with your first pw site ? 

[mdp]

Hi Bernhard,

Thanks for the info and the links to jQuery tutorials. I haven't had to learn jQuery yet for any prior projects, but it will be very useful for my current project. The site I'm building is a resource directory of information for teachers in higher education.  I'm trying to keep it as plain vanilla as possible, because I will need to hand it off to someone else in the future and I won't know who that person is or what their skills will be.  It's a risk doing it on Processwire instead of Wordpress, which is what I was originally planning to use, but PW is just so much better. And now that I've found it, there's no going back.  The project got so much easier with ProcessWire, even with the time I've put in to learn the API, build my own php templates, etc. It's definitely worth the effort.  

Best wishes,
mdp