PDA

View Full Version : [DHTML] Extremely Easy In-place-editing [outdated]



BYK
12-02-2007, 03:37 PM
1) CODE TITLE: quickEdit

2) AUTHOR NAME/NOTES: BYK

3) DESCRIPTION: This library is for quickly and efficiently editing of text and image based page components. The functions included in this library are not for external use generally and all you have to do is read the "initEditables()" function's explanation to start using this good system with almost no JavaScript knowledge at all. This library is very useful for user profile pages' or dynamically generated pages' editing operations. This editing is used for page. We can correct this as "in-page-editing" which includes images. You should see the demo video to completely understand what I mean. ;)

The explanation is as follows


This function initializes the ALL editable elements.
For an element to be considered as an "editable element" it should have editaction, editparams and editcond properties.

editaction property contains the adress of the server side page which will receive the change request, just as a form element's action property.
editparams property contains the additional parameters AND THE NAME OF THE VARIABLE WHICH THE NEW VALUE WILL BE ASSIGNED.
editcond property contains a Javascript expression or simply 1 or 0 which determines WHEN THE ELEMENT CAN BE EDITED.
editfade property will add an extra FADE EFFECT when user gets his/her mouse over the editable element, it fades to the given value (0<=value<=1)
edittype property defines the text-based editable elements editing elements. To be more clearly, if you set edittype="TEXTAREA" then the script will generate a TEXTAREA instead of a TEXT INPUT for the editing of that editable element.

4) URL TO CODE: http://amplio-vita.net/JSLib
Demos are on the given URL but a direct link to the short and brief(90secs) YouTube video demo is here: http://www.youtube.com/watch?v=d6zcaWdkQJ0

Note: This library is a part of the amplio-vita JSLib project and needs its ajax_main.js to run. All explanations are made on the uncompressed library as comments. Please give feedback to improve our library.

BYK
12-03-2007, 04:04 PM
I really need feedback about this library. Why did nobody commented? If the video demo is not explanatory enough please tell me so that I can know and improve it.

Or if the method did just not seem well to you, then please tell it also. :)

lex2000
12-13-2007, 06:14 PM
It might help to give more detail about how to implement your scripts, including the HTML required to implement them in a page layout. Look at most of the other script submissions on DD as an example. A little more documentation and instruction will go a long way for potential users of the script. It would also be helpful to see a working demo of this. The site you link to doesn't exhibit the script at all, at least not that I can determine.

From your demo it looks like this is a very useful tool, and one that I'm looking forward to implementing. It's just not possible to get a good grasp of what you've done without a way to give it a trial.

BYK
12-13-2007, 07:12 PM
First of all thank you for your valuable comment on the forum. I'm working on a "live" demo :)

Ok this is hard to understand with only explanations, here is an example :)


<div id="daDiv" editaction="edit_data.php" editparams="editedArea=theDiv&value=" editcond="isAdmin" edittype="textarea">Some text</div>

First, the editcond is checked, here it just looks the value of the JavaScript variable "isAdmin". If it is true, it allows the user to edit the area. How the user understands he/she can edit the area? The script automatically changes the editable element's class to "editableElement" when the user hovers the cursor on it. So you should define a good looking editableElement class in your CSS. You can enter any JavaScript expression in the editcond parameter for evaluation. But do not forget that you still have to check user rights from serverside.

Then the edittype. If you write 'edittype="textarea"' when the user clicks on the editable element, he/she will see a textarea instead of a textbox which is the default.

Ok, the editaction and the editparams should be considered together I think.

When user edits the text, the scripts makes a POST call like this "edit_data.php?editedArea=theDiv&value=[Newly entered text]" and waits a "1" as a response. If the page sends back a different response, it shows an error message to the user which indicates that the operation was not successful.

OK this was the text part, image part is similar. Let's look at an example again.


<img id="daImg" editaction="edit_image.php" editparams="imageID=3&image=" editcond="isAdmin" editfade="0.5" />

Actually nearly everything is here. editcond defines whether the user can change the image or not. But this time, to take more attention from the user we add the editfade parameter. When the user gets the cursor over our image if he/she has right to change the image it will both change its class to "editableElement" and will fade to 0.5 opacity(50%).

editaction and editparams are the same as the text based ones, only the response from the page should be different. The script waits a response in the following format:
path=[the path to the new image]

If the response is anyhow different from the above format the script informs the user that the operation has failed, else it sets the images path to the path given in the response.

If there is any unclear point please do not hesitate to ask.

Note: This script also requires the visual_main.js for fade effects. I forgot to mention this in the first post, sorry :)

jscheuer1
12-13-2007, 08:48 PM
I really need feedback about this library. Why did nobody commented? If the video demo is not explanatory enough please tell me so that I can know and improve it.

Or if the method did just not seem well to you, then please tell it also. :)

If you are looking for feedback, and not submitting a finished script, this is the wrong forum. Moving to javascript.

BYK
12-13-2007, 09:28 PM
This IS a finished script. But finished scripts can be improved, right? So can you move the subject back to script submissions? :)

jscheuer1
12-13-2007, 09:37 PM
I really need feedback about this library. Why did nobody commented? If the video demo is not explanatory enough please tell me so that I can know and improve it.

Or if the method did just not seem well to you, then please tell it also. :)


This IS a finished script. But finished scripts can be improved, right? So can you move the subject back to script submissions? :)

Give it some time, you might actually get more feedback here. Once you have incorporated all of the suggestions you deem worthwhile, you may then submit it again.

To all, give BYK's script some attention and feedback, please.

BYK
12-13-2007, 09:47 PM
OK then, thank you ;)

BYK
02-10-2008, 11:49 AM
A tutorial and a simple live demo has been added.
Live Demo (http://amplio-vita.net/JSLib_files/quickEdit-text/quickEditFinal.htm)
All live demo files for tutorial(zipped) (http://amplio-vita.net/JSLib_files/quickEdit-text.zip)
Tutorial (http://amplio-vita.net/JSLib_files/documents/quickEdit%20-%20TextEditing.pdf)

thetestingsite
02-10-2008, 02:05 PM
I like the script, but I don't like the way it makes the page invalid.



<li>Count of the Item : <span id="itemCount" editcond="1" editaction="itemCountChange.php" editparams="itemId=1&itemCount=">2</span></li>


By adding all of these extra attributes to the span tag would cause it not to validate (at least not HTML 4.01 strict). If you could find a better way to implement the script without causing this little issue, I think you would have a good little thing there.

Hope this helps.

jscheuer1
02-10-2008, 02:31 PM
Your demo page doesn't work in IE 7 after one edit.

BYK
03-04-2008, 09:16 AM
Hello all again and a GREAT sorry for not answering the comments but I was a bit busy and by the way shouldn't the forum have noticed me via mail? Whatever,

First thetestingsite,
I'm aware of the validity thing and I searched for a solution. I have found a solution which extends the current standarts BUT W3C Validator seems to not support it. And I cannot think of another easy and unobtrusive way of implementing it but any idea is welcomed.

Second jscheuer1,
I have checked it on IE7 several times and the only problem I see is when you edit something the border around the element remains but if you mouse over and out again, it dissappears. But there isn't any problem in the working(you can edit it again and again and again... :)).

By the way we have switched to a much more tidy name space system and started to use the event management functions of Dean Edwards. Since we do not have a "good" front page for the whole project it is not published yet BUT you people can access it ;)

http://amplio-vita.net/JSLib/demos/quickEdit/quickEditFinal.htm is the new demo which has no problems(at last I couldn't find any yet :))

You can reach the whole documentation at http://amplio-vita.net/JSLib/documentation and you may download the parts of the directory(zipped) via links like below
http://amplio-vita.net/zip/JSLib - downloads the whole project
http://amplio-vita.net/zip/JSLib/demos - downloads the demos only
etc.

You may reach to the whole directory at http://amplio-vita.net/JSLib/

Please DO comment on anything and report any errors you see.

Thank you for your interest and attention :)