X-editable Inline Editing Example Using PHP and MySQL

We have already shared tutorials about x-editable jQuery plugin, We got huge response and request to share x-editable tutorial for update record using php and mysql.

I will demonstrate in this php tutorial to create inline editing using php and mysql. You can also create inline editing using HTML5 attribute.

Inline editing is very important features of web application that allow user to update on fly without moving any extra pages. There are a lot of inline editing plugin and grid plugin available that provide option to edit field value in-line.I am using jQuery x-editable plugin to make html element editable inline.

We will use following files for in-line edit using x-editable

index.php: This file will use to create HTML layout and handle ajax response.
connection.php: This file will use to create database connection.
response.php: This file will use to handle all server-side fucntionality. I will create get employee, update record action method and return back json response.

x-editable-inline-edit

How to Create Dynamic HTML table Using JSON

Step 1: Created connection file connection.php to handle database connection and return db connection object.

Where is:

  1. $servername: Your MySQL db hostname
  2. $username: MySQL db username
  3. $password: MySQL db password
  4. $dbname: Database name

Step 2: Included all js and css files into index.php file.

Step 3: Create HTML table for listing data in index.php file.

Step 4: Create AJAX method to get results from php file and append with table body using jQuery append() method.

As you can see, I have created GET type AJAX request which will use to get all record from employee table.I am appending one by one json response object with HTML table.

Step 5: Created response.php file and added employee listing method.

Added switch php method and default action would be to get employee record from MySQL table return json objects.

How to Make HTML table Column Editable

We have generated HTML table dynamically using ajax and loaded data into it, now we will make editable HTML table cell using x-editable method.We need to apply editable option on each column of the table which we want to inline edit.

I have created jquery method to enable inline edit on table cell.We need to pass following parameters for each table column,

Where as:

  • selector : The column selector identifier of element, that could be element id, class, name etc.
  • url : The server side script that will handle request.
  • title : Use to define Header title for popover that will show on the time editing cell.

The jQuery method is:

Now we will call above method for each cell like below,

Now we will modify table td attribute for in-line edit, We need to add some custom attribute which are use for inline edit and send request parameters to server on update.

The main attributes are:

  • data-type – type of input html element (text, textarea, select, etc)
  • data-name – The Mysql table column name.
  • data-pk – The primary key of record to be updated (ID in db)

You can also define all attribute on HTML element at once using below syntax, but make sure content would be static or loaded on DOM.

Update record using x-editable and php

We have make editable html cell using x-editable, so now we will create updated method in response.php file that will take request parameters and updated employee record data using SQL Query.

Step 1: We have added edit action in response.php file under switch method.

Step 2: Added method to update record into employee MySQL table.

When we have clicked, ok option on in-line edit popup, We will send some parameters to server side which are col name,value and id of record that will use to update record.

Conclusion:

We have demonstrate update record into mysql using x-editable jQuery plugin.We are using Bootstrap,jQuery,PHP and MySQL in this tutorial.You can also use any programming server side language for inline edit.

You can download source code and Demo from below link.

  • Geovanni Rangel G

    i’m workin on it.. let me see…

    *GOOD VIBES**