Question

Using jeditable jQuery plugin along with the timepicker plugin. (custom inputs “Time Picker 2” from this page: http://www.appelsiini.net/projects/jeditable/custom.html)

The time picker plugin seams to override the ‘onblur cancel’ functionality and clicking on a new editable region will add another selector to the page without clearing out the first.

There is a working example in JSfiddle:

HTMl:

<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" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span>
            </td>
        </tr>
    </tbody>
</table>

JS:

var jamroom_url = 'http://www.earner.iixxii.cc';
/**
 * this is for the editable times using jeditable.
 */
$(".time").each(function () {
    $(this).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')
    });
});

/**
 * 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);
}

Click on any of the times in the START or END columns will change the time to editable.

The way I want it to work is when a new time is clicked on the old time is returned to its un-edited state. In the jquery.editable.js function there is a cancel operation.

What I would like to know is how to call that directly when a new time is clicked.

Answer 1

You can attach a click handler for each element to reset all other editables:

$(".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();
    });
});

See updated jsfiddler: http://jsfiddle.net/william/kb2n5/1/