Question

So the question is in the title. How can I replace one div content with another content for some little time using jQuery? I just have one block with user information that invisible (has display: none; in styles and while info is retrieveing from server I want to display message like Loading user info....

---

EDIT

Here is how I retrieve information from server:

$.post("/getUserAdditionalInfo",
                { "id": pId },
                function (data) {
                    window.user = $.extend(
                    {
                        "pid": pId,
                        "secondname": data.sname,
                        "firstname": data.fname,
                        "middlename": data.mname
                    }, existingParams);
                    updateUserInformationLabels();
                },
                "json"
        );

---

EDIT2

Here is the code I have for user info:

<div id="UserAdditionalInfo">
<ul class="info">
    <li><b>First name:</b><span id="ExInfoWorkFirstName"></span></li>
    <li><b>Second name:</b><span id="ExInfoWorkSecondName"></span></li>
    <li><b>Middle name:</b><span id="ExInfoWorkMiddleName"></span></li>
</ul>
</div>

And I just want to temporarely replace div with id = UserAdditionalInfo with ‘loading user info’ string. And then data is completely retrieved I need to restore initial content (along replacing place holders with data).

Answer 1

store the original html in a variable like this-

var originalHTMl = $('#UserAdditionalInfo').html();

then replace the content of this div with loading info like this..

$('#UserAdditionalInfo').html('Loading user info...').show();

$.post("/getUserAdditionalInfo",
                { "id": pId },
                function (data) {
                    window.user = $.extend(
                    {
                        "pid": pId,
                        "secondname": data.sname,
                        "firstname": data.fname,
                        "middlename": data.mname
                    }, existingParams);
                    updateUserInformationLabels(originalHTMl);//pass the original html to this function
                    var updatedHTML = $('#UserAdditionalInfo').html();// get the updated HTMl
                    $('#UserAdditionalInfo').html(updatedHTML).show();//Show the div..now this div has all updated htnl
                },
                "json"
        );


function updateUserInformationLabels(originalHTMl){
                if (typeof window.patient != 'undefined') {
                var ExInfoWork = $(originalHTMl).find('#ExInfoWork');
                 ExInfoWork.html(window.patient.work);
                }
         // more replacement logic as you said
} 
// don't return anything
}