CODEWITHSUNDEEP
asp.netjquery-uidialog
7alhashmi
7alhashmi

Reputation: 924

jquery dialog form with asp:hyperlink

I have an issue in implementing the JQuery dialog with asp.net form. When I click on #hlChangePassword nothing happens. This is my code below:

<script type="text/javascript">

    jQuery(document).ready(function () {
        jQuery('#hlChangePassword').click(function () {
            var dlg = jQuery('div#ChangePass').dialog({
                width: 500,
                height: 500,
                modal: true,
                buttons: {},
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close").hide();
                }
            });
            dlg.parent().appendTo(jQuery("form:first"));
        });
    });

</script>

html

<asp:HyperLink ID="hlChangePassword" 
runat="server" NavigateUrl="#">Change Password</asp:HyperLink>

<div id="ChangePass" style="display:none;">
//The content
</div>

I don't know what is the problem. Please help me.

Upvotes: 1

Views: 1129

Answers (2)

शेखर
शेखर

Reputation: 17614

User event.preventDefault(); to prevent the post back as follows

 jQuery(document).ready(function () {
    jQuery('#hlChangePassword').click(function (event) {
        var dlg = jQuery('div#ChangePass').dialog({
            width: 500,
            height: 500,
            modal: true,
            buttons: {},
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            }
        });
        dlg.parent().appendTo(jQuery("form:first"));
        event.preventDefault();

    });
});

As hlChangePassword is a server control so it will post back. to overcome this you should use event.preventDefault.
Also you are using id selector which can change at run-time due to master page or user-control. So use server id or static id for the link as follows if you are using asp.net 4.0 or above as follows

ClientIDMode="Static"


<asp:HyperLink ID="hlChangePassword"  ClientIDMode="Static"
 runat="server" NavigateUrl="#">Change Password</asp:HyperLink>

Upvotes: 1

Sumit Kapadia
Sumit Kapadia

Reputation: 71

Bingo...
script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> add above line it wont work without ui.js.

Upvotes: 0

Related Questions