4 of 4
added 230 characters in body; edited title

Is it possible to update modal content via javascript? [resolved]

[Resolved - I had two modals defined with different Ids but when I disabled one, it worked as expected. Changed it so all content goes through one modal. At some point I may revisit to figure out where the conflict was.]

I have a mvc core page on which I have a modal that uses a partial view. In the modal, I'd like to present a summary list and let the user click an item in the list to view additional details on the modal. However, while the element is reporting it has been changed (via an alert check) it is not visibly updated. I then created a simple test to change the background color of a div to see if the approach itself is valid.

In this case the alerts identify that the color was changed, but again, it does not visually change. So the question is, how can I dynamically update text or CSS within a modal dialog using a js/jquery function? Is it even possible? I'm not interested in reloading the modal.

My test modal content (_TestContentModal):

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeMe"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <div id="test">
            background color test
        </div>
        <div>
            <button onclick="UpdateDetails('yellow');">Change background to yellow</button>
        </div>
    </div>
    <div class="modal-footer">
        <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Close</button>
    </div>
</div>
<script>
    function UpdateDetails(newColor) {
        alert('Before change:  ' + $('#test').css("background-color"));  // Before change:  rgba(0, 0, 0)
        $('#test').css("background-color", newColor);                    
        alert('After change:  ' + $('#test').css("background-color"));   // After change:  rgba(255, 255, 0)

        // clicking a second time confirms that the color was updated:
        // Before change:  rgba(255, 255, 0)
        // After change:  rgba(255, 255, 0)
    }
</script>

Clicking the button properly triggers the function and the alerts show/confirm that the background color is being changed, however it is not visibly changed. A second button click confirms the new color was set.

I'm relatively new to modals and it is quite possible that I'm going about this entirely the wrong way. Thanks in advance for any advice or solution.

Edit:

Including some additional code in response to initial answer. Since the above code seems to function as intended elsewhere the problem must lie in the handling of the modal.

On parent page is the reference to the modal:

<partial name="_TestModal" />

This is the content of _TestModal.cs:

<!--Modal-->
<div aria-hidden="true" aria-labelledby="modal-test-label" role="dialog" tabindex="-1" id="modal-test" class="modal fade">
    <div class="modal-dialog modal-lg">
    </div>
</div> 

A button on the parent page activates the modal:

<div>
    <a class="btn btn-secondary popup"
       style="color: black;"
       data-url='@Url.Action("GetTest","Runways")'
       data-toggle="modal"
       data-target="#modal-test">
        Update<i class="fa fa-plus"></i>
    </a>
</div>

The GetTest action of the controller returns the partial that contains the modal content shown at the top:

return PartialView("_TestContentModal");

And finally, the parent page has this script to handle the modal:

(function ($) {
    function Index() {
        var $this = this;
        function initialize() {

            $(".popup").on('click', function (e) {
                modelPopup(this);
            });

            function modelPopup(reff) {
                var url = $(reff).data('url');

                $.get(url).done(function (data) {
                    $('#modal-test').find(".modal-dialog").html(data);
                    $('#modal-test > .modal', data).modal("show");
                });
            }
        }

        $this.init = function () {
            initialize();
        };
    }

    $(function () {
        var self = new Index();
        self.init();
    });
}(jQuery));

To be clear: the color is not visibly changing. There are no errors reported in the browser console so the alerts were added to see how the element was responding. Minus the alerts, Brando Zhang's answer demonstrates the expected behavior, but in my case it does not turn yellow, with or without the timer delay. And again, the alerts were only added as a debug aid.