Vitaliy Vitaliy - 3 months ago 15
Ajax Question

Render modal partial view via ajax in specified div block

Is there any possible way to render partial modal view in specified div block? In my variant, modal just does not appeared on view and I don't any ideas how to solve it. Here my variant:

<div id="renderModal"></div>


Javascript

function onClickEvent(data){
console.log(data);
var url = "@Url.Action("Load", "Home")" + '/' + data;

var renderModal = $('#renderModal');
$.ajax({
url: renderModal.data(url),
type: 'GET',
cache: false,
success: function (result) {
$('#renderModal').html(result);
}
});
}


Method where I retrieve partial view

public virtual async Task<ActionResult> Load(int id)
{
. . . .

return PartialView("Partial/_Load", model);
}


And Partial view

<div id="loadModal" class="modal fade" role="dialog" style="text-align: center;">
<div class="modal-dialog modal-lg" style="text-align: center;">
<div class="modal-content" style="text-align: center">
<h1>test</h1>
</div>
</div>
</div>

Answer

You are not passing the correct URL, You are not storing any arbitrary data with element, so renderModal.data(url) will not return a valid URL.

    $.ajax({
        url: url, //renderModal.data(url),          
    });

You can also use .load() directly like

function onClickEvent(data){
    $('#renderModal').load("@Url.Action("Load", "Home")" + '/' + data);
}
Comments