jQuery X editable plugin to update records in php

jQuery X editable plugin to update records in php
Reading Time: 3 minutes

Today i am going to write a simple way to update records in php using ajax. I will use jQuery plugin and Bootstrap to implement this process. It may seems difficult, but i can assure you this is the simplest way to update records in PHP using ajax.

Steps to use jQuery X-editable plugin:-

1. Include Bootstrap and jQuery files in your head section.

2. After that, download x-editable plugin CSS and js and include in your document.

3. Setup editable mode. After that, apply editable methods to these elements.

4. Fetch data from the database and show it to the user.

5. Write the update code in ajax.php file.

 

Step 1

First, we will download Bootstrap and jQuery and include in our file. I am using Bootstrap 3 version in this example. Download the full tutorial, you will get all the required files.

 

Step 2

Now, we will download jQuery x editable plugin. It will contain two files (CSS & js). Make sure jQuery is included in this plugin. If jQuery is included below this plugin then, it will not work properly.

 

Step 3

Now we will setup the editable mode to “popup”. you can also use “inline” mode. Mostly, we prefer “popup” mode to edit the data. After this, we will apply editable methods to our markup elements. In my example, I am using anchor tag, but if there are more anchor tag in the webpage, then use specific class.

 

Step 4

Now, fetch the data from database and use while loop to display the data. To display the data we use the anchor tag. Let’s understand this carefully.

This anchor tag is written inside the while loop. In this “href” attribute is always “#”.  “id” attribute is the name of the column in the database. In my case, it is roll_no. “datatype” attribute is always “text”. “data-pk” attribute is the primary key of the table. In my case it is “$row[‘id’]”. “data-URL” attribute is the URL of the file where the post request will be sent. I am sending to “ajax.php” file. In that file, we have to receive all the values and perform the update query to update the records. My full code of index.php page is below:-

 

Step 5

Now the final step is left. The ajax request is sent to ajax.php file. we have to receive all the values and perform the update query.

 

9 Comments on “jQuery X editable plugin to update records in php”

  1. hello, your tutorial(php using ajax jQuery X-editable plugin) is really awesome. now my question is how i can add a datepicker(many datepickers) in the editable fields?

  2. Why is user input not sanitized? This could have serious security issues, at least tell something about it when you put in the time to make a tutorial

  3. The header.php and conx.php are included in the download package hence it doesn’t work. From where to download it or what is included in those files? It isn’t mentioned in the tutorial as well…?

  4. The header.php and conx.php aren’t included in the download package hence it doesn’t work. From where to download it or what is included in those files? It isn’t mentioned in the tutorial as well…?

Leave a Reply

Your email address will not be published. Required fields are marked *