1. jEd­itable passes val­ues as $_POST as default
2. It grabs the ID from the con­tainer as value to the $_POST. Exam­ple:

   <div id="item01">Editable text</div>

   To retrieve: $id = $_POST[’id’] will return “item01″ – this is meant to be pass­ing unique ID. An exam­ple would be the Pri­mary Auto-increment ID.

3. Set a class and del­care it to jEd­itable to make them editable. Example:

   <div id="unique-id-1" class="editable">This is the editable text</div>
   <div id="unique-id-2" class="editable">This is the editable text</div>

4. The HTML

   This is item 1
    
   This is item 2
    
   This is item 2

5. Javascript:

   		$(document).ready(function() {
               $('.editable').editable( 'jedit.php', {
                   "indicator" : 'Saving...',
                   "tooltip"   : "Click to edit...",
                   "type"		: "textarea",
                   "cancel"	: "Cancel",
                   "submit"	: "Save"
               });
           });

6. The PHP: jedit.php
   Note: Must re-echo the results for the updated value(s) to dis­play the new value(s)
7. jEd­itable Con­fig­u­ra­tions: you have the options to choose what to show up for an editable field. Such as a tooltip popup, what the sub­mit but­ton shows, or have a can­cel but­ton etc… you can see the full doc­u­men­ta­tion on jEd­itable web­site.

If you want to pass mul­ti­ple para­me­ters, you can either use JSON or trick the ID to pass mul­ti­ple fields. I have a hard time with JSON, so I tricked the ID part to pass mul­ti­ple fields by using the PHP explode() func­tion. For example:

<div id="fieldname-&lt;?=$id?&gt;-tablename" class="editable">This is editable text</div>

Newb, but works.

Related Posts

No related posts.