PHP / jQuery - Instant Editable Fields

  • cancer10
  • Proficient
  • Proficient
  • cancer10
  • Posts: 268

Post 3+ Months Ago

Hi,

I was looking for a solution (using php/jquery) similar to the one as shown in the screen shot.

I have a user database with 3 fields:

id (auto number)
name (varchar)
email (varchar)

the user lists gets populated in a grid (html table), clicking on either the name or the email address would convert the label into an editable text box and after editing once i remove the cursor from the textbox, the data gets saved in the database.

Any help with a code snippet will be highly appreciated.

Thanks


Image
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Here's a snippet for the UI portion:

Code: [ Select ]
<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            function convertToInput(containerId, link) {
                $('#' + containerId).html("<input type='text' value='" + link.text + "' onBlur='saveNewValue(\"" + containerId + "\", this.value);' />");
            }
            
            function saveNewValue(containerId, val) {
                $('#' + containerId).html("<a href='javascript:void(0);' onClick='convertToInput(\"" + containerId + "\", this);' >" + val + "</a>");
                $.ajax({
                    url: "saveTheValue.php",
                    data: "value=" + val,
                    type: 'POST',
                    timeout: 1000,
                    error: function(){ alert('AJAX call timed out'); }
                });
            }
        </script>
    </head>
    <body>
        <div id="nameContainer">
            <a href="javascript:void(0);" onClick="convertToInput('nameContainer',this);" >John Smith</a>
        </div>
    </body>
</html>
  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  5.         <script type="text/javascript">
  6.             function convertToInput(containerId, link) {
  7.                 $('#' + containerId).html("<input type='text' value='" + link.text + "' onBlur='saveNewValue(\"" + containerId + "\", this.value);' />");
  8.             }
  9.             
  10.             function saveNewValue(containerId, val) {
  11.                 $('#' + containerId).html("<a href='javascript:void(0);' onClick='convertToInput(\"" + containerId + "\", this);' >" + val + "</a>");
  12.                 $.ajax({
  13.                     url: "saveTheValue.php",
  14.                     data: "value=" + val,
  15.                     type: 'POST',
  16.                     timeout: 1000,
  17.                     error: function(){ alert('AJAX call timed out'); }
  18.                 });
  19.             }
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <div id="nameContainer">
  24.             <a href="javascript:void(0);" onClick="convertToInput('nameContainer',this);" >John Smith</a>
  25.         </div>
  26.     </body>
  27. </html>


Two more things to be done. First, you need to populate the href with your original DB value (instead of John Smith). Second, you need to write the php page that will take the post $_REQUEST and save it back to the DB (in the script, the reference to this file is 'saveTheValue.php' so when you make your file, replace that with your file name).

I don't have a lot of time right now to set up and tear down a quick DB for testing, so I'm leaving those parts to you. I don't like giving turn-key solutions anyways, so consider the rest homework. ;)
  • cancer10
  • Proficient
  • Proficient
  • cancer10
  • Posts: 268

Post 3+ Months Ago

works like a charm....many thanks for your help :)
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Not a problem, glad I could help.
  • WDevelopersH
  • Born
  • Born
  • WDevelopersH
  • Posts: 1

Post 3+ Months Ago

First of all you need to include **Edit Database Field PRO** into your project.

**What is *Edit Database Field PRO library* ?**

Edit Database Field PRO is a web script which help you to display the field you want from database and you can edit it with Ajax ( without reloading page ).The Field can be edit in different types : text , textarea, select , radio button, date , slider, colorpicker, switch on/off button, google map location box, video player autogenerate from youtube links; (soon: check button, time and upload).Also you can add to the editable field filters ( is email , is url and others ).

Secondly you just add the code below into your file:


PHP Code: [ Select ]
<?php
       
          /* Field name */
          $wdhDB["field_name"] = "name";
       
          /* Database Table name */
          $wdhDB["table"] = "user_db";
       
          /* Conditions to find field */
          $wdhFIELD["conditions"] = array(
            0 => array(
              'field_label' => 'id',
              'field_value' => $_GET['id'],
              'field_condition' => ''
            ),
          );
       
          /* Edit Type */
          $wdhINPUT['type'] = 'text';
       
          /* Editable */
          $wdhFIELD['edit'] = true;
       
          /* Filters */
          $wdhFILTER['is_required'] = true;
       
          /* Display name*/
          $wdhEditField->wdhShowField( $wdhDB, $wdhFIELD, $wdhINPUT, $wdhTOOLTIP, $wdhFILTER,
          $wdhERROR, $wdhUPLOAD);            
                   
        ?>
  1. <?php
  2.        
  3.           /* Field name */
  4.           $wdhDB["field_name"] = "name";
  5.        
  6.           /* Database Table name */
  7.           $wdhDB["table"] = "user_db";
  8.        
  9.           /* Conditions to find field */
  10.           $wdhFIELD["conditions"] = array(
  11.             0 => array(
  12.               'field_label' => 'id',
  13.               'field_value' => $_GET['id'],
  14.               'field_condition' => ''
  15.             ),
  16.           );
  17.        
  18.           /* Edit Type */
  19.           $wdhINPUT['type'] = 'text';
  20.        
  21.           /* Editable */
  22.           $wdhFIELD['edit'] = true;
  23.        
  24.           /* Filters */
  25.           $wdhFILTER['is_required'] = true;
  26.        
  27.           /* Display name*/
  28.           $wdhEditField->wdhShowField( $wdhDB, $wdhFIELD, $wdhINPUT, $wdhTOOLTIP, $wdhFILTER,
  29.           $wdhERROR, $wdhUPLOAD);            
  30.                    
  31.         ?>



PHP Code: [ Select ]
<?php
       
          /* Field name */
          $wdhDB["field_name"] = "email";
       
          /* Database Table name */
          $wdhDB["table"] = "user_db";
       
          /* Conditions to find field */
          $wdhFIELD["conditions"] = array(
            0 => array(
              'field_label' => 'id',
              'field_value' => $_GET['id'],
              'field_condition' => ''
            ),
          );
       
          /* Edit Type */
          $wdhINPUT['type'] = 'text';
       
          /* Editable */
          $wdhFIELD['edit'] = true;
       
          /* Filters */
          $wdhFILTER['is_required'] = true;
       
          /* Display Email*/
          $wdhEditField->wdhShowField( $wdhDB, $wdhFIELD, $wdhINPUT, $wdhTOOLTIP, $wdhFILTER,
          $wdhERROR, $wdhUPLOAD);            
                   
        ?>
  1. <?php
  2.        
  3.           /* Field name */
  4.           $wdhDB["field_name"] = "email";
  5.        
  6.           /* Database Table name */
  7.           $wdhDB["table"] = "user_db";
  8.        
  9.           /* Conditions to find field */
  10.           $wdhFIELD["conditions"] = array(
  11.             0 => array(
  12.               'field_label' => 'id',
  13.               'field_value' => $_GET['id'],
  14.               'field_condition' => ''
  15.             ),
  16.           );
  17.        
  18.           /* Edit Type */
  19.           $wdhINPUT['type'] = 'text';
  20.        
  21.           /* Editable */
  22.           $wdhFIELD['edit'] = true;
  23.        
  24.           /* Filters */
  25.           $wdhFILTER['is_required'] = true;
  26.        
  27.           /* Display Email*/
  28.           $wdhEditField->wdhShowField( $wdhDB, $wdhFIELD, $wdhINPUT, $wdhTOOLTIP, $wdhFILTER,
  29.           $wdhERROR, $wdhUPLOAD);            
  30.                    
  31.         ?>


I hope that will help you.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 106 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.