JQuery.jeditable.Отменить предыдущий сборщик времени, когда открывается новый сборщик времени - PullRequest
Новая
       2

JQuery.jeditable.Отменить предыдущий сборщик времени, когда открывается новый сборщик времени

0 голосов
/ 12 июля 2011

Использование jeditable плагина jQuery вместе с плагином timepicker. (пользовательские входы "Time Picker 2" с этой страницы: http://www.appelsiini.net/projects/jeditable/custom.html)

Плагин выбора времени сшивает для отмены функции «onblur cancel», и нажатие на новую редактируемую область добавит другой селектор на страницу без очистки первого.

Есть рабочий пример в 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 /715700/kak-vyiti-iz-jquery-jeditable-besporyadka
 * @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);
}

Если щелкнуть любое время в столбцах СТАРТ или КОНЕЦ, вы измените время на редактируемое.

Я хочу, чтобы это работало, когда новое время щелкается по старому времени и возвращается в его неотредактированное состояние. В функции jquery.editable.js есть операция отмены.

То, что я хотел бы знать, это как это вызывать напрямую при нажатии на новое время.

1 Ответ

2 голосов
/ 14 августа 2011

Вы можете прикрепить обработчик щелчка для каждого элемента, чтобы сбросить все остальные редактируемые объекты: 

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

См. Обновленный jsfiddler: http://jsfiddle.net/william/kb2n5/1/

...