JSFiddle - React, Tailwind, and code Playground

by william

HTML

<script src="http://junk.hostsaba.com/timetracker/jquery.jeditable.mini.js"></script>
<script src="http://junk.hostsaba.com/timetracker/jquery.jeditable.time.js"></script>
<script src="http://junk.hostsaba.com/timetracker/jquery.json-2.2.min.js"></script>
<table width="100%" cellspacing="0" cellpadding="0" class="individual_times">
    <tbody><tr>
        <th>Start</th>
        <th>End</th>
        <th>Elapsed</th>
        <th></th>
        </tr>
        <tr>
            <td style="width: 290px" id="start_124" class="time" title="Click to edit...">11:38</td>
            <td style="width: 290px" id="end_124" class="time" title="Click to edit...">11:29</td>
            <td>838:59:59</td>
            <td><span id="delete124"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span></td>
        </tr>
        <tr>
            <td style="width: 290px" id="start_125" class="time" title="Click to edit...">12:03</td>
            <td style="width: 290px" id="end_125" class="time" title="Click to edit...">12:03</td>
            <td>00:00:01</td>
            <td><span id="delete125"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span></td>
        </tr>
        <tr>
            <td style="width: 290px" id="start_126" class="time" title="Click to edit...">12:24</td>
            <td style="width: 290px" id="end_126" class="time" title="Click to edit...">12:34</td>
            <td>00:09:15</td>
            <td><span id="delete126"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span></td>
        </tr>
        <tr>
            <td style="width: 290px" id="start_127" class="time" title="Click to edit...">12:35</td>
            <td colspan="2">Currently working....</td>
            <td><span id="delete127"><img alt="delete"...

JavaScript

var jamroom_url = 'http://www.earner.iixxii.cc';
/**
 * this is for the editable times using jeditable.
 */
$(".time").editable(submitEdit, {
    indicator: '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
    type: 'time',
    submit: 'OK',
    tooltip: 'Click to edit...',
    cancel: 'cancel',
    id: $(this).attr('id'),
}).click(function() {
    var allEditables = $(this).closest('table').find('.time');
    $.each(allEditables.not($(this)).get(), function(i, elm) {
        elm.reset();
    });
});

/**
 * and this is extending jeditable to return multiple values to update the elapsed time too.
 * from http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess
 * @param value
 * @param settings
 */

function submitEdit(value, settings) {
    var edits = new Object();
    var origvalue = this.revert;
    var textbox = this;
    var result = value;
    edits['value'] = value;
    edits['id'] = settings.id;
    var returned = $.ajax({
        url: jamroom_url + "/apTimetracker.php?mode=tracker&t=edit",
        type: "POST",
        data: edits,
        dataType: "json",
        complete: function(xhr, textStatus) {
            var response = $.secureEvalJSON(xhr.responseText);
            if (response.success_msg == 'success') {
                alert('was successful');
            }
        }
    });
    return (result);
}