Javascript 在不关闭和重新打开的情况下更新模式窗口内容

这是我在这里的第一篇帖子，如果我没有遵守协议，请原谅我

我有一个模式窗口，在打开时打开并显示有关记录的详细信息。我使用AJAX和Javascript在模式窗口中检索和设置这些值。在该模式窗口中，我还有一些表单，允许用户更新有关该记录的详细信息，如状态。一切正常，但我想知道如何更新模式窗口中的元素，而不必关闭并重新打开它

示例：我打开模式窗口以查看记录的详细信息。我看到当前状态为“打开”。然后，我使用表单将状态更改为“待定”。我希望status元素更新为“Pending”，而不必关闭模式窗口

有没有一个简单的方法可以做到这一点？或者关闭和打开模式窗口是唯一的方法

<!-- MODAL DETAILS ABOUT RECORD -->
<div class="modal fade" id="detailsModal">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" data-dismiss="modal" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">DETAILS</h4>
        </div>
        <div class="modal-body">

            <!-- FORMS TO ADD COMMENT, CHANGE STATUS, CHANGE CRITICAL RATING. THIS IS WHERE I WANT TO UPDATE THE MODAL WITHOUT CLOSING, SAY I ADD A COMMENT I WOULD LIKE IT TO ADD A ROW TO MY DYNAMIC TABLE BELOW, OR CHANGE THE STATUS I WANT THE STATUS TO UPDATE DOWN BELOW IN THE OBSERVATION DETAILS AREA -->
            <div class="row">
                <div class="col-xs-4">
                    <form class="form-inline" action=javascript:createNewComment() method="post">
                        <div class="form-group">
                            <label class="sr-only" for="newcomment">Comment</label>
                            <input type="hidden" name="existingguid" class="form-control" id="existingguid" />
                            <input type="text" class="form-control" id="newcomment" name="newcomment" placeholder="New Comment">
                        </div>
                        <button type="submit" class="btn btn-primary">Add Comment</button>
                    </form>
                </div>
                <div class="col-xs-4">
                    <form class="form-inline" action=javascript:updateRating() method="post">
                        <div class="form-group">
                            <select name="updateRating" class="form-control" id="updateRating">
                                <option value=" ">Choose Rating</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Update Rating</button>
                    </form>
                </div>
                <div class="col-xs-4">
                    <form class="form-inline" action=javascript:updateStatus() method="post">
                        <div class="form-group">
                            <select name="updateStatus" class="form-control" id="updateStatus">
                                <option value=" ">Update Status</option>
                                <option>Pending</option>
                                <option>Deferred</option>
                                <option>Closed</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Update Status</button>
                    </form>
                </div>
            </div>

            <!-- OBSERVATION DETAILS POPULATED DYNAMICALLY -->
            <div class="container-fluid">
                <h4 class="text-center">OBSERVATION</h4>
                <form class="form-inline">
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label class="control-label">Rating:</label>
                            <p class="form-control-static" name="rating" id="rating"></p>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="control-label">Status:</label>
                            <p class="form-control-static" name="status" id="status"></p>
                        </div>
                    </div>
                </form>
            </div>

            <!-- COMMENTS TABLE BUILT DYNAMICALLY -->
            <div class="container-fluid">
                <h4 class="text-center">COMMENTS</h4>
                <div class="table-responsive">
                    <table class="table table-condensed table-hover table-bordered" id="COMMENTS"></table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

&时代；
细节
评论
添加注释
选择评级
1.
2.
3.
更新评级
更新状态
悬而未决的
推迟
关闭
更新状态
观察
评级：

地位：

评论
接近

您可以添加一些您现有的代码示例吗？您正在使用一个表单post，这意味着当您从服务器返回时，它将转到一个新页面。如果你不想这样，那么你应该改用ajax。我将不得不研究如何做到这一点，但我相信我可以找到大量的例子。一旦我通过ajax发布表单，我该如何更新模态元素？