JSFiddle - React, Tailwind, and code Playground

by olymccollum

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://qd9.co.uk/projects/jQuery-Plugins/sort/jquery.sort.js"></script>


<div id="results-1" data-role="page">

        <div data-role="header" data-position="fixed" data-transition="none">
            <h1>rallyscore.net</h1>
            <a href="/" data-icon="home" data-ajax="false">Home</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="#schedule">Schedule</a></li>
                    <li><a href="#classes">Classes</a></li>
                    <li><a href="#entry-list">Entries</a></li>
                    <li><a href="#final-results">Results</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /header -->

        <div data-role="content">
    
            <h2>Dogleap Rally</h2>
            <p class="event-date">04 August 2012</p>
        
            <div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Sort results by:</legend>
             <input type="radio" name="radio-choice-2" id="radio-choice-21" value="overall" checked="checked" />
             <label for="radio-choice-21">Overall</label>

             <input type="radio" name="radio-choice-2" id="radio-choice-22" value="stage"  />
             <label for="radio-choice-22">Stage</label>

    </fieldset>
</div>
        
            <ul class="stageResults sortableResults" data-role="listview" data-inset="true">
                <li data-role="list-divider">SS1 - Stage 1 results</li>
                <li data-stage-order="1" data-overall-order="1" data-class="9">
                    <h3>119 Derek McGeehan / Alan McGeehan</h3>
                    <span class="quarter car"><label for="car">Car:</label><span id="car">Class 9 - Mini WRC</span></span>
                    <span class="quarter stageTime"><label for="stageTime">Stage time:</label><span...

JavaScript

// http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$(function(){
    var sortOrder = 'overall';
    
    $('input[name="radio-choice-2"]').change(function(){
        if($(this).val() != sortOrder){
            $('ul.sortableResults li').sort(function(a, b){
                if (sortOrder == 'overall') {
                    a = $(a).attr('data-overall-order');
                    b = $(b).attr('data-overall-order');
                } else {
                    a = $(a).attr('data-stage-order');
                    b = $(b).attr('data-stage-order');
                }
                
                //return (isNaN(a) || isNaN(b) ? a > b : +a > +b) ? 1 : -1;
                return parseInt(a) > parseInt(b) ? 1 : -1;
            });
            
            sortOrder = $(this).val();
        }
    });
});