ASP.NET MVC2 User Control JQuery problem

Question

Hi! I want to make my own authorization for my asp.net mvc2 application, I want to use the default LogOn user control, I add this code to user control:

<a id="log_in" href="#">log in</a>    

    <div id="dialog" title="Please sing in">
        <p>Login:</p>
        <p><input type="text" /></p>
        <p><input type="text" /></p>
    </div>

and this to master page where the user control is rendered:

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript" />   
   <script src="../../Scripts/jquery-ui-1.8.4.custom.min.js" type="text/javascript" />
    <script type="text/javascript">
        window.onload = function() {
            console.log("ready");
            $("#log_in").click(function() { showDialog(); });
            $("#dialog").hide();

            function showDialog() {

                $("#dialog").dialog({
                    height: 140,
                    modal: true
                });
            }
        }
    </script>  

and now then page is loaded script doesn't executed

Answer 1

The # in your href will cause the page to be reloaded.

In the js you will need to prevent the click event from activating the link by returning false from the click event:

$("#log_in").click(function() { showDialog(); return false; });