My goal is to display a div with a successfull message when the Save button is clicked. Unfortunately, all I managed to do is display this message everytime the page is loaded..
Here is my code :
<div id="fadeDiv">
<p>Content saved !</p>
</div>
$(document).ready(function () {
$('#fadeDiv').fadeIn(1000);
setTimeout(function () { $('#fadeDiv').fadeOut(1000); }, 1000);
});
I tried to do
$('#saveBtn").click(...);
but when I click on the button, the page is reload even if I don't have a Response.Redirect() so my div is not displayed.
Thanks for your help
This solution hides the button at the beginning.
$("#saveBtn").click(function () {
$('#fadeDiv').fadeIn(1000);
setTimeout(function () { $('#fadeDiv').fadeOut(1000); }, 1000);
});<div id="fadeDiv" style="display:none">
<p>Content saved !</p>
</div>
<button id="saveBtn">
Save!
</button>Please refer the below link and try with your own.
and let me know if you want any assist.
There is the solution to your problem 1.Here is our html
<div id="fadeDiv">
<p>Content saved !</p>
</div>
<button id="saveBtn">Show</button>
2.Jquery Code
$(document).ready(function(){
$("#fadeDiv").hide();
$("#saveBtn").click(function(){
$("#fadeDiv").show();
});
});
Explanation of problem solution. 1.html structure is same as yours,solution is in there jquery code.
A. This line $("#fadeDiv").hide(); hides the div when we arrive first time on our page.
B. And this code will run when we click the save button
$("#saveBtn").click(function(){
});.
C.the last thing ,this line $("#fadeDiv").show(); will show the hidden div.