JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<div class="page-body">
    <form action="" method="post">
        <table class="alerts tablesorter" id="accTable" cellspacing="0">
            <thead> 
                <tr class="header">
                    <th class="activity-header"> A </th>
                    <th class="activity-header"> Signed </th>
                    <th class="activity-header">  </th>
                </tr>
            </thead> 
            <tbody>      
                <tr class="row" id="7249">
                    <td class="activity-data">7249</td>
                    <!-- tablesorter can't sort a column with check boxes out-of-the-box, so it needs something to sort on. That is why the span tag is here -->
                    <!-- a jquery script is watching the state of the checkbox, so when clicked the value in the span is updated -->
                    <td class="checkbox"> <span style="display:none;">0</span> <input name="signed" type="checkbox" > </td>
                    <td class="edit-column"> <input value="Save" type="submit" name="7249"></td>
                </tr>
                <tr class="row" id="61484">
                    <td class="activity-data">61484</td>
                    <td class="checkbox"> <span style="display:none;">1</span> <input name="signed" type="checkbox" checked > </td>
                    <td class="edit-column"> <input value="Save" type="submit" name="61484"></td>
                </tr>
            </tbody>
        </table>
        <p>Click in the following textbox and hit enter</p>
        <input type="text"/>
    </form>
</div>

JavaScript

$(document).ready(function() {
    $("#accTable").tablesorter();
    // :checkbox stops from executing the event on the save button. Same as input[type=checkbox]
    $('#accTable input:checkbox').click(function() {
        // insert 1 or 0 depending of checkbox state in the tag before the input tag. In this case <span> is before <input>
        // this is done so tablesorter have something to sort on, as it doesn't support checkbox sort out of the box.
        var order = this.checked ? '1' : '0';
        $(this).prev().html(order);
        $(this).parents("table").trigger("update");
    });
    $('form :submit').live('click', function() {
        $('form').data('_submit_name', $(this).attr('name'));
    });
    // sends the form content to server side, and stay on page
    $('form').live('submit', function() {
        if (!$(this).data('_submit_name')) {
            // ! operator is used to deal with undefined, null and ''
            alert('submit was not clicked');
        } else {
            alert('submit ' + $(this).data('_submit_name') + ' was clicked');
            $(this).data('_submit_name', '');
            // you must reset the variable after the submit event is dealt with
        }
        return false;
    });
});