Обновление модального содержимого с помощью Jquery Ajax

Question

У меня проблемы с загрузкой формы в модал в BS4 для перепоста (публикация на себя под влиянием), проверки ввода формы и повторной загрузки модального div с ошибкой или перенаправления на извлечение page.

Первоначальная Ajax загрузка формы из select. php загружается хорошо, но после нажатия кнопки отправки в форме внутри select. php в модальном режиме я просто не получаю ответа вообще от кнопки, как будто кнопка мёртвая, ничего не показывается в консоли et c.

Есть идеи вообще? Я новичок в использовании JQ и Ajax et c, но, похоже, довольно близко к тому, что другие люди делают в своем коде.

    <script>
    $(document).ready(function() {
        $('.view_data').click(function() {
            var eventID = $(this).attr("id");
            $.ajax({
                url: "select.php",
                method: "post",
                data: {
                    eventID: eventID,
                    selectToken: 'true'
                },
                success: function(data) {
                    $('#modal-body').html(data);
                    $('#ticketsModal').modal("show");
                }
            });
        });



        // process the form in select.php shown in the modal
        $('#ticketForm').submit(function(event) {

            // get the form data
            // there are many ways to get this data using jQuery (you can use the class or id also)
            var formData = {
                'maleplaces': $('input[name=maleplaces]').val(),
                'femaleplaces': $('input[name=femaleplaces]').val(),
                'friendplaces': $('input[name=friendplaces]').val(),
                'eventID': $('input[name=eventID]').val(),
                'ticketSubmit': $('input[name=ticketSubmit]').val()
            };


            $.ajax({
                    type: 'POST', 
                    url: 'select.php', 
                    data: formData, 
                    dataType: 'json', 
                    encode: true
                })
                // using the done promise callback

                .done(function(data) {
                    $('#modal-body').html(data);
                    console.log(data);

                    // here we will handle errors and validation messages
                });

            // stop the form from submitting the normal way and refreshing the page
            event.preventDefault();
        });


    });
</script>

Модальный код на главной. php страница находится здесь в соответствии с запросом:

    <!-- Modal -->
<div class="modal fade" id="ticketsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Select </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal End-->

Вот форма в избранных. php:

            <form id="ticketForm" name="ticketForm" method="post" action="select.php">

                <div class="form-group">
                    <select name="maleplaces" id="maleplaces" class="custom-select">
                        <option value="0" selected>Male Tickets (0)</option>
                        <option value="1">Male Tickets (x1)</option>
                        <option value="2">Male Tickets (x2)</option>
                        <option value="3">Male Tickets (x3)</option>
                        <option value="4">Male Tickets (x4)</option>
                        <option value="5">Male Tickets (x5)</option>
                    </select>
                </div>

                <div class="form-group">
                    <select name="femaleplaces" id="femaleplaces" class="custom-select">
                        <option value="0" selected>Female Tickets (0)</option>
                        <option value="1">Female Tickets (x1)</option>
                        <option value="2">Female Tickets (x2)</option>
                        <option value="3">Female Tickets (x3)</option>
                        <option value="4">Female Tickets (x4)</option>
                        <option value="5">Female Tickets (x5)</option>
                    </select>
                </div>


            <div class="form-group">
                <select name="friendplaces" id="friendplaces" class="custom-select">
                    <option value="0" selected>Double Tickets (0)</option>
                    <option value="1">Saver Tickets (x1)</option>
                    <option value="2">Saver Tickets (x2)</option>
                    <option value="3">Saver Tickets (x3)</option>
                    <option value="4">Saver Tickets (x4)</option>
                    <option value="5">Saver Tickets (x5)</option>
                </select>

                <input name="eventID" type="hidden" id="eventID" value="<?php echo $event['event_id']; ?>" />
                <input name="ticketSubmit" type="hidden" id="ticketSubmit" value="<?php echo $event['event_id']; ?>" />

            </div>
    </div>

    <div class="col-auto my-1">
        <button type="submit" id="ticket_btn" class="btn btn-primary" onclick="return doubleticketFunction()">Continue to payment</button>
    </div>

    </form>

Answer 1

Поскольку вы динамически меняете элемент #ticketForm, вы теряете привязку с прослушивателем событий submit, когда заменяете свою форму. Вам нужно будет либо перепривязать событие, либо использовать делегирование события для прослушивания событий. В этом примере я выбрал первый для разработки.

Сначала возьмите свою функцию, которую вы используете в $('#ticketForm').sumbit и назовите ее. Вы будете использовать эту функцию для привязки первой формы и всех форм, которые ее заменяют.

function ticketFormSubmit(event) {

  // Use jQuery serialize to get the form values.
  var formData = $(this).serialize();

  $.ajax({
    type: 'POST', 
    url: 'select.php', 
    data: formData, 
    dataType: 'json', 
    encode: true
  })
  .done(function(data) {
    $('#modal-body').html(data);
    console.log(data);
  });

  event.preventDefault();
}

В обратном вызове succes вашего вызова $.ajax выберите вновь добавленную форму и добавьте прослушиватель событий в это как в примере ниже.

$('.view_data').click(function()     
  var eventID = $(this).attr("id");
  $.ajax({
    url: "select.php",
    method: "post",
    data: {
      eventID: eventID,
      selectToken: 'true'
    },
    success: function(data) {
      $('#modal-body').html(data);
      $('#ticketsModal').modal("show");

      // Bind new submit event listener
      $('#ticketForm').on('submit', ticketFormSubmit);
    }
  });
});