Question 88276 in ASP.NET Question posted in
The official documentation can be found here.

Displaying a div when button is clicked Javascript – Asp.net

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

Tags:

7

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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>
    Login or Signup to reply.
  3. 0

    Please refer the below link and try with your own.

    Click here

    and let me know if you want any assist.

    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
  5. 0

    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!

    Login or Signup to reply.
  6. 0

    This will open and close as per need

    $("#saveBtn").click(function(){
        $("#fadeDiv").toggle(200);
      });
    Login or Signup to reply.
  7. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search