Datepicker очищает модальное значение данных - PullRequest
Новая
       11

Datepicker очищает модальное значение данных

0 голосов
/ 04 июля 2019

У меня есть цикл foreach с кнопками, которые запускают модальный режим.Модал имеет форму, которая включает в себя поле ввода DatePicker.Для удобства некоторые другие поля формы предварительно заполнены переменными из начальной кнопки триггера.Однако, когда я выбираю указатель даты, все остальные поля ввода стираются.Я предполагаю, что это потому, что мое событие datepicker перезаписывает мои поля данных, но я не могу понять, как привести их оба в гармонию.

Я пытался изменить порядок выбора даты и модальное событие и следовал другим примерамс различными версиями 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
    });

})

Данные, одна и вторая, корректно заполняют свои поля, но нажатие на поле ввода datepicker удаляетдругие поля, если они были заполнены кнопкой триггера.Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 11 июля 2019

По аналогии с предложением @ suraj в комментариях я просто поставил галочку в начале своей функции, что решило проблему очистки других полей при выборе ввода даты. Для результата не имеет значения, находится ли указатель даты в основной функции или вне ее. 

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

Используя: alert (event.relatedTarget) в моей функции показа, я понял, что вся функция запускается полем даты, только при использовании .datepicker, что приведет к тому, что event.relatedTarget будет нулевым, потому что, очевидно, информация о данных поскольку другие поля не сохраняются в указателе даты, и поскольку он повторно запускает функцию, он обновляет поля поиска новыми пустыми данными.

Приведенный выше фрагмент предотвращает перезапись переменных как нулевых при выборе datepicker, но функция show по-прежнему запускается снова при выборе datepicker, только теперь она не меняет никаких входных данных.

Я до сих пор не до конца понимаю, почему модальный показ снова запускается средством выбора даты, но это самый простой обходной путь, который я нашел, пока не смог лучше понять, что происходит ...

...