Open Jquery Dialog Using asp.net Gridview Template Field

Question

Hi. How Can I Open Jquery Dialog with and image button that putted in Gridview Template Field?

  <asp:TemplateField HeaderText="افزودن">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="add" runat="server" CausesValidation="false" CommandName="adddetail"
                                            ImageUrl="~/Tadarokat/Images/add.png" Text="افزوردن" CommandArgument='<%# eval("mprid") %>' />
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                </asp:TemplateField>

my jquery function is :

   <script type="text/javascript">
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function test() {
        $('#Div2').dialog({
            autoOpen: false,
            show: 'slide',
            hide: 'clip',
            width: 'auto',
            height: 'auto'
            ,
            modal: true,
            resizable: false
        });

        $('#opener').click(function test() {
            $('#Div2').dialog('open');
            return false;
        });
    });
</script>

opener is an html button. i want to use my asp.net image button instead opener. Does My question Clear?

Answer 1

Solved :)

 <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server"  OnClientClick="showDialog('editPerson');" 
                            ImageUrl="~/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png" />
                    </ItemTemplate>
                </asp:TemplateField>

Jquery Function :

<script type="text/javascript">
    $(document).ready(function() {
        //setup new person dialog
        $('#newPerson').dialog({
                autoOpen: false,
                draggable: true,
                title: "Add New Person",
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });

            //setup edit person dialog
            $('#editPerson').dialog({
                autoOpen: false,
                draggable: true,
                title: "Edit Person",
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });
    });

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeDialog(id) {
        $('#' + id).dialog("close");
    }

</script>