Tuesday, July 19, 2011

Modal Popup Editor for Tables

I've recently been working on a complex project that presented the user with a lot of data from an xml data source in table form. One requirement was that the user would have to be able to edit the data in the table. If you Google 'table editor' or 'modal editor' you will get a quite a few examples which are pretty good and can do much of what I wanted to do. However, I didn't exactly like any of them enough, so I decided to create my own. The following example is a relatively simple example. The modal popup editor I am actually using is a bit more complex and allows the user to edit more than one cell at a time. But for our purposes here, a simple example will suffice.

Modal Popup Editor Example

The HTML code for the editor itself is rather simple.

<div id="overlay" class="modal-overlay" onclick="closeEditBox()"></div>
<div id="editbox" class="modal-editbox">
 <div id="edittitle" class="modal-editbox-title"></div>
 <div><textarea id="edittext" style="width:486px" rows="10" ></textarea></div>
 <div class="cssbut4" onclick="closeEditBox()"><b>  Cancel  </b></div>
 <div class="cssbut4" onclick="saveEditBox()"><b>  Save  </b></div>
</div>

That's it. All the magic is done through CSS and Javascript (JQuery).

There are two main divides in the HTML. One for the overlay and the other for the editor, which contains a textarea in which to edit the text, and a couple of buttons to either save or cancel the operation.

The CSS code for the overlay is here:

.modal-overlay {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  background:#fcfcfc;
  opacity:.75;
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  z-index:101;
  display:none;
}

And the CSS for the editor and buttons is here:

.cssbut4  {
  float:right;
  margin-top: 6px;
  margin-bottom: 5px;
  margin-right: 8px;
  height: 17px;
  background: #e3e3e3 url(../gallery/button-std2.gif) 0 0 repeat-x;
  border: solid 1px #888888;
  padding: 0px 3px;
  font-size:12px;
  color: #222222;
  text-decoration: none;
  line-height:17px;
  cursor:pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.modal-editbox {
  position:absolute;
  top:36%;
  left:50%;
  margin-left:-250px;
  width:500px;
  background: #ebebeb;
  text-align: center;
  border:solid 2px #636363;
  padding-top:5px;
  display:none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 0px 25px rgba(0,0,0,.9);
  -moz-box-shadow: 0 0px 25px rgba(0,0,0,.9);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  z-index:102;
}

I've also added a caption to the editor which is picked up from the first column in the row where the cell is clicked. There is the CSS for the title / caption:

.modal-editbox-title {
  text-align:left;
  font-weight:bold;
  font-size:13px;
  width:300px;
  float:left;
  padding:0 0 4px 4px;
}

Now to call the modal editor, you have to create a table. The cell you want to edit requires an ID. And if you want to upload the text back in a form, then use a hidden text input field with the same text as the cell. The cell you want to edit requires an "onclick" event which calls some JavaScript to launch the editor. Here is the onclick code for one of the cells in the demo. Notice that the ID of the cell is passed to the JavaScript code.

<td class='tddatabb' style='width:62%' id='o5' onclick='editBox(o5)'> </td>

And finally, here is the JavaScript code that launches the modal-editor and responds to the buttons on the editor when they are pressed.

<script type="text/javascript">

/* script for modal edit box */
var saveID;

function editBox(sourceID) {
  var text = $("#" + sourceID + "_t").val();
  var title = $("#" + sourceID + "_c").html();
  var winH = $(window).height();
  var winW = $(window).width();
  var objH = $("#editbox").height();
  var objW = $("#editbox").width();
  var left = (winW / 2) - (objW / 2);
  var top = (winH / 2) - (objH / 2) - 75
; /* slightly higher than center screen */
  $("#editbox").css({ position: 'fixed', margin: 0, top: (top > 0 ? top : 0) + 'px', left: (left > 0 ? left : 0) +'px' });
  saveID = sourceID;
  $("#overlay").css("display", "block");
  $("#editbox").show();
  $("#edittitle").html(title);
  $("#edittext").focus().val(text); /* sets focus, text and moves cursor to end */
}


function saveEditBox() {
  var newlineString = "<br/>";
  var newText = $("#edittext").val().replace(new RegExp("\n", "g"), newlineString);
  $("#" + saveID).html(newText);
  $("#" + saveID + "_t").val($("#edittext").val());
  closeEditBox();
}

function closeEditBox() {
  saveID = null;
  $("#overlay").css("display", "none");
  $("#editbox").hide();
}

</script>

That's it. Hope you find it useful, or at least a starting point for your own projects.

delicious digg facebook stumble twitter myspace linkedin technorati reddit google springpad blogger | addthis Share More...

speak your mind

If you have something to say, we would love to hear from you.

Name:
Comments:
 
Speak
Disabled due to spam

 

categories

scripts

all
general
inbox marketing
web solutions
software
travel


Popular

newsletter

Get occasional email updates from kidmoses

donate

Donations of any size to this website are greatly appreciated.

Donate
copyright © 2004 to the present day | web design by KidMoses
privacy | terms
windsor home inspections