How to temporary replace div content with another
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
},
});
精彩评论