So I'm trying to load, after I click on a button, a partial view from controller, containing a bootstrap modal.
I'm not sure where the problem is, but when I click the button the first time, the DOM is added, but modal is not shown. The second time I click, the modal is shown for <1s and then I only get that gray modal-background.
My button
"<button class='btn btn-info edit-category' onclick='showModal()' data-category-id='" + full.id + "'>Edit</button>"
My showModal
-function:
function showModal(){
$("#div1").load("/Category/EditCategory");
$("#createCategory").modal();
}
My Partial-View-Action:
public ActionResult EditCategory()
{
return PartialView("Admin/_CategoryAdd", new CategoryDetailModel{Title = "Test"});
}
Part of my PartialView "_CategoryAdd":
@model CategoryDetailModel
<div class="modal" id="createCategory" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-action="Create" asp-controller="Category"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-failure="failed"
data-ajax-success="success">
funny thing is, when I do NOT click the button and enter both lines in browser-console, it works as expected. When I execute the method in console, it's the same as clicking the button.
I also thought, maybe it's a time thing, so I added setTimeout
with 5000ms but didn't work. Any ideas?
With help of @freedomn-m I found that I can add a function, when load is done:
$("#div1").load("/Category/EditCategory",
function(){$("#createCategory").modal('toggle');});
now it works
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.