[DHTML] Extremely Easy In-place-editing [outdated]

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

Quote:

---

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.

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. :)

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.

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 :)

HTML Code:

---

<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.

HTML Code:

---

<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 :)

Quote:

---

Originally Posted by BYK

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.

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

Quote:

---

Originally Posted by BYK

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. :)

---

Quote:

---

Originally Posted by BYK

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.

OK then, thank you ;)

A tutorial and a simple live demo has been added.
Live Demo
All live demo files for tutorial(zipped)
Tutorial

I like the script, but I don't like the way it makes the page invalid.

Code:

---

<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.