I'm doing a service where I'm changing some data in DB via bootstrap modal dialog. After uploading file I'm showing name of this in my modal dialog body. But I can not see the name of the file what I've just uploadet, I have to close dialog and the open it again, without it I'm not able to see the actual name of uploaded file.
The question is: How to refresh "modal-body" of modal dialog without closing it?
What I have tried:
Here is my Modal:
<div class="modal fade" id="editModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="width: 535px">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Edit Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="dialog-edit"></div>
<div id="EditStatus"></div>
</div>
</div>
</div>
And Javascript:
tab.on("click", ".btnUpload", function (e) {
var formData = new FormData();
var id = $(this).closest("tr").find('#fileId').text();
var file = document.getElementById("FileUpload").files[0];
formData.append("id", id);
formData.append("file", file);
$.ajax({
type: "POST",
url: "/Events/UpdateJsionFile",
contentType: false,
processData: false,
dataType: "JSON",
data: formData,
success: function (data) {
if (!data.success) {
var res = $('<div style="color:red;">' + data.error + '</div>')
$('#uploadStatus').html(res);
}
else {
$('#uploadStatus').html("File #1 uploaded!");
}
}
});
});
everything is working perfect but I have no idea how to refresh data after uploading.... Can somebody help me with it?