Name Mon Lu

Love jQuery/CSS

Blog about Webdev

Twitter supawaza

RSS Twitter Flickr

What I am up to:


  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:
    1
    
    <div id="item01">Editable text</div>
    <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:
    1
    2
    
    <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>
    <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
    1
    2
    3
    4
    5
    
    This is item 1
     
    This is item 2
     
    This is item 2
    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:

1
<div id="fieldname-<?=$id?>-tablename" class="editable">This is editable text</div>
<div id="fieldname-<?=$id?>-tablename" class="editable">This is editable text</div>

Newb, but works.

This entry was posted on Wednesday, July 22nd, 2009 at 8:42 AM and is filed under Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.