Categories
josephscott

AJAX Edit In Place With Prototype (Javascript), Version 0.3.2

New items in version 0.3.2:

  • New option, edit_title
  • New option, on_blur

The edit_title option is text that is shown on the mouseover event. The default edit_title string in ‘Click To Edit’.

The on_blur option controls what form action should be taken when the user clicks some where else on the page (which triggers a blur event). The default is to do nothing and accepts ‘save’ and ‘cancel’. When on_blur is set to ‘save’ it is identical to clicking on the save button. When it is set to ‘cancel’ it is exactly the same as clicking on the cancel button.

Just as before you can download the release file, eip-0.3.2.tar.gz, and play with it on the example page.

16 replies on “AJAX Edit In Place With Prototype (Javascript), Version 0.3.2”

Hey, I noticed that when I clicked “cancel” or “save” a little white space was added to where I was editing. In EditInPlace._formButtons I noticed there was a “n” at the end. I deleted that (and what seemed to be an extra “”) and it seemed to fix the problem. Not sure what either of those was for.

Beside that the transition to 0.3.2 from 0.2.2 has been pretty simple even including the few changes you helped me with. Thanks again!!!

Oh, and I forgot, it still has a problem with “+” signs. Even in the example, if I change the text to:

my math equation is 1+1=2

the text is converted into

my math equation is 1 1=2

The only problem i c is when you type non-english chars the encoding sucks! I tested it with Greek chars … Terrible…

joseph –

Yes, i changed escape to encodeURIComponent and the problem with the encoding still consists!
Some Greek characters are: αβγδεζηθ, copy and test them and if you could kindly tell me the results i will appreciate it!

Coder-
I’ve been looking around and haven’t been able to find any info on why this is happening. If anyone out there has hints as to what is going on with Greek characters please let me know.

hi
i ran into similar problems like coder, not greek charakters but special characters like Double High-Reversed-9 Quotation Mark et al. copy pasted into input fileds out of word files.

i also tried to solve the problem using encodeURIComponent but it didn’t help.

i am not shure why this happens but i guess that uri encoding just does not handle characters whith an unicode value above 255, since encoding is realized with %00 to %FF.

being limited to encodeURIComponent and encode solely and having to rely on the developement over at prototype i wrote an own editing in place as a consequence, far simpler, but able to handle such special characters.

the assumption is that if uri encoding can’t handle values above 255, character have to be encoded beforhand in a manner that uri encoding can safely take place.

for this i used the char code returned by the charCodeAt() function and replaced any character in the edited string with a char code higher than 255 by an entity with the syntax &#CHARCODE;

in this way uri encoding takes place only on safe characters.

have a look at it: http://memibeltrame.ch/quickedit/

Joseph –
thanks for your work. it inspired mine, maybe i can give you some inspiration back…

greets
memi

Hi, I think this is the correct way to convert edit.php to edit.cfm to work with a ColdFusion server. I’m using the “DevNet” version of CF right now which likes to include extraneous meta data which is messing it up for me for repeat edits, but in theory it should work fine if you have a licensed version of CF.

Inside edit.cfm

#HTMLEditFormat(content)#

Third times a charm?

[code]
[cfset thread = CreateObject("java", "java.lang.Thread")]
[cfflush]
[cfset thread.sleep(1000)]

[cfset id = FORM.id]
[cfset content = FORM.content]
[cfoutput]
#HTMLEditFormat(content)#
[/cfoutput]
[/code]

Just replace the [‘s with

Memi, you may want to try this…

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19617

form.title = Replace(form.title, chr(8217), chr(39));
form.title = Replace(form.title, chr(8216), chr(39));
form.title = Replace(form.title, chr(8220), chr(34));
form.title = Replace(form.title, chr(8221), chr(34));
form.title = Replace(form.title, chr(8211), “-“);
form.title = Replace(form.title, Chr(10)Char(13), “”);
// replaces line feed/carriage return with a break

note: I believe the last form.title line is incorrect; I think it should be split into two lines and I believe the secondard Char(13) should be Chr(13) instead. The version I use is posted below:

form.title = Replace(form.title, chr(8217), chr(39));
form.title = Replace(form.title, chr(8216), chr(39));
form.title = Replace(form.title, chr(8220), chr(34));
form.title = Replace(form.title, chr(8221), chr(34));
form.title = Replace(form.title, chr(8211), “-“);
form.title = Replace(form.title, Chr(10), “”);
form.title = Replace(form.title, Chr(13), “”);
// replaces line feed/carriage return with a break

Take 2 (if the special characters are still dropped from this posting attempt, refer to the url provided and fill in the blanks. 🙂

Memi, you may want to try this…

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19617

<cfscript>
form.title = Replace(form.title, chr(8217), chr(39));
form.title = Replace(form.title, chr(8216), chr(39));
form.title = Replace(form.title, chr(8220), chr(34));
form.title = Replace(form.title, chr(8221), chr(34));
form.title = Replace(form.title, chr(8211), "-");
form.title = Replace(form.title, Chr(10)Char(13), "");
// replaces line feed/carriage return with a break
</cfscript>

note: I believe the last form.title line is incorrect; I think it should be split into two lines and I believe the secondard Char(13) should be Chr(13) instead. The version I use is posted below:

<cfscript>
form.title = Replace(form.title, chr(8217), chr(39));
form.title = Replace(form.title, chr(8216), chr(39));
form.title = Replace(form.title, chr(8220), chr(34));
form.title = Replace(form.title, chr(8221), chr(34));
form.title = Replace(form.title, chr(8211), "-");
form.title = Replace(form.title, Chr(10), "");
form.title = Replace(form.title, Chr(13), "");
// replaces line feed/carriage return with a break
</cfscript>

Eh… even with my attmpt, I’m still get a lot of extra space. I’m not sure what the issue is but I can’t use this until I can figure out how to remove the extraneous white space.

Would someone be kind enough to show the complete file of code that uses the script:

form.title = Replace(form.title, chr(8217), chr(39));
form.title = Replace(form.title, chr(8216), chr(39));
form.title = Replace(form.title, chr(8220), chr(34));
form.title = Replace(form.title, chr(8221), chr(34));
form.title = Replace(form.title, chr(8211), “-“);
form.title = Replace(form.title, Chr(10)Char(13), “”);
// replaces line feed/carriage return with a break

I’m new to CF and trying to understand how to use this script in an actual example.

Thanks,
Stuart

Leave a Reply

Your email address will not be published. Required fields are marked *