CODEWITHSUNDEEP
jqueryhtml
javanoob
javanoob

Reputation: 6412

jQuery display fadeout element again

When the Ajax call on the page finishes, I am calling the below line of code to hide the processing message.

j$('[id$="deleteActionStatusId"]').fadeOut();

But when the user initiates the same Ajax call again, I am trying to display the processing message as below but it does not display.

document.getElementById('deleteActionStatusId').innerHTML = "Processing...";

The developer console shows that deleteActionStatusId has its style property set to display : none because of the jQuery fadeOut call. How do I reverse this process, so that it works for the next Ajax call also?

Upvotes: 0

Views: 193

Answers (3)

MortenMoulder
MortenMoulder

Reputation: 6646

Check this example: http://jsfiddle.net/kek06xu3/ (refresh the page to try the other one)

$('[id$="deleteActionStatusId"]').fadeIn();

or use:

$('[id$="deleteActionStatusId"]').show();

If you wish to fade it in again, use fadeIn(). If you just want it to show (like it pops out), you should use show(). Also, mixing up Javascript and jQuery will look weird and you should avoid it. You should change your whole code to:

//Fade the element out
$('[id$="deleteActionStatusId"]').fadeOut();

//Select the element with id = deleteActionStatusId and change it to processing
$('#deleteActionStatusId').html("Processing");

//Make it show the element again
$('[id$="deleteActionStatusId"]').fadeIn();

Instead of doing document.getElementById('deleteActionStatusId') you can just do $('#deleteActionStatusId') and it will be selected.

Upvotes: 1

user5139444
user5139444

Reputation:

Following line will not remove display:none set by .fadeOut() event.

document.getElementById('deleteActionStatusId').innerHTML = "Processing...";

You can use one of the following technique to display your content again.

j$('[id$="deleteActionStatusId"]').css({display: "block"});
j$('[id$="deleteActionStatusId"]').fadeIn();
j$('[id$="deleteActionStatusId"]').show();

Upvotes: 0

lssilveira
lssilveira

Reputation: 62

What you need is call the fadeIn() method, like this:

j$('[id$="deleteActionStatusId"]').fadeIn();

jQuery fadeIn method documentation

Upvotes: 0

Related Questions