I want to put response from jquery $.ajax() method to a target <div> inside bootstrap popup Modal

Question

I'm calling an ActionMehod using jquery .ajax() function and want to put the response into a target DIV tag defined inside the Bootstrap PopupModal.

$.ajax({
    type: "GET",
    data: { "id": idVal },
    contentType : "application/json",
    url: '@Url.Action("GetAssetCalcert", "SiteReport")',
    target: "#popupModel",
    success: ShowPopup()
});

function ShowPopup() {
    $('#myModal').modal('show')
    $("#loadCalcert").attr('data-toggle', 'modal');
}

Here "#myModal" is the Id of BootstrapModal and "#popupModel" is the DivID inside modal-body tag.

This actually makes the call to actionMethod successfully and I'm getting the HTML response as confirmed doing console.log(data) on success. But Opens an empty popupModal and not rendering what is received.

What am I missing here?

Answer 1

You have to pass the return value from the success to the function if you want to put it into the modal:

$.ajax({
    type: "GET",
    data: { "id": idVal },
    contentType : "application/json",
    url: '@Url.Action("GetAssetCalcert", "SiteReport")',
    target: "#popupModel",
    success: function(result) { 
      ShowPopup(result);
    }
});

function ShowPopup(result) {
    $('#myModal').html($(result).text());
    $('#myModal').modal('show')
    $("#loadCalcert").attr('data-toggle', 'modal');
}