Record Editing with jQuery UI Dialog

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

by Newton Anbarasu

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">
    <p>Name: <span class="name">Chris</span></p>
    <button class="editButton">Edit</button>
</div>




<div id="response"></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>
    
    <form action="#" method="post" id="editForm">
        <input type="text" id="myInput" name="myInput" value="" />
    </form>
</div>

CSS

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

JavaScript

var record;


$('.editButton')
    .button({ icons: { primary: "ui-icon-document" }})
    .click(function() {
        
        record = $(this).parents('.record');
        //populate the editing form within the dialog
        $('#myInput').val(record.find('.name').html());
        //show the dialog
        $( "#dialogContent" ).dialog( "open" )
    });


//set up the dialog box.
$( "#dialogContent" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        OK: function() {
            
            
            $('#response').html('one file updated ' + $('#myInput').val());
            record.find('.name').html($('#myInput').val());
            $( this ).dialog( "close" );
        },        
        Cancel: function() {
            $('#response').html('The Cancel button was clicked');
            $( this ).dialog( "close" );
        }
    }
});