'Displaying a div when button is clicked Javascript

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

javascripthtmljqueryasp.net


Solution 1:[1]

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);
}

Solution 2:[2]

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>

Solution 3:[3]

Please refer the below link and try with your own.

Click here

and let me know if you want any assist.

Solution 4:[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!

Solution 5:[5]

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.

Solution 6:[6]

This will open and close as per need

$("#saveBtn").click(function(){
        $("#fadeDiv").toggle(200);
      });

Solution 7:[7]

This will open and close as per need

$("#saveBtn").click(function(){
        $("#fadeDiv").toggle(200);
      });

This will open and close as per need

$("#saveBtn").click(function(){
        $("#fadeDiv").toggle(200);
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="fadeDiv" style="display:none">
<p>Content saved !</p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ElliotCK
Solution 2 Aaron Junker
Solution 3 Elango Sengottaiyan
Solution 4
Solution 5
Solution 6 Ranjith Raina
Solution 7 Ranjith Raina

Related Questions