QuickEdit

Demo

Submitted script - Author: Burak Yigit KAYA(Homepage)

Download script

You can download the entire script from this Zip file

Setup

Step 1: Create your HTML

Here I have created a standard HTML form:

<form>
  <h1>Click on the names and adresses </h1>
  <table id="personalCard">
    <tr>
      <td>First name:</td>
      <td><span id="firstname">Alf Magne</span></td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td><span id="lastname">Kalleland</span></td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><div id="address">Somewhere<br>In Norway</div></td>
    </tr>
    <tr>
      <td>Country:</td>
      <td><span id="country">Norway</span></td>
    </tr>
    <tr>
      <td>Gender:</td>
      <td><span id="gender">Male</span></td>
    </tr>
  </table>
</form>

Step 2: Specify how to edit data

This is done inside a <style> block. The type of this block is set to "text/aVquickEdit".

<style type="text/aVquickEdit">
#personalCard span,#personalCard div{
  action:  'change.php',
  params: 'var=' + element.id + '&val',
  condition: 1
}
#personalCard div {
  type: 'textarea'        
}
#country{
  type:'select',
  selectValues: ['Denmark','Finland','France','Germany','Norway','Spain','Sweden','United Kingdom','United States']
}
#gender{
  type:'select',
  selectValues: ['female','male']
}
</style>

Attributes:

Here are some of the available attributes you can specify inside the <style> block:

• action: Path to file to execute after a modification has been made
• type: Example: select, textarea, text
• selectValues: Possible select box values, example: ['Female','Male']
• fade: Fade effect
• params: Params attached to the url and sent to the server. Example: 'var=' + element.id + '&val=something'

Wiki

More info regarding this script can be found at http://code.google.com/p/av-jslib/wiki/aVquickEditTutorial

Tweet

Advertisement:
A logo design contest at Logomyway

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2010 dhtmlgoodies.com