使用 Jquery Ajax 刷新模态内容

Question

I'm having issues with getting a form loaded into a modal in BS4 to repost (post to self in affect), check the form input, and re-load the modal div with the error, or re-direct to checkout page.

The initial Ajax loading of the form from select.php loads well, but upon pressing the submit button on the form within select.php in the modal, I just get no response at all from the button, as if the button it dead, nothing shown in console etc.

Any ideas at all? I'm new to using JQ and Ajax etc, but it seems quite close to what other people are doing in their code.

    <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>

The Modal code on the main.php page is here as requested:

    <!-- 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-->

Here is the form in select.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

Because you dynamically change your #ticketForm element you lose the bind with the submit event listener when you replace your form. You'll have to either rebind the event or use event delegation to listen for the events. In this example I've chosen the former to elaborate.

First take your function that you use in the $('#ticketForm').sumbit and name it. You'll be using this function to bind the first form and all the forms that replace it.

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();
}

In the succes callback of your $.ajax call select the newly added form and add the event listener to it like in the example below.

$('.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);
    }
  });
});