Record Editing with jQuery UI Dialog

A simple example of a jQuery UI button and a modal dialog allowing HTML records to be edited.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/dark-hive/jquery-ui.css">
<div class="record">
    <button class="editButton">Edit</button>
</div>




<div id="dialogContent" title="This is a dialog box">
    <p>You can have whatever you need inside a dialog box and program the buttons to do whatever you like.</p>
</div>

CSS

body { padding: 15px; font-size: 11px; font-family: Arial }
#dialogContent { display:none; }
#response { border: 1px solid green; margin-top:20px; padding:15px; }
#dialogContent p { margin-bottom: 1.5em; }
.record { margin-bottom:20px; padding:5px; border: 1px solid red; }

JavaScript

//Global variable to 'remember' which record you're editing.
var record;

//set up the button styling and click functionality
$('.editButton')
    .button({ icons: { primary: "ui-icon-document" }})
    .click(function() {
        //set which record we're editing so we can update it later
        record = $(this).parents('.record');
        //populate the editing form within the dialog
        $( "#dialogContent" ).dialog( "open" )
    });

//set up the dialog box.
$( "#dialogContent" ).dialog({
    autoOpen: false,
    modal: true,
});