jEditable - 如何绕过 datepicker onselect 事件中的提交答案

【问题标题】：jEditable - How to bypass the submit in datepicker onselect eventjEditable - 如何绕过 datepicker onselect 事件中的提交
【发布时间】：2011-10-19 12:37:07
【问题描述】：

我正在将 jeditable 与 datepicker 一起使用，并且我希望在用户选择日期后再将其提交到数据库后进行一些验证。我浏览了 jeditable-datepicker.js 并意识到一旦发生 onselect 事件就会触发提交。如何在事件中包含条件，使无效日期不会提交到数据库？

这是我使用 onsubmit 事件的试验：

 $('.expirydatepicker').editable('@(Url.Action("Edit", "Stock"))',
    {
        type: 'datepicker',
        indicator: 'saving...',
        event: 'dblclick',
        tooltip: 'Double click to edit...',
        style: 'inherit',
        width: ($('.datepicker').width() - 10) + "px",
        onsubmit: function (settings, td) {
            var tid = $(td).attr('id');
            //alert(tid);
            $.ajax({
                async: false,
                url: '/Stock/CompareDate',
                type: 'GET',
                data: { id: tid },
                success: function (result) {
                    if (result < 0) {
                        alert("Expiry dare cannot be earlier than storage date");
                        return onSelect(false);
                    }
                    else {
                        return true;
                    }
                }
            });
        }
    });

jEditable-datepicker 函数：

/* attach jquery.ui.datepicker to the input element */
plugin: function( settings, original ) {
  var form = this,
      input = form.find( "input" );

  // Don't cancel inline editing onblur to allow clicking datepicker
  settings.onblur = 'nothing';

  datepicker = {
    dateFormat: 'D, dd M yy',
    onSelect: function() {
      // clicking specific day in the calendar should
      // submit the form and close the input field
      form.submit();
    },

我想知道如果输入无效，我是否可以“停止” onselect 事件？希望能在这里得到一些帮助...谢谢....

【问题讨论】：

标签： javascript jquery datepicker jeditable

【解决方案1】：

试试这样的：

plugin : function(settings, original) {
..
$(this).find('input').datepicker().bind('click', function(e) {
   //e.preventDefault() // also test this
   return false;
})

【讨论】：

【解决方案2】：

能否简单检查所选日期是否有效，如果有效则只提交和表单？

onSelect: function(dateText, inst) {
    if (/* dateText is valid */) {
        form.submit();
    }
}

【讨论】：

嗨，我试过这样，但我不明白为什么我不能从插件中重写 onselect 方法。即使我注释掉插件脚本中的所有 onselect 事件，表单仍然提交！............
你的意思是你在日历上选择了一个日期后，即使你注释掉了onselect事件，表单仍然提交？
我刚刚做了一个快速的 jsfiddle，但无法重现您所描述的内容：jsfiddle.net/william/6VUHh/7。您可能需要在 jeditable-datepicker.js 和 HTML 中发布更多代码。
嗨，我在jsfiddle.net/william/6VUHh/7 更新了 jeditable.datepicker.js，但它不起作用..
您需要在进行任何更改后点击“更新”按钮。

【解决方案3】：

我通过不停止提交来完成它，但如果验证失败，则将输入值更改回默认值。这是我能完成它的唯一方法。谢谢！

【讨论】：