jquery。 jeditable。新しい時刻選択ツールが開いたときに前の時刻のピッカーをキャンセルします。

Question

jeditable jQueryプラグインをtimepickerプラグインとともに使用します。 （このページのカスタム入力「Time Picker 2」）

「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 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); 
} 

STARTまたはENDのコラムで何度も上をクリックして、時間を変更します編集可能にする。

私が動作させたいのは、古い時間に新しい時間をクリックして未編集状態に戻す場合です。 jquery.editable.js関数にはキャンセル操作があります。

私が知りたいのは、新しい時間をクリックしたときに直接呼び出す方法です。

Answer 1

あなたは他のすべてのeditablesをリセットするために、各要素のクリックハンドラをアタッチすることができますhttp://jsfiddle.net/william/kb2n5/1/

：

$(".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を参照してください。