How do I debug this javascript -- I don't get an error in Firebug but it's not working as expected.
- by Angela
I installed the plugin better-edit-in-place (http://github.com/nakajima/better-edit-in-place) but I dont' seem to be able to make it work. The plugin creates javascript, and also automatically creates a rel and class.
The expected behavior is to make an edit-in-place, but it currently is not. Nothing happens when I mouse over.
When I use firebug, it is rendering the value to be edited correctly:
<span rel="/emails/1" id="email_1_days" class="editable">7</span>
And it is showing the full javascript which should work on class editable. I didn't copy everything, just the chunks that seemed should be operationable if I have a class name in the DOM.
// Editable: Better in-place-editing
// http://github.com/nakajima/nakatype/wikis/better-edit-in-place-editable-js
var Editable = Class.create({
initialize: function(element, options) {
this.element = $(element);
Object.extend(this, options);
// Set default values for options
this.editField = this.editField || {};
this.editField.type = this.editField.type || 'input';
this.onLoading = this.onLoading || Prototype.emptyFunction;
this.onComplete = this.onComplete || Prototype.emptyFunction;
this.field = this.parseField();
this.value = this.element.innerHTML;
this.setupForm();
this.setupBehaviors();
},
// In order to parse the field correctly, it's necessary that the element
// you want to edit in place for have an id of (model_name)_(id)_(field_name).
// For example, if you want to edit the "caption" field in a "Photo" model,
// your id should be something like "photo_#{@photo.id}_caption".
// If you want to edit the "comment_body" field in a "MemberBlogPost" model,
// it would be: "member_blog_post_#{@member_blog_post.id}_comment_body"
parseField: function() {
var matches = this.element.id.match(/(.*)_\d*_(.*)/);
this.modelName = matches[1];
this.fieldName = matches[2];
if (this.editField.foreignKey) this.fieldName += '_id';
return this.modelName + '[' + this.fieldName + ']';
},
// Create the editing form for the editable and inserts it after the element.
// If window._token is defined, then we add a hidden element that contains the
// authenticity_token for the AJAX request.
setupForm: function() {
this.editForm = new Element('form', {
'action': this.element.readAttribute('rel'),
'style':'display:none',
'class':'in-place-editor'
});
this.setupInputElement();
if (this.editField.tag != 'select') {
this.saveInput = new Element('input', {
type:'submit',
value: Editable.options.saveText
});
if (this.submitButtonClass) this.saveInput.addClassName(this.submitButtonClass);
this.cancelLink = new Element('a', {
href:'#'
}).update(Editable.options.cancelText);
if (this.cancelButtonClass) this.cancelLink.addClassName(this.cancelButtonClass);
}
var methodInput = new Element('input', {
type:'hidden',
value:'put',
name:'_method'
});
if (typeof(window._token) != 'undefined') {
this.editForm.insert(new Element('input', {
type: 'hidden',
value: window._token,
name: 'authenticity_token'
}));
}
this.editForm.insert(this.editField.element);
if (this.editField.type != 'select') {
this.editForm.insert(this.saveInput);
this.editForm.insert(this.cancelLink);
}
this.editForm.insert(methodInput);
this.element.insert({
after: this.editForm
});
},
// Create input element - text input, text area or select box.
setupInputElement: function() {
this.editField.element = new Element(this.editField.type, {
'name':this.field,
'id':('edit_' + this.element.id)
});
if(this.editField['class']) this.editField.element.addClassName(this.editField['class']);
if(this.editField.type == 'select') {
// Create options
var options = this.editField.options.map(function(option) {
return new Option(option[0], option[1]);
});
// And assign them to select element
options.each(function(option, index) {
this.editField.element.options[index] = options[index];
}.bind(this));
// Set selected option
try {
this.editField.element.selectedIndex = $A(this.editField.element.options).find(function(option) {
return option.text == this.element.innerHTML;
}.bind(this)).index;
} catch(e) {
this.editField.element.selectedIndex = 0;
}
// Set event handlers to automaticall submit form when option is changed
this.editField.element.observe('blur', this.cancel.bind(this));
this.editField.element.observe('change', this.save.bind(this));
} else {
// Copy value of the element to the input
this.editField.element.value = this.element.innerHTML;
}
},
// Sets up event handles for editable.
setupBehaviors: function() {
this.element.observe('click', this.edit.bindAsEventListener(this));
if (this.saveInput) this.editForm.observe('submit', this.save.bindAsEventListener(this));
if (this.cancelLink) this.cancelLink.observe('click', this.cancel.bindAsEventListener(this));
},
// Event Handler that activates form and hides element.
edit: function(event) {
this.element.hide();
this.editForm.show();
this.editField.element.activate ? this.editField.element.activate() : this.editField.element.focus();
if (event) event.stop();
},
// Event handler that makes request to server, then handles a JSON response.
save: function(event) {
var pars = this.editForm.serialize(true);
var url = this.editForm.readAttribute('action');
this.editForm.disable();
new Ajax.Request(url + ".json", {
method: 'put',
parameters: pars,
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
var value;
if (json[this.modelName]) {
value = json[this.modelName][this.fieldName];
}
else {
value = json[this.fieldName];
}
// If we're using foreign key, read value from the form
// instead of displaying foreign key ID
if (this.editField.foreignKey) {
value = $A(this.editField.element.options).find(function(option) {
return option.value == value;
}).text;
}
this.value = value;
this.editField.element.value = this.value;
this.element.update(this.value);
this.editForm.enable();
if (Editable.afterSave) {
Editable.afterSave(this);
}
this.cancel();
}.bind(this),
onFailure: function(transport) {
this.cancel();
alert("Your change could not be saved.");
}.bind(this),
onLoading: this.onLoading.bind(this),
onComplete: this.onComplete.bind(this)
});
if (event) {
event.stop();
}
},
// Event handler that restores original editable value and hides form.
cancel: function(event) {
this.element.show();
this.editField.element.value = this.value;
this.editForm.hide();
if (event) {
event.stop();
}
},
// Removes editable behavior from an element.
clobber: function() {
this.element.stopObserving('click');
try {
this.editForm.remove(); delete(this);
}
catch(e) {
delete(this);
}
}
});
// Editable class methods.
Object.extend(Editable, {
options: {
saveText: 'Save',
cancelText: 'Cancel'
},
create: function(element) {
new Editable(element);
},
setupAll: function(klass) {
klass = klass || '.editable';
$$(klass).each(Editable.create);
}
});
But when I point my mouse at the element, no in-place-editing action!
