Bootstrap modal does not work correctly with my ajax code

Question

I created a partial view called ModalReq, which needs to be populated with data from the database.

The controller and view is working correctly.

But when you click on an element with the class '.car-box', nothing happens at first, after the second press, the correctly filled modal appears, but it doesn’t want to close in any way, how to make the modal work correctly?

Ajax code in main view:

<script>
    function ajaxReq(url,type,selector) {
    $.ajax({
        url: url,
        type: type,
        contentType: 'application/json',

        success: function (data) {
            $(selector).html(data);
        }
    });
    }
</script>

<script>
$(document).on('click', '.car-box', function () {
    var objText = $(this).children('.box-his').children("span").text();
    var objId = objText.substring(1, objText.length);

    ajaxReq("@Url.Action("ModalReq")" + "?productId=" + objId, "POST", '#result');
    $('#myModal').modal('show')
});
</script>

And I create a div with it at the very bottom of this view( but still above the Ajax code )

<div id="result"></div>

When you click on an element with the class '.car-box', the Ajax code creates an object that receives its number with a string type inside the card. It then leaves only a number with the same type of string. Then I call ajaxReq in which I transmit my partial view that accepts the Id specified by us. Then includes the created modal ...

I never use ajax before, so I need your help =)

score 1 · Accepted Answer · answered Apr 13 '19 at 20:23

In the current iteration $('#myModal').modal('show') is not waiting for the Ajax response.

How about moving it to your success function?

success: function (data) {
        $(selector).html(data);
        $('#myModal').modal('show')
    }

Then the modal will get the data after one press.

Or: this answer jQuery ajax with ES6 Promises should give you guidance setting it up as a Promise.

Bootstrap modal does not work correctly with my ajax code

1 Answers1