Click here to Skip to main content
15,886,110 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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?
Posted
Comments
Richard Deeming 1-Sep-20 5:35am    
None of the Javascript code you've posted has anything to do with the modal dialog.

If you want to change the content of the dialog, you just need to replace the HTML in either the dialog-edit or EditStatus elements.
Member 14803832 1-Sep-20 6:22am    
This is the point, I have no idea how can I refresh, reload of update $('#modal-body') after upload the file, or, with other words, after tab.on("click", ".btnUpload", function (e) {...
Member 14803832 1-Sep-20 6:24am    
After success of my ajax I can see the message, that my file is uploaded, but there is an old name of the file and I wand to refresh modal-body to see an actual name of the file
F-ES Sitecore 1-Sep-20 6:32am    
You do it the same way you update "uploadStatus", use .html or .text to update the contents of the appropriate element in your modal.
Member 14803832 1-Sep-20 12:46pm    
It works, thanks, but how can I take my file name? is it possible to take it from FormData()?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900