CODEWITHSUNDEEP
javascripthtmljqueryajax
ashes999
ashes999

Reputation: 1324

jQuery modal not showing after submitting form

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.

Upvotes: 0

Views: 210

Answers (1)

Chris Medina
Chris Medina

Reputation: 338

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

Upvotes: 1

Related Questions