Inline Edit Example

GitHub
Allows you to do a inline edit using a text input. Status: Not being edited 
                    
<span id="example-text"><button class="btn btn-success">Click Me</button></span>
                    
                  
                    
$("#example-text").inlineEdit({
  type: 'text',
  onChange: function (e, text, html) {
    $("#example-text-status").text("Changed");
  },
  onEdit: function (e) {
    $("#example-text-status").text("Being Edited");
  },
  onNoChange: function(e) {
    $("#example-text-status").text("Not Change");
  }
});
Allows you to do a inline edit using a select. Status: Not being edited 
                      
<span id="example-select"><button class="btn btn-success">Click Me</button></span>
                      
                    
                      
$("#example-select").inlineEdit({
  type: 'select',
  data: {
    'default': 'Click Me',
    'opt-1': 'foo',
    'opt-2': 'bar'
  },
  onChange: function (e, text, html) {
    $("#example-select-status").text("Changed");
  },
  onEdit: function (e) {
    $("#example-select-status").text("Being Edited");
  },
  onNoChange: function (e) {
    $("#example-select-status").text("Not Change");
  }
});
Allows you to do a inline edit using a textarea. Status: Not being edited 
                    
<span id="example-textarea"><button class="btn btn-success">Click Me</button></span>
                    
                  
                        
$("#example-textarea").inlineEdit({
  type: 'textarea',
  onChange: function (e, text, html) {
    $("#example-textarea-status").text("Changed");
  },
  onEdit: function (e) {
    $("#example-textarea-status").text("Being Edited");
  },
  onNoChange: function (e) {
    $("#example-textarea-status").text("Not Change");
  }
});



Properties

Property Type Options Default Description
type string text, select, textarea text The type of value the clicked text will turn into.
className string null A custom class to add to the created inline edit element.
on string Any jQuery trigger
[click, dblclick, etc.]		 click This is how the inline edit will be triggered
customData object null Custom properties to add to the inline edit tag
data object null Options for the select as a key:value object
trim bool true/false true Trim whitespace around text before loading into the text input or textarea



Methods

Method Values Description
onChange(this, text, html)
  • this: the original element with the new value
  • text: the new value
  • html: the html and text of the new value
 Executes when exiting inline edit mode and a change has been made
onEdit(this)
  • this: the original element with the new value
 Executes when entering inline edit mode
onNoChange(this)
  • this: the original element with the new value
 Executes when exiting inline edit mode but no change has been made



Events

Event Description
inlineEdit.on.edit Fires when exiting inline edit mode and a change has been made
inlineEdit.on.change Fires when entering inline edit mode
inlineEdit.on.noChange Fires when exiting inline edit mode but no change has been made