The JavaScript API¶
Events¶
Editlive default widgets provides a set of events which follow the jQuery UI model.
If your custom widget subclass the charField widget like the default widgets, these events will also be available. Just remember to trigger them if you override a method.
blur¶
Triggered when a field is blurred (once the placeholder is shown)
$(function(){
$('#id_field').on('editliveblur', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
change¶
Last event triggered after a succesfull save.
$(function(){
$('#id_field').on('editlivechange', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
error¶
Triggered when a validation error occurs.
$(function(){
$('#id_field').on('editliveerror', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
focus¶
Triggered before showing the field.
$(function(){
$('#id_field').on('editlivefocus', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
focused¶
Triggered once the field is shown.
$(function(){
$('#id_field').on('editlivefocus', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
save¶
Triggered before saving.
$(function(){
$('#id_field').on('editlivesave', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
success¶
Triggered after a succesfull save.
$(function(){
$('#id_field').on('editlivesuccess', function(event, ui){
var element = $(this); // Input
var editliveInstance = ui;
// Do something
});
});
$.fn.editlive¶
This is a gateway function used to interact with an instancied editlive field.
Val is used to get and set the field value:
$('#id_char_test').editlive('val');
"Hello World"
$('#id_char_test').editlive('val', 'Hello Universe');
"Hello Universe"
$.editlive.load¶
Scan the entire document for editlive tags and load their widgets:
$(function(){
$.editlive.load();
});
This is equivalent of doing this:
$(function(){
$('editlive').each(function(k, v) {
$.editlive.loadWidget(v);
});
});
You can also pass a selector as parent:
$(function(){
$.editlive.load('#my-ajax-content-wrapper');
});
$.editlive.loadWidget¶
Load a given editlive widget element:
$(function(){
var widget = $('editlive:first');
$.editlive.loadWidget(widget);
});