Jquery Make Html5 Contenteditable Img a File Upload

Alive editable table is good for update content apace while viewing it.

This can be used to update full records details or some of them and don't need to send the user to edit form folio.

It is user-friendly and time-saving.

To implementing this I am using jQuery AJAX.

In this tutorial, I show you two ways to make your tabular array columns editable –

1. Using contentEditable attribute
2. Showing the input element when the user clicks on the cell.

---

Contents

1. Table structure
2. Configuration
3. With ContentEditable
4. Demo 1
5. Show Input Element
6. Demo ii
7. Conclusion

---

ane. Table construction

Create users tabular array.

CREATE TABLE `users` (   `id` int(11) Non NULL PRIMARY KEY AUTO_INCREMENT,   `username` varchar(60) Non NULL,   `proper noun` varchar(fifty) NOT NULL,   `gender` varchar(x) NOT Zero,   `email` varchar(60) Non Zippo  ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

---

2. Configuration

Create a config.php for the database connection.

Completed Code

<?php  $host = "localhost"; /* Host name */ $user = "root"; /* User */ $countersign = ""; /* Password */ $dbname = "tutorial"; /* Database proper name */  $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) {  die("Connectedness failed: " . mysqli_connect_error()); }

---

3. With ContentEditable

The contenteditable attribute enables the container to take input values.

HTML –

Displaying user list on the <table>. Creating a <div contenteditable='true'> within cell which stores the values.

Completed Lawmaking

<div class='container'>    <table width='100%' edge='0'>   <tr>    <th width='ten%'>S.no</th>    <thursday width='xl%'>Username</th>    <th width='40%'>Name</th>   </tr>   <?php     $query = "select * from users order by name";    $issue = mysqli_query($con,$query);    $count = one;    while($row = mysqli_fetch_array($result) ){     $id = $row['id'];     $username = $row['username'];     $proper noun = $row['proper noun'];   ?>   <tr>    <td><?php echo $count; ?></td>    <td>       <div contentEditable='true' class='edit' id='username_<?php repeat $id; ?>'>         <?php echo $username; ?>      </div>     </td>    <td>       <div contentEditable='true' class='edit' id='name_<?php repeat $id; ?>'>        <?php echo $name; ?>       </div>     </td>   </tr>   <?php    $count ++;   }   ?>   </table> </div>

---

CSS –

.edit{  width: 100%;  height: 25px; } .editMode{  border: 1px solid black; }  /* Table Layout */ table {  border:3px solid lavender;  border-radius:3px; }  table tr:nth-kid(1){  background-color:dodgerblue; } table tr:nth-child(1) thursday{  color:white;  padding:10px 0px;  letter-spacing: 1px; }  /* Table rows and columns */ table td{  padding:10px; } table tr:nth-child(even){  background-color:lavender;  color:black; }

---

PHP –

Create a new update.php file for saving the modified content. Read Post values and execute update query.

Completed Code

<?php  include "config.php";  if(isset($_POST['field']) && isset($_POST['value']) && isset($_POST['id'])){    $field = mysqli_real_escape_string($con,$_POST['field']);    $value = mysqli_real_escape_string($con,$_POST['value']);    $editid = mysqli_real_escape_string($con,$_POST['id']);     $query = "UPDATE users SET ".$field."='".$value."' WHERE id=".$editid;    mysqli_query($con,$query);     echo 1; }else{    echo 0; } exit;

---

jQuery –

Saving content when the focus out from <div course='edit'>. In AJAX request passing field proper noun, value, and id.

Completed Lawmaking

$(certificate).set(function(){    // Add Class  $('.edit').click(office(){   $(this).addClass('editMode');  });   // Salve data  $(".edit").focusout(part(){   $(this).removeClass("editMode");   var id = this.id;   var split_id = id.split("_");   var field_name = split_id[0];   var edit_id = split_id[1];   var value = $(this).text();    $.ajax({    url: 'update.php',    type: 'postal service',    data: { field:field_name, value:value, id:edit_id },    success:part(response){      if(response == 1){         console.log('Save successfully');       }else{         console.log("Not saved.");      }    }   });    });  });

---

iv. Demo 1

View Demo

---

5. Testify Input Chemical element

In the second method, instead of making the container editable using input elements that show when the user clicks on the cell.

HTML –

In the tabular array jail cell with <div> container too create an input chemical element which is shown only when the user clicks on the <div> container using jQuery.

Both of them comprise the same values.

Completed Code

<table width='100%' border='0'>  <tr>   <th width='ten%'>S.no</thursday>   <th width='xl%'>Username</th>   <th width='40%'>Name</th>  </tr>  <?php   $query = "select * from users social club past proper name";  $outcome = mysqli_query($con,$query);  $count = 1;  while($row = mysqli_fetch_array($result) ){   $id = $row['id'];   $username = $row['username'];   $name = $row['proper noun'];  ?>  <tr>   <td><?php echo $count; ?></td>   <td>      <div class='edit' > <?php echo $username; ?></div>      <input blazon='text' class='txtedit' value='<?php echo $username; ?>' id='username_<?php repeat $id; ?>' >   </td>   <td>     <div class='edit' ><?php repeat $name; ?> </div>     <input blazon='text' class='txtedit' value='<?php echo $name; ?>' id='name_<?php echo $id; ?>' >   </td>  </tr>  <?php  $count ++;  }  ?>  </table>

---

CSS –

CSS is similar as in the to a higher place case simply simply added one new grade.

Completed Code

.txtedit{  display: none;  width: 99%;  height: 30px; }

---

PHP –

The PHP code is similar to the first example there is no change in the code.

---

jQuery –

Displaying Textbox when the click event triggers on <div class='edit'> and hiding the container.

When the focus out of the Textbox then send AJAX request to save content and hide the Textbox and update the container text before showing.

Completed Lawmaking

$(document).fix(office(){    // Testify Input element  $('.edit').click(function(){   $('.txtedit').hide();   $(this).next('.txtedit').testify().focus();   $(this).hide();  });   // Relieve information  $(".txtedit").focusout(part(){      // Get edit id, field proper name and value   var id = this.id;   var split_id = id.split("_");   var field_name = split_id[0];   var edit_id = split_id[1];   var value = $(this).val();      // Hide Input element   $(this).hide();    // Hide and Change Text of the container with input elmeent   $(this).prev('.edit').testify();   $(this).prev('.edit').text(value);    // Sending AJAX request   $.ajax({    url: 'update.php',    type: 'mail service',    data: { field:field_name, value:value, id:edit_id },    success:function(response){       if(response == 1){           console.log('Salve successfully');        }else{           console.log("Not saved.");         }    }   });    });  });

---

6. Demo 2

View Demo

---

vii. Conclusion

Alive data editing is a quick and easy style to allow users to modify the content.

I showed you lot 2 ways for implementing this y'all can use any one of them in your project.

Inside the demonstration, I used the TextBox element in the second case y'all besides use whatsoever other elements like – radio push, checkboxes, etc. according to your requirement.

Note – If you have long list of information and you are showing some of them on your table layout, in this instance, its ameliorate to take the user to edit page to update another information.

If you found this tutorial helpful then don't forget to share.

Are you want to get implementation help, or change or extend the functionality of this script? Submit paid service asking.

Related posts:

morristuret1992.blogspot.com

Source: https://makitweb.com/make-live-editable-table-with-jquery-ajax/

Share this post