Displaying a div when button is clicked Javascript

Question

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

Answer 1

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>

Answer 2

Please refer the below link and try with your own.

Click here

and let me know if you want any assist.

Answer 3

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.

Answer 4

To re-create what you'd like to do, I created an HTML with a hidden div that has the message to be displayed within a red bordered div on successful save. Note that the button is outside the div.

Secondly, I created a simple JavaScript function that triggers the display of the div and hides the save button.

 function ShowHideDiv() { //show div when button is clicked document.getElementById("myDiv").style.display = "block"; //hide save button after click document.getElementById("saveButton").style.display = "none"; }

 <div id="myDiv" style="display: none; border-style: solid; border-width:thick; border-color:red;"> <p> Hey..!! <br><br>Your Content saved!! :)</p> </div> <button onclick="ShowHideDiv()" id = "saveButton">Save Button</button>

I hope it's what you're trying to achieve.

Cheers!

Answer 5

Thank you all for your fast answers ! I manage to do it !

So I put my button in an asp UpdatePanel to avoid the fact that when it was clicked, the page was reloaded. After that I add a RegisterStartupScript in the C# function called when the button was clicked. Finally, the RegisterStartupScript is simply calling the Javascript function that manage the display of my message.

Here is the code :

HTML

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="saveBtn" runat="server" Text="Save" OnClick="saveBtn_Click"/>
    </ContentTemplate>
</asp:UpdatePanel>
<div id="fadeDiv" style="display: none">
    <p id="saveMsg">Content saved</p>
</div>

C#

protected void saveBtn_Click(object sender, EventArgs e)
{
    // ...
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "call", "displaySaveMsg();", true);
}

Javascript

function displaySaveMsg() {
    $('#fadeDiv').fadeIn(1000);
    setTimeout(function () { $('#fadeDiv').fadeOut(1000); }, 1000);
}