DataEditor: simple Double Click / Click inline edit JS/JQuery function

edit data inline with this simple plugin. Enter key to save support.

• Direct Download

---

JS function call

/* 
dataEditor(serverURL, dataAttribute, inputClass, ifEmptyTxt, clickEvent);
serverURL: the server side url to send data to
dataAttribute: the data-* attribute to click on to edit e.g. editor → [data-editor]
inputClass: the input / textarea class to add custom css
ifEmptyTxt: the replacement String if the user don't enter any data
clickEvent: optional parameter, the default event is dblclick, you can change it to click
*/

dataEditor('server.php', 'editor', 'myImput', '---'); // call dataEditor function

HTML Code

<p>User Name: <b><span data-editor data-id="15" data-group="users" data-type="name">Click here to edit me!</span></b></p>
<p>User Age: <b><span data-editor data-id="15" data-group="users" data-type="age">Click here to edit me!</span></b></p>
<p>User Bio: <b><span data-editor data-input="textarea" data-id="15" data-group="users" data-type="bio">Click here to edit me!</span></b></p>

Custom CSS for input (Optional)

.myImput{
padding:0px;
background:#eee;
border:none;
font-weight:bold
}

Server Side Example (server.php)

if(isset($_POST['dataGroup']) && isset($_POST['dataType']) && isset($_POST['dataBody'])){
$dataBody = $_POST['dataBody'];
if(isset($_POST['dataID']) && is_numeric($_POST['dataID'])){
if($_POST['dataGroup'] == 'users'){
switch($_POST['dataType']){
case 'name' :
/* your code here */
break;
case 'age' :
/* your code here */
break;
default : exit('Invalid Data Type');
  }
}

exit($dataBody);
}
else{
exit('Invalid ID');
  }
}

Results

User Name: Click here to edit me!

User Age: Click here to edit me!

User Bio: Click here to edit me!

---

Advanced

The POST Parameters sent to server (you can't change them unless you edit dataEditor source code):

dataGroup: 'users', // the data group to customize the server side code block for a specific entity e.g. users (from data-group)
dataType: 'name', // the dataType parameter is used to identify the data type in the spesific group e.g. the name (from data-type)
dataBody: 'Mohammad Atwi', // this is the String that will be sent to update or whatever (from input value)
dataID: '15' // the user Identifier, it could be Integer or String, used in general to identify a record in the database (from data-id)

The default Input Type is INPUT, but you can force the element to be TEXTAREA by adding this optional data-* attribute tho the HTML:

data-input="textarea"

All the these parameters are optional, no error will happend if you remove any of these data-* attributes:

data-id=""
data-group=""
data-type=""

If you remove any of these data-* attributes, the specific parameter will be NULL when the data is sent to server. This's the best option to deal with data when you don't want to use Data Group for example.

by Mohammad Atwi | uplody.com