CODEWITHSUNDEEP
jqueryasp.net
user576510
user576510

Reputation: 5905

showing div hide automatically after some seconds?

I have a div which has display:none. On button press I want to show it using jquery. It is shown but just in a second or two it is automatically hidden.

I am not an expert and not able to get where I am doing wrong. Please help me.

  <asp:Button runat="server" ID="btnCVUpload" Text="Upload" OnClientClick="CVConfirm()" />  <div id="divConfirmCV" style="border: dashed 2px black; background: gray; display:none;">
                A profile can have only one CV, uploading this CV will remove an existing CV. Click
                "Yes" to proceed
                <asp:Button runat="server" ID="btnCVYes" Text="Yes" />
                <asp:Button runat="server" ID="btnCVNo" OnClientClick="HideCVConfirm" Text="NO" />
            </div>




 function CVConfirm() {
            $("#divConfirmCV").css("display","block").show(1000)
        }

Upvotes: 0

Views: 874

Answers (2)

ducnh
ducnh

Reputation: 260

i would like to write my jQuery like this

$(document).ready(function(){
    $("#<%=btnCVUpload.ClientID%>").click(function(event){
        event.preventDefault();
        $("#divConfirmCV").css("display","block").show(1000);
    });
});

preventDefault helps you prevent the default behavior of an element on a specific event, like click. Thus the post back wont happen until you let it :)

Upvotes: 1

aquinas
aquinas

Reputation: 23796

It's hidden again because the page is posting back to the server, and you've got a brand new page again with the initial state of the button being hidden. You either want to a) not show the div until the page posts back, in which case you could make the div an asp:panel or something similar and set it to Visible on your button click. Or b) you don't want to use an asp:Button, but a regular <input type=button> which would NOT post back to the server, if you just want to show the div without hitting the server again. I'd say by the look of your code you really want to go with option b. So, your code would simply be:

<input type=button ID="btnCVUpload" value="Upload" onclick="CVConfirm()" />

Of course, your're using jquery so you should really do:

<input type=button ID="btnCVUpload" value="Upload" />

<script>
  $(function(){
    $("#btnCVUpload").click(function(){
       $("#divConfirmCV").css("display","block").show(1000);
    });
  });
</script>

Upvotes: 5

Related Questions