Edit in Place (with checkboxes and selects)

Description

Provides edit-in-place functionality that includes the use of select-boxes and checkboxes.

Parameters

url: The URL that will accept updates and return the updated value. (required) ajaxCallback: A callback function that will fire after the update. (optional) type: "text", "checkbox", or "select". Will default to 'text'. (required only for 'checkbox' or 'select') dataUrl: A URL that will return the checkbox or select list as appropriate based on the current status of the editable element.

TODO Have dataUrl automatically send the ID of the element plus its current value.

By Yehuda Katz

Syntax

The syntax is a bit kludgy for checkboxes and selects.

For text-boxes, a simple $(expr).editInPlace(url) will do the trick. For checkboxes, you'll need to do $(expr).editInPlace(url, null, "checkbox", dataUrl) For select-boxes, you'll need to do $(expr).editInPlace(url, null, "select", dataUrl)

When the edit-in-place form is submitted, it will submit the value of the form and the ID of the original element to url in the form value=the_value&id=the_id.

The url will need to return a value that will be replaced back into the original edit-in-place element (for checkboxes, something like Yes or No makes sense).

Return Value

jQuery object

Tested In

• IE 5.x, 6.0, 7.0 Beta 2
• IE 5.x Mac
• Firefox > 1.0
• Opera 8.54, Opera 9 Beta
• Safari 2.03

Notes

The dataUrl functionality is quite kludgy at the moment. It will need updating in order to make this plugin truly robust.

Plugin

jQuery.editable = {};
var typeList = {};
jQuery.fn.editInPlace = function(url, ajaxCallback, typeOfBox, dataUrl) {
  this.each(function() { typeList[this.id] = typeOfBox || "text"; })
  var data;
  if(dataUrl)
    $.ajax({url: dataUrl, success: function(res) { data = res.responseText } });
  editInPlaceClick = function() {
    type = typeList[this.id] || "text";
    buttons = "<p class="buttons"><input type="button" value="SAVE" class="saveButton" />" +
      " or <input type="button" value="CANCEL" class="cancelButton" /></p>";
    if(type == "text")
      var ta = "<p><input type="text" value = "" + this.innerHTML + "" /></p>" + buttons;
    if(type == "checkbox")
      var ta = "<p><input class="checkbox" type="checkbox" " + data + " /></p>" + buttons;
    if(type == "select")
      var ta = data + buttons;
    var revert = this.innerHTML;
    this.innerHTML = ta;
    $(this).removeClickable();
    var self = this;
    $(".saveButton").click(function(e){
      editable = this.parentNode.parentNode;
      if(type == "text")
        value = $(editable).find("input[@type='" + type + "']").val();
      else if(type == "checkbox")
        value = $(editable).find("input[@type='" + type + "']")[0].checked;
      else if(type == "select")
        value = $(editable).find("select").val();
      $.ajax({
        url: url,
        type: "POST",
        data: "value=" + value + "&id=" + editable.id,
        complete: function(response) {
          $(editable).empty().html(response.responseText);
          $(editable).addBackClickable(type);
          $(editable).animate({opacity: .5}, "normal", function() {$(editable).animate({opacity: 1}, "normal")});
          if(ajaxCallback && ajaxCallback.constructor == Function) {
            ajaxCallback(editable, response);
          }
          $("script", self).each(function(){
            eval( this.text || this.textContent || this.innerHTML || "");
          }).remove();
        }
       })
      e.stopPropagation();
    });
    $(".cancelButton").click(function(e){
      editable = this.parentNode.parentNode;
      $(editable).addBackClickable(type); editable.innerHTML = revert;
      e.stopPropagation();
    });
  }
  var clickFunction = editInPlaceClick;
  jQuery.fn.removeClickable = function() {
    this.removeClass("editableInPlace").removeClass("editable");
    this.unclick();
    this.unmouseover().unmouseout();
  }
  jQuery.fn.addBackClickable = function(editType) {
    this.editInPlace(url, ajaxCallback, editType, dataUrl);
  }
  return this.click(clickFunction)
  .hover(function() {
    $(this).addClass("editableInPlace");
  }, function() {
    $(this).removeClass("editableInPlace");
  });
}