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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Please refer the below link and try with your own.

Click here

and let me know if you want any assist.

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

Cheers!

CodePudding user response：

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

CodePudding user response：

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.