How do I make the dialog not save any changes I made to inside it when I close it?

Question

I'm using JQuery UI Dialog, and I can't seem to make it ignore any changes made to the value when closing. When I open the dialog, make any changes to and then close it, then it should refresh the dialog to what it was before when I open the dialog again. I'm using $('#profile_content').dialog() , where profile_content is the id for the div block:

<div id='profile_content'>
 <label for="user_name">Name:</label>
 <input type="text" id="user_name" value="<?php echo $user['username'] ?>"/><br>
 <label for="user_email">Email:</label>
 <input type="text" id="user_email" value="<?php echo $user['email'] ?>"/>
</div>

Answer 1

It's just a <div> that's shown and hidden appropriately. What I usually do is clear all values during close or open. You can have a function bound to these events.

Answer 2

You could do something like this.

In your fields you implement a "data" property.

<input type="text" id="user_name" data-default-value="<?php echo $user['username'] ?>"/>

Then on open of the dialog you call this, which sets it back to the default value:

$("#profile_content input").each(function() {
   $(this).val($(this).data("default-value"));
}