Добавление динамической строки с полями даты jQuery

У меня есть веб-приложение, которое я разрабатываю, и оно включает динамическое добавление и удаление строк, которое уже реализовано. Однако у меня возникают трудности с добавлением даты в динамические строки. В первой статической строке работает datetimepicker, но в динамических строках он не работает, как если бы он не читал его.

Ниже мой код

 <tbody class = "body">
                <tr>
                    <td><input type = "hidden" class = "form-control" name = "count[]" value = "1"><span>1</span></td>
                    <td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[]"></td>
                    <td><input type = "text" class = "form-control stock" id = "stock" name = "stock[]"></td>
                    <td><input type = "text" class = "form-control price" id = "price" name = "price[]"></td>
                    <td><input type = "hidden" value = "{{ $c->id }}" name = "vehicle_id[]"></td>
                </tr>
      </tbody>

и вот мой jquery

<script type = "text/javascript">

$('.stockDate').datepicker({
    dateFormat: 'yyyy-mm-dd'
});

$('#add-row').click(function() {
        var no = ($('.body tr').length-0)+1;
        var tr = '<tr><td><input type = "hidden" class = "form-control" name = "count[]" value = "'+no+'"><span>'+no+'</span></td>'+
             '<td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[]"></td>' +
                  '<td><input type = "text" class = "form-control stock" name = "stock[]"/></td>' +
                  '<td><input type = "text" class = "form-control price" name = "price[]"/></td>' +
                  '<td><input type = "hidden" value = "{{ $c->id }}" name = "vehicle_id[]"></td></tr>';
        $('.body').append(tr);
    });


</script>

Есть идеи, как решить эту проблему.

Спасибо

php jquery html dynamic bootstrap-datepicker

05.10.2018 18:51

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

1 045

Ответы 2

напишите индекс в атрибутах имени:

<tbody class = "body">
                <tr>
                    <td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[1]"></td>
                    <td><input type = "text" class = "form-control stock" id = "stock" name = "stock[1]"></td>
                    <td><input type = "text" class = "form-control price" id = "price" name = "price[1]"></td>
                </tr>
      </tbody>

очень простой...

js код:

$('#add-row').click(function() {
        var no = ($('.body tr').length-0)+1;
        var tr = '<tr><td><span>'+no+'</span></td>'+
             '<td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date['+no+']"></td>' +
                  '<td><input type = "text" class = "form-control stock" name = "stock['+no+']"/></td>' +
                  '<td><input type = "text" class = "form-control price" name = "price['+no+']"/></td>' +
                  '</tr>';
        $('.body').append(tr);
    });

05.10.2018 18:58

Это происходит потому, что когда вы вызываете datepicker(), вы делаете это с уже существующими элементами в DOM. Когда вы вставляете новые строки, они не инициализируются. Вы должны явно прикрепить его перед вставкой элемента или делегировать задание родительскому элементу.

$('.stockDate').datepicker({
  format: 'yyyy-mm-dd'
});

$('#add-row').click(function() {
  var no = ($('tr').length - 0) + 1;
  var tr = '<tr><td><input type = "hidden" class = "form-control" name = "count[]" value = "' + no + '"><span>' + no + '</span></td>' +
    '<td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[]"></td>' +
    '<td><input type = "text" class = "form-control stock" name = "stock[]"/></td>' +
    '<td><input type = "text" class = "form-control price" name = "price[]"/></td>' +
    '<td><input type = "hidden" value = "145" name = "vehicle_id[]"></td></tr>';
    
    // Init the datepicker for the new element
  $('#container').append(tr).find('.stockDate').datepicker({
    format: 'yyyy-mm-dd'
  });
});

<script type = "text/javascript" src = "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<button id = "add-row">Add</button>

<table id = "container">
  <tr>
    <td><input type = "hidden" class = "form-control" name = "count[]" value = "1"><span>1</span></td>
    <td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[]"></td>
    <td><input type = "text" class = "form-control stock" name = "stock[]" /></td>
    <td><input type = "text" class = "form-control price" name = "price[]" /></td>
    <td><input type = "hidden" value = "1234" name = "vehicle_id[]"></td>
  </tr>
</table>

Делегатская версия. Может быть менее производительным, поскольку он выполняется каждый раз, когда элемент получает фокус, будет зависеть от реализации:

$('#container').on('focus', '.stockDate', function() {
  $(this).datepicker({ format: 'yyyy-mm-dd' });
});

$('#add-row').click(function() {
  var no = ($('tr').length - 0) + 1;
  var tr = '<tr><td><input type = "hidden" class = "form-control" name = "count[]" value = "' + no + '"><span>' + no + '</span></td>' +
    '<td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[]"></td>' +
    '<td><input type = "text" class = "form-control stock" name = "stock[]"/></td>' +
    '<td><input type = "text" class = "form-control price" name = "price[]"/></td>' +
    '<td><input type = "hidden" value = "145" name = "vehicle_id[]"></td></tr>';

    $('#container').append(tr);
});

<script type = "text/javascript" src = "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<button id = "add-row">Add</button>

<table id = "container">
  <tr>
    <td><input type = "hidden" class = "form-control" name = "count[]" value = "1"><span>1</span></td>
    <td><input type = "text" class = "form-control stockDate" id = "stockDate" name = "date[]"></td>
    <td><input type = "text" class = "form-control stock" name = "stock[]" /></td>
    <td><input type = "text" class = "form-control price" name = "price[]" /></td>
    <td><input type = "hidden" value = "1234" name = "vehicle_id[]"></td>
  </tr>
</table>

когда я пробую вышеуказанную функцию, я получаю сообщение об ошибке, что datepicker () не является функцией. Как мне пройти это?

— 06.10.2018 13:15

У меня все еще возникают проблемы с "datepicker", не являющимся функцией. есть ли другой способ избежать перехода к функции для динамической второй строки.

— 09.10.2018 14:58

— 09.10.2018 15:15

на той же странице, где находится таблица, а также скрипт на той же странице

— 09.10.2018 15:16

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

— 09.10.2018 18:22

@edmond, как вы можете видеть, здесь работает нормально ... единственное, что я могу сказать, это попытаться загрузить datepicker в локальный каталог и загрузить его оттуда ... на всякий случай

— 09.10.2018 18:38

05.10.2018 19:03