Tuesday, May 30, 2006

My Scriptaculous Local.InPlaceEditor extension

I really like the script.aculo.us Ajax.InPlaceEditor, but it's missing two things that I need.

One, it only edits a single field at a time. It would be much nicer IMHO to edit an entire form at once.

Two, it requires Ajax to submit the form and display the result. Nice and all, but sometimes I want to submit the form old-school style with a POST or GET and have the server generate the result. I tackled this today and have called it the Local.InPlaceEditor.

Local.InPlaceEditor requires that a form already is wrapping your text. When creating it the 'url' param is needed but ignored, and you need to supply two new options: externalFormId:'reportGroupsEdit',formFieldName:'reportGroupName'

It would be nice if someone rewrote these two with a nice InPlaceEditor.Base like the AutoComplete classes. This extension is a bit of a hack, since it makes a handful of assumptions.

Here's the code that I have placed in our extensions.js file. Post any questions below and I'll try to answer them.

var InPlaceEditor = {}
InPlaceEditor.Local = Class.create();
Object.extend(InPlaceEditor.Local.prototype, Ajax.InPlaceEditor.prototype);
Object.extend(InPlaceEditor.Local.prototype, {
enterEditMode: function(evt) {
if (this.saving) return;
if (this.editing) return;
this.editing = true;
if (this.options.externalControl) {
this.element.parentNode.insertBefore(this.form, this.element);
// stop the event to avoid a page refresh in Safari
if (evt) {
return false;
createForm: function() {
if (this.options.externalFormId) {
this.form = document.createElement("span");
// No bound onSubmit, so the ajax part won't kick off
} else {
this.form = document.createElement("form");
Element.addClassName(this.form, this.options.formClassName)
this.form.onsubmit = this.onSubmit.bind(this);
this.form.id = this.options.formId;


if (this.options.textarea) {
var br = document.createElement("br");

if (this.options.okButton) {
okButton = document.createElement("input");
okButton.type = "submit";
okButton.value = this.options.okText;
okButton.className = 'editor_ok_button';

if (this.options.cancelLink) {
cancelLink = document.createElement("a");
cancelLink.href = "#";
cancelLink.onclick = this.onclickCancel.bind(this);
cancelLink.className = 'editor_cancel';
createEditField: function() {
var text;
if(this.options.loadTextURL) {
text = this.options.loadingText;
} else {
text = this.getText();

var obj = this;

if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
this.options.textarea = false;
var textField = document.createElement("input");
textField.obj = this;
textField.type = "text";
textField.name = this.options.formFieldName || "value";
textField.value = text;
textField.style.backgroundColor = this.options.highlightcolor;
textField.className = 'editor_field';
var size = this.options.size || this.options.cols || 0;
if (size != 0) textField.size = size;
if (this.options.submitOnBlur)
textField.onblur = this.onSubmit.bind(this);
this.editField = textField;
} else {
this.options.textarea = true;
var textArea = document.createElement("textarea");
textArea.obj = this;
textArea.name = this.options.formFieldName || "value";
textArea.value = this.convertHTMLLineBreaks(text);
textArea.rows = this.options.rows;
textArea.cols = this.options.cols || 40;
textArea.className = 'editor_field';
if (this.options.submitOnBlur)
textArea.onblur = this.onSubmit.bind(this);
this.editField = textArea;

if(this.options.loadTextURL) {

Thursday, May 25, 2006

Eclipse Mac OS X CVS Update Bug?

So I go into Eclipse (3.1.2) on my OS X (10.3.9) box and do a Team Update from CVS. Anytime that a file has been deleted from cvs by someone else's commit I get this error:
Problems encountered while deleting resources.

I get this error for EACH file that was deleted. Then I have to open the properties on each file and unselect Read Only. After this I can Team | Override And Update to remove the file.

Does this happen to anyone else on their Mac? I've never had this issue on Windows. I think the bug is in OS X holding the file as read only and locked, but I don't know. It's very frustrating and time consuming to deal with.

Monday, May 22, 2006

IE Left Margin Missing Bug

This one has been bugging me for a long time before finding the answer today...

In IE I couldn't get absolute positioned elements in our left-hand Search pane to appear correctly. The would get pushed onto our right-hand content pane. After thinking about it overnight (well, over multiple nights) I realized that IE was not noticing our negative left or right margins (One True Layout stuff).

A search today reveals the answer from PositionIsEverything
If #wrapper is static or relative, it must have a width, or it and the <DIV> it contains will lose their left margins in IE. If it's absolute, lack of a 'width' will not trigger the bug.

So I went back through and added width:100% or width:998px to the container divs that were position:static or position:relative. Everything now works beautifully!

All of this stems from my desire to use script.aculo.us local autocompletion (which requires an absolutely positioned list) to replace a VERY long drop down select list that we have.