Force select Dropdown option and reload page before page load

JavaScript
1

On a product list page of our store, we have (customer-facing) the ability to allow someone to select their Sort By in a dropdown box, one of the options being “A to Z.” Due to some constraints on our backend, we have no way of “forcing” the page to sort “A to Z,” instead only sorting on “Most Popular” and a few other options.

The issue is that we do want this particular page to sort A to Z by default, and we want it to do so in a way that doesn’t interfere with the guest. So, the script would have to trigger before the page loads, select the A to Z sort from that drop down box, and then fire the page reload (or reload the page as soon as possible, so a customer doesn’t see the page “double load” or anything). Make sense?

I have no idea how to start with this javascript, but one solution is to hide the content of the page via CSS, then fire the dosort using some kind of script, but there may be something way more elegant than that…

Here’s the code for the dropdown:

<div class="sortProductsMain">
<label id="sortById" class="sortProductsHeader">Sort By: </label>
<select id="sortSelection" dojoattachevent="onchange: doSort">
<option id="sortProductsDefault" class="sortProductsDefault" value="sortProductsDefault">Most Popular</option>
<option id="sortProductsHighestRated" class="sortProductsHighestRated" value="sortProductsHighestRated">Highest Rated</option>
<option id="sortProductsNewest" class="sortProductsNewest" value="sortProductsNewest">Newest</option>
<option id="sortProductsAToZ" class="sortProductsAToZ" value="sortProductsAToZ">A-Z</option>
<option id="sortProductsZToA" class="sortProductsZToA" value="sortProductsZToA">Z-A</option>
<option id="sortProductsPriceHighToLow" class="sortProductsPriceHighToLow" value="sortProductsPriceHighToLow">$$$-$</option>
<option id="sortProductsPriceLowToHigh" class="sortProductsPriceLowToHigh" value="sortProductsPriceLowToHigh">$-$$$</option>
</select>
2

I’ve stumbled on this at Daft Logic and the last bit of code (Post-Render Selection by Value) seems to do something similar to what I want.

As I haven’t tested yet in a live environment, I’m worried that it will select the value I want in the dropdown box (sortProductsAtoZ) but not actually fire the doSort in the dropdown menu…

3

Here’s my new code. Problem is, I’m still not able to fire the doSort from the dropdown box, so while the page loads and then the correct entry in the box is selected, the page doesn’t actually re-sort the products.

Note that – by necessity – my javascript has to come before the Sort By dropdown on the page, which is part of the reason I’m doing all these onload calls in order to wait for everything to be done loading.

JavaScript: this code is meant to

  1. Wait till everything’s loaded on the page.
  2. Select sortProductsAToZ in the dropdown.
  3. Fire the doSort of the dropdown box so the products actually sort A-Z.
<script>
document.body.onload = function () {
	function setSelectedIndex(s, valsearch)
	{
		// Loop through all the items in drop down list
		for (i = 0; i< s.options.length; i++)
		{ 
			if (s.options[i].value == valsearch)
			{
				// Item is found. Set its property and exit
				s.options[i].selected = true;
				break;
			}
		}
		return;
	}
	window.document.body.onload = setSelectedIndex(document.getElementById("sortSelection"),"sortProductsAToZ");
	dojo.addOnLoad = function() {
		doSort(sortProductsAToZ);
	};
}

</script>

Sort By (dropdown box)

<div class="sortProductsMain">	
		<label class="sortProductsHeader" id="sortById">Sort By: </label>
			<select dojoattachevent="onchange: doSort" id="sortSelection">
				<option class="sortProductsDefault" value="sortProductsDefault" id="sortProductsDefault">Most Popular</option> 
				<!--<option id="sortProductsFeatured" value="sortProductsFeatured" class="sortProductsFeatured">Featured</option>-->
				<option class="sortProductsHighestRated" value="sortProductsHighestRated" id="sortProductsHighestRated">Highest Rated</option>
				<option class="sortProductsNewest" value="sortProductsNewest" id="sortProductsNewest">Newest</option>
				<!--<option id="sortProductsMostPopular" value="sortProductsMostPopular" class="sortProductsMostPopular">Most Popular</option>-->
				<option class="sortProductsAToZ" value="sortProductsAToZ" id="sortProductsAToZ">A-Z</option>
				<option class="sortProductsZToA" value="sortProductsZToA" id="sortProductsZToA">Z-A</option>
				<option class="sortProductsPriceHighToLow" value="sortProductsPriceHighToLow" id="sortProductsPriceHighToLow">$$$-$</option>
				<option class="sortProductsPriceLowToHigh" value="sortProductsPriceLowToHigh" id="sortProductsPriceLowToHigh">$-$$$</option>
			</select>	
</div>

In testing, I can get steps 1 and 2 to work, but never step three (firing the doSort). What am I doing wrong?