Modal window loaded from partial view keeps opening when closed - html

Question

EDIT FINAL:
Along with the accepted answer, I had to figure out how to close the modal which was not the same as just hiding a dialog in this case.
This bit of javascript helped me to get the modal closed, hide the backdrop, and close it to the point where it would let me reopen another different one on the page.
<script>
$(document).on("click", ".btnCloseDeviceActivityModal", function () {
var deviceActivityModal = $('.deviceActivityModal');
deviceActivityModal.hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
</script>
EDIT: Wanted to point out that when I debug it shows me that it is calling back into my partial view controller every time I close the modal. So it is loading it entirely including going back to the controller and querying the database. It is actually calling the javascript method every time I close the window.
Also wanted to add that I tried changing to an onclick="doModal()" way of clicking the button and named the method in javascript to doModal(). I still get the same behavior of the reopening when closing.
Some more observations is the button loses all text and is just a little square after it is clicked the first time. I can see this in the background of the modal. The other interesting thing is the background (outside) of the modal gets darker and darker each time I click the close button on the modal.
I have a modal window that is displaying a partial view. Every time I click the close button it is just opening right back up. I've tried setting it with 'hide' in javascript. I tried some completely boilerplate modal so I think it is how I am calling the modal that is the problem.
This is how the modal is being initiated off of this button click:
<button data-url="#Url.Action("DeviceActivity","Devices", new { #id = item.DeviceId })" class="btn btn-primary btnOpenDeviceActivityModal">Activity</button>
Here is the javascript that loads the modal window from the data retrieved in the controller. It displays the partial view in the modal successfully:
#* Display the device activity in a modal window. Data is loaded from the partial View *#
<script>
$('.btnOpenDeviceActivityModal').click(function () {
var url = $(this).data("url");
$(this).load(url, function () {
$("#deviceActivityModal").modal("show");
});
})
</script>
And just for fun even though it doesn't seem to matter, here is my modal partial view:
<div class="modal fade" id="deviceActivityModal" style="margin-left:100px; margin-top:80px">
<div class="modal-dialog-scrollable" style="top:180px; right:200px">
<div class="modal-content" style="width:1000px; max-height:800px;">
<div class="modal-header">
<button id="closeModal" type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<h2 style="text-align:center">Device Activity Records</h2>
<table class="table table-striped table-bordered">
<thead class="thead-light">
<tr>
<th>
Activity Date
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.DeviceActivityRecords)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ActivityDate)
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
What is it that is causing my modal window to reopen each time it is closed. It also seems that anywhere I click on the modal will close (and reopen) it. I dunno if it is related so that's why I bring it up. How can I get it to close and stay closed? Other answers here on SO have some obvious problems with modal code, but I am not seeing what is wrong with how I am calling the modal (which seems to be the common problem because I replaced the modal code entirely to test).

Answer 1

$(this).load is injecting your modal markup inside the button - that's probably not what you want. I'm assuming you meant to use $.get, which does work a bit differently.
$('.btnOpenDeviceActivityModal').on('click', function () {
var url = $(this).data("url");
$.get(url)
.done(function (response) {
$(response).modal("show");
});
});
This will use the markup returned from the AJAX call as the target of the .modal() function - probably want to add some sanity checks around that.
For reference:
$(selector).load() : https://api.jquery.com/load/
$.get(): https://api.jquery.com/jQuery.get/