jQuery modal not showing after submitting form

ashes999

I am trying to show a message after a user clicks on a button to submit a form but my modal is not getting displayed. don't know why this is happening.

My html code:

<form method="POST" class="course-save-form">
      {% csrf_token %}
      <button class="small btn no-border dropdown-item save-course" type="button" data-url="{% url 'home:course-save' course.id %}"><i class="mr-1 m fas fa-bookmark"></i>Save</button>
</form>

my modal:

 <div class="modal fade" id="modal-save-course">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
              <div class="moda-body">
                <div class="modal-header text-center">
                    <h5 class="modal-title col-12 text-center">Save Course
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </h5>
                </div>
                  <h6 class="text-message"></h6>
              </div>
              <div class="modal-footer col-12">
                <button type="button" class="btn btn-seconday"  style="border-radius: 20px; width: 100%;">Close</button>
            </div>
          </div>
        </div>
    </div>

and my jQuery:

$(document).ready(function (e) {
    $('.course-save-form').on("click", ".save-course", function (e) {
        var btn = $(this)
        e.preventDefault();
        e.stopImmediatePropagation();
        $.ajax({
            type: "POST",
            url: $(this).attr("data-url"),
            dataType: 'json',
            data: $(this).closest("form").serialize(),
            success: function (data){
                $('#modal-save-course').show();
                $('#modal-save-course.modal-content.modal-body.text-message').html(data.message);
            },
            error: function(rs, e){
                console.log(rs.responeText);
            },
        });
    });
})

My button works but my modal is not getting displayed with the message.

Chris Medina

Use $('#modal-save-course').modal('show');

Also, text wasn't displaying with .html , so use .text :

            $('#modal-save-course .text-message').text(data.message);
            $('#modal-save-course').modal('show');

See screenshot: enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

form in modal not submitting with jquery

How to reset a bootstrap modal after submitting the form in jquery?

I want to open modal after submitting form?

Show bootstrap popover after submitting form that is in modal

Jquery form not submitting after validation

Modal box on submitting a form

How to prevent the modal from closing after submitting form

Close a bootstrap modal 5 after asynchronously submitting a form with vue js

How to open a bootstrap modal box after submitting a form by barcode scanner

After submitting a POST form open a new window showing the result

CollectionType field showing empty after manually submitting Symfony Form

PHP variables not showing up after submitting form (closed)

After submitting form its showing success message on different page

Modal Form is showing not as Modal

jquery validation modal is not showing after validation passed

Submitting a form after validating with jquery validator on a button not in form tag

Bootstrap modal submitting my form

Modal form not submitting user input

Submitting form from a modal in Ember

Form clears after submitting

Submit form after confirming jquery modal popup

Append table with jQuery after submitting form does not display

Laravel file validation after submitting form via jquery submit();

Refresh parent window after submitting a form in a IFrame in jQuery

jQuery Validation and submitting a form

Submitting a form on 'Enter' with jQuery?

Form is not submitting php and jquery

Submitting the form using jquery

Dynamic form not submitting (jQuery)