更新模态窗口内容而不关闭和重新打开

Question

这是我在这里发表的第一篇文章，如果我不遵循协议原谅我。

我有一个模态窗口打开并在打开时显示有关记录的详细信息。我使用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>