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
– T.J. Crowder, Commented Apr 2, 2011 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
– Philip Fourie, Commented Apr 2, 2011 at 18:08
cheers mate, the asp control doesnt work, but html works just fine — user478636
– user478636, Commented Apr 2, 2011 at 18:09

Community · Accepted Answer · 2017-05-23 12:19:54Z

2

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.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Apr 2, 2011 at 18:07

Kevin LaBranche

21.1k5 gold badges55 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user478636 Over a year ago

but the problem is that i am calling a function in button1_click event also

Porco · Accepted Answer · 2011-04-02 18:09:28Z

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 2, 2011 at 18:09

Porco

4,2033 gold badges25 silver badges25 bronze badges

2 Comments

user478636 Over a year ago

but i need to call a function at the same time

Porco Over a year ago

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.

Mr.Wizard · Accepted Answer · 2011-04-03 07:16:33Z

-1

Try this:

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

edited Apr 3, 2011 at 7:16

Mr.Wizard

24.4k5 gold badges46 silver badges131 bronze badges

answered Apr 2, 2011 at 18:04

D3 K

6822 gold badges12 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQUERY .show() function in ASP.NET

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related