开发者

JQUERY .show() function in ASP.NET

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>


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.


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.


Try this:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜