Using a dropdown to change pages

A common method of changing pages in a multi-page SPA is via a dropdown.

You want the user to select an option and the page to switch.

In Active CSS, then, you want this functionality to work with @pages. How do you do this?

You place the route in the option tag, in a special ACSS attribute "data-page".

For example:

<select id="branchChooser">
    <option>Choose a branch</option>
    <option data-page="/aylesford">Aylesford</option>
    <option data-page="/brighton">Brighton</option>
    <option data-page="/eastbourne">Eastbourne</option>
    <option data-page="/hastings">Hastings</option>
    <option data-page="/orpington">Orpington</option>
    <option data-page="/tunbridge-wells">Tunbridge Wells</option>
</select>

This will give you a dropdown that ties into the @pages declaration via the route in "data-page". When the user selects the option, the routing attributes from @pages are placed directly into the select tag.

In your config, you will need to monitor the change event, and get it doing the same thing as the click event for your ajax page switching. The click event is not a cross-browser valid event for select tags. The click event works in Firefox but not in Chromium. So you should use the "change" event to get it cross-browser.

For example:

.ajaxLink:click, .ajaxLink:change {
    ... do the ajax loading, rendering, etc.
}

That should be all that is needed for your dropdown to work.