JQUERY .show() function in ASP.NET

Question

I'm using JQuery 1.5.2.

Whilst using the .show function, it only shows the element partly, for like 0.3 seconds, and then the element hides itself again. This is consistent, with all other forms. What am I doing wrong?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('#Button1').click(function () {
            $('#clickmeupdate').show(function () {

            });
        });

    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <span style="background-color:Blue; display: none" id="clickmeupdate" >Click me to update</span>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

I don't use ASP's server controls, but I'm kinda guessing that `runat="server"` on the button comes into it... — T.J. Crowder, Apr 02 '11 at 18:05
I think TJ has a point here. Look at the 'view source' the button ID might be different. It that is the case the use the ClientId property refer to the Id. — Philip Fourie, Apr 02 '11 at 18:08
cheers mate, the asp control doesnt work, but html works just fine — user478636, Apr 02 '11 at 18:09

score 2 · Accepted Answer · edited May 23 '17 at 12:19

The button is posting back and when it does the display is set back to none.

You can stop the postback by not using an asp.net button, just use an html button or by adding an onClick event and return false.

EDIT - I've adjusted my answer since in the comments you mentioned you needed the button click event.

You can still do this by using the OnClientClick instead to run the jQuery. See this for more info.

However, you still have the issue of the postback resetting the span to not display since the OnClientClick occurs first and then the onClick.

I think you really want to setup an AJAX kind of solution for this OR just have your span be set to runat=server and in your code behind of the button click set it to visible.

I suspect though you would be better served to check out the UpdatePanel / AJAX stuff in Asp.Net web forms. You could do all this with jQuery AJAX solution but it may be easier for you to use the web forms UpdatePanel.

but the problem is that i am calling a function in button1_click event also — user478636, Apr 02 '11 at 18:22

score 1 · Answer 2 · answered Apr 02 '11 at 18:09

1

I think your button is posting back and causing the page to refresh, if you add return false to the onclick function it should get rid of the problem.

answered Apr 02 '11 at 18:09

Porco

4,163
3
22
25

but i need to call a function at the same time – user478636 Apr 02 '11 at 18:33
ah, I see. In that case you'll probably want to hide it on the postback.add runat=server and an id to the span. You could also probably remove 'display: none' and add visible=false. Then, when the button posts back set visible=true on the span. – Porco Apr 02 '11 at 20:14

score -1 · Answer 3 · edited Apr 03 '11 at 07:16

-1

Try this:

$('#Button1').click(function () {
        $('#clickmeupdate').show();
});

edited Apr 03 '11 at 07:16

Mr.Wizard

24,179
5
44
125

answered Apr 02 '11 at 18:04

D3 K

682
1
12
19

JQUERY .show() function in ASP.NET

3 Answers3

Linked