onClientClick not working when calling a jQuery function

Question

I want to trigger a jQuery form display when a user clicks on an ASP.NET server-side button.

However when I click on the button at runtime, the page just reloads really quick .. No jQuery form opening ..

The effect I'm trying to create can be seen here: JSFiddle

Basically I want to open the same dialog box when someone clicks on the ASP.NET button ..

This is my code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<asp:Button ID="createuser" runat="server" Text="Button" OnClientClick='$("#dialogform").dialog("open");'/>


<script type="text/javascript">

$(function() {

    $( "#dialogform" ).dialog({
      autoOpen: false,
      height: 300,
      width: 450,
      modal: true,
      buttons: {
        "Create an account": function() {
          alert('Hello');
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        $( this ).dialog( "close" );
      }
    });
  });

</script>

I have also tried using jQuery instead of the $ identifier to call jQuery functions. And I've also tried to remove the onClientClick event, and tried using this code instead for the script block above:

<script type="text/javascript">

$(function() {

    $( "#dialogform" ).dialog({
      autoOpen: false,
      height: 300,
      width: 450,
      modal: true,
      buttons: {
        "Create an account": function() {
          alert('Hello');
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        $( this ).dialog( "close" );
      }
    });

    $( "#createuser" )
      .button()
      .click(function() {
        $( "#dialogform" ).dialog( "open" );
      });
  });

</script>

Can anyone identify what's the problem ?

Answer 1

Rather than using

<asp:Button ID="createuser" runat="server" Text="Button" OnClientClick='$("#dialogform").dialog("open");'/>

try using

<input type='button' value="Button"  onclick='$("#dialogform").dialog("open");' />