problem in jquery ui dialog content

I have a link name of "login".

It click "login" jquery di开发者_如何学Goalog will open.

Dialog has two links. If click it link,shows content related to link.

Now i come to my problem. If again i click "login" link,it shows only changed content. But i want initial content only.

This is my one part of code.

$( "#login-form" ).dialog({
                autoOpen: false,
                height: 210,
                width: 360,
                modal: true,
                show: "scale",
                hide: "scale",
                buttons: {
                    "Login": function() {
                        $("#login-frm").submit()                                    
                        },
                    Cancel: function() {
                        $(this).dialog( "close" );
                    }
                }
            });

            $( "#login" ).click(function(event) {
                event.preventDefault();
                $( "#login-form" ).dialog( "open" );
            })

How can i do this?

In your click event you can load default content again. Or else you can keep a copy of default content of the login-form in a hidden div and replace it before dialog opens.

$( "#login-form" ).dialog({
                autoOpen: false,
                height: 210,
                width: 360,
                modal: true,
                show: "scale",
                hide: "scale",
                buttons: {
                    "Login": function() {
                        $("#login-frm").submit()                                    
                        },
                    Cancel: function() {
                        $(this).dialog( "close" );
                    }
                }
            });

            $( "#login" ).click(function(event) {
                event.preventDefault();
                 $( "#login-form" ).html('give the default copy of the dialog here');
                $( "#login-form" ).dialog( "open" );
            })

Add a class to your login form controls that need to be cleared, say "loginControls" for example. Then, change your $( "#login" ).click() function to be something like this:

 $( "#login" ).click(function(event) {
       event.preventDefault();
       $( ".loginControls" ).each(function (i) {
             this.val('');
             });
       $( "#login-form" ).dialog( "open" );
 });

Note that if you have more than just simple text box controls for your login form, you could do a separate class, such as "loginCheckBoxes", and then iterate through those with $(this).removeAttr('checked'); instead.

This allows you flexibility for various types of controls without the need to write out the entire form HTML in your event handling code.