开发者

How to temporary replace div content with another

开发者 https://www.devze.com 2023-03-22 01:47 出处:网络
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

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 c开发者_运维知识库ode 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).


You could do...

$('div:first').html('Loading user info...').load('something.php');


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
}


If You are using jQuery.ajax(), then this is the way :

$.ajax({
   beforeSend: function() {
       // Replace with "loading..."
   },
   complete: function() {
       // Replace with result
   },
});
0

精彩评论

暂无评论...
验证码 换一张
取 消