MVC core partial Ajax call

aegsomweb 0
Viewed 37

The code returns readable html from a partial view but will not render to a Bootstrap modal using JQuery. The error is below, commented out are various attempt. I'm pretty sure it is something to do with the DOM but the interweb is not being very forthcoming

$('#frm').on('submit', function(e) {
        e.preventDefault();
        alert("clicked");


        var url = '@Url.Action("makePayment", "accounts")';

        var model = $(this).serialize();

        //console.log(model);

        //$.post(url, model, function(res) {
        //    console.log(res);

        //    $('.payModal').modal('show');
        //    $(".payModal").html(res);
        //});
        var outcome = "";
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: model,
            //dataType: 'html',
            //contentType: html,
            //processData: true,
            //contentType: false,
            processData: false,
            //cache: false,
            success: function(data) {

                outcome = data;
                //console.log(data);
                //$(document).ready(function() {
                    $(document).find("#payModal").html(data);
                    $(document).find("#payModal").modal("show");
                //});
            }

        });

        //$("#payModal").html("<p>Hello World</p>").delay(5000);
        //$("#payModal").modal("show");


    });

Error -

enter image description here

ajax asp.net-core-mvc jquery
1 Answers

This issue was caused by Bootstrap 5 and JQuery not playing nicely any more. It has taken me far too long to come to this conclusion as the error message was far from explicate. The solution -

`$(document).on('submit', '#frm', function(e) {

        e.preventDefault();
        var $link = $(this);

        //alert("clicked");


        var url = '@Url.Action("makePayment", "accounts")';

        var model = $(this).serialize();

        var outcome = "";
        $.ajax({
            url: url,
            type: 'POST',
            //dataType: 'html',
            data: model,


            success: function(result) {


                console.log(result);

                $(".modal-body").html(result);

                var myModal = new bootstrap.Modal(document.getElementById('payModal'),{keyboard: false});
                myModal.show();



            }

        });

        

    });`


<div class="modal" tabindex="-1" id="payModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Please Confirm</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">

                <button type="button" data-bs-dismiss="modal" class="btn btn-secondary">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Last version of BS I worked with was 4 hence my assumption that "it couldn't be JQuery"

aegsomweb0
Related