Question

我有一个foreach循环，其中包含触发模态的按钮。模态具有包括日期选择器输入字段的形式。为了方便起见，在其他一些表单字段中预填充了初始触发按钮中的变量。但是，当我选择日期选择器时，将清除所有其他输入字段。我认为这是因为我的datepicker事件正在覆盖我的数据字段，但无法弄清楚如何使它们两者协调一致。

我尝试对日期选择器和模式事件进行重新排序，并且在其他示例中使用了各种日期选择器版本，但均未成功。我可以在其他没有日期选择器的字段中放入不会引起问题的字段。

Version: bootstrap-datepicker/1.7.1/

带有一些变量的触发按钮：

<button data-toggle='modal' data-one='{$row['thingone']}' data-two='{$row['thingtwo']}' data-target='#myModal'>The Button</button>

我的模式中的表格：

<form method='post' action=''>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>One Thing</th>
                <th>Two Things</th>
                <th>The Date</th>
            </tr>
        </thead>
        <tbody id='myModalbody'>                               
            <tr>
                <td><input class='form-control' type='text' name='one' id='one' ></td>
                <td><input class='form-control' type='text' name='two' id='two' ></td>
                <td><input class='form-control' id='the_date' type='text' data-date-format="yyyy/mm/dd" name='the_date' ></td>
            </tr>                               
        </tbody>
    </table>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary"> Update </button>
    </div>
</form>

和我的脚本位于此迭代的页面结尾：

$('#myModal').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget)
    var one    = button.data('one') //info from data-*
    var two    = button.data('two')
    var modal  = $(this)
    modal.find('.modal-body #one').val(one)
    modal.find('.modal-body #two').val(two)

    $('input[name="the_date"]').datepicker({                
        format: "yyyy/mm/dd",           
        autoclose: true,
        todayHighlight: true
    });

})

数据事物1和事物2正确地填充到它们各自的字段中，但是如果已经从触发按钮中填充了其他字段，则单击datepicker输入字段将删除它们。任何帮助将不胜感激！

Answer 1

类似于@suraj在评论中的建议，我只是在函数的开头进行了检查，从而解决了在选择日期输入时清除其他字段的问题。 datepicker进入或退出主要功能与结果无关紧要。

 if ( event.relatedTarget != null) {
     var button     = $(event.relatedTarget) // Button that triggered the modal
 }

在我的show函数中使用：alert (event.relatedTarget)，我意识到只有在使用.datepicker时，日期字段才重新触发整个函数，这将导致event.relatedTarget为空，因为显然其他字段的数据信息没有存储在datepicker中，并且因为它重新触发了该函数，所以它将使用新的空数据更新查找字段。

上面的代码片段防止在选择datepicker时将变量重写为null，但是在选择datepicker时show函数仍然再次运行，只是现在它不更改任何输入数据。

我仍然不完全理解为什么日期选择器会再次触发显示模式，但这是我找到的最简单的解决方法，直到我能更好地了解发生了什么...

日期选择器清除模态数据值

1 个答案: