Using event-based classes instead of onclicks

by ritcheyer

HTML

<div class="btn-row">
    <!-- this button doesn't have an onclick as 
    this is also the way we should do our submits -->
    <button class="btn-primary evtBtnSubmit">Submit</button>

    <!-- Since we will never be able to guarantee JS is available
    (there are a variety of reasons why the js might not be working:
    - maybe there's a JS error?
    - maybe a file didn't fully load?
    - maybe the user clicked on something before the JS fully loaded? -->
    <a href="/app/" class="btn-helper-text evtbtnCancel">Cancel</a>
</div>

CSS

/*
 * Beyond this separation being a best-practice
 * for development, it will also help us in the 
 * long run when we decide to take our app to the
 * mobile web, using Responsive Web Design techniques.
 * 
 * Other benefits include allowing us to be less 
 * reliant on what a user might have installed on 
 * their computer. They may have a very slow computer
 * or connection, and we may want to serve them less.
 * 
 * Some users may be using assistive devices, which
 * are notoriously bad at reading/parsing javascript.
 */

JavaScript

$(document).ready(function(){
    
    // user clicked on something with the .evtBtnCancel class
    $('.evtBtnCancel').click(function(e){

        // prevent the default action of the element clicked
        // in this case, an <a> tag.
        e.preventDefault();

        // clear your session
        $.postJSONSync("/app/service/clear_session");

        // redirect the user
        window.location =  "/app/";
    });
});