Category: AJAX

There are many things you can do with AJAX to improve the user experience, for example, Add, edit or delete the record and update layout without reloading the page.

Deleting record only using PHP

If you have never used AJAX for deleting before then you either passing the id with $_GET or $_POST methods. Deleting the record when the value is get set.

This works and removes the record but it reloads the page every time.

In this tutorial, I show you How to remove the record from MySQL Table with jQuery AJAX.

What in the demonstration ?

In the demonstration, I am creating the HTML table which shows the list of records with a delete button. When the button gets clicked then removing record and HTML table row with fadeOut() effect.

How to Delete Record from MySQL Table with AJAX

AJAX Jquery PHP

Have you ever think to make Live Editable Table that allows your users to quickly modify content and save it.

If you are not using live editing on your web page then you send the user to Edit form page every time when it wants to update its data and after saving take back it to the List page.

This is a time-consuming process and not very user-friendly.

You can do this with jQuery AJAX.

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

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

Make Live Editable Table with jQuery AJAX

AJAX Jquery PHP

You already know that in HTML there is no search option in the dropdown element. When you press any single key on the dropdown then it takes you to the option but not allows you to search whole or particular string.

There are many jQuery plugins which do this for you.

But in this tutorial, I am not using any jQuery plugins for implementing it.

When it’s required?

This kind of feature generally requires when we have the long list of options in the Select element and want to make an easier navigation for users.

By this way, you enable user to search option on dropdown

The most common example is Country Dropdown which you have seen on many websites when you go for Registration.

What in the Demonstration ?

Creating a simple form which also contains a drop-down element. When the dropdown gets clicked then showing the Search Box and according to the input show suggestion.

Make a Dropdown with Search Box using jQuery

AJAX Jquery PHP

On your Client-side with jQuery, JavaScript you cannot delete any files. You need to use Server-side scripting for doing it.

In PHP, you can simply use unlink() function this removed a file from your server if it exists.

Sometimes you have the requirement to delete a resource file without reloading the page. This cannot total done with PHP you need to use jQuery or JavaScript with it by which you need to send AJAX request to your server for removing a file and according to the response make changes on your Client-side.

What in the demonstration ?

For demonstration purpose, I create a number of <img> element with Delete Button. When the Button gets clicked then removing the file using jQuery AJAX and replace the <img> source with the default image.

How to delete file with jQuery AJAX

AJAX PHP

If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.

This saves your time when you need to add the same line of code in several files.

But what when you are not using Server side scripting within your project.

For solving your problem you can use <iframe > which simply add another page in your file but I don’t think it is a better way.

You can handle this on your Client-side with jQuery.

There are two ways in jQuery for including one file to another HTML file –

  • AJAX request
  • .load() method

How to include HTML page with jQuery

AJAX Jquery

The images which are wouldn’t successfully load on the web page will show nothing when the source does not exist.

It looks bad when there are many images and some of them are missing.

For solving this you need to look through all the pages and find the broken images and fix them manually time to time. It is the time-consuming process.

What in the demonstration?

I show you with two examples, How you can automatically detect the broken images and replace with another image.

  • In the first one, I am using the jQuery, and
  • In the second, using AJAX with jQuery

AJAX Jquery

There are many cases when require to update certain part of the web page on the regular basis.

For example – showing live cricket or football score, display latest news feeds,etc.

There are two ways to send AJAX request on specified time –

  • By setInterval() and
  • By setTimeout() JavaScript functions.

Both do the same work but they are reliable for certain cases, which I discuss in this tutorial.

How to fire AJAX Request on Regular Interval

AJAX Jquery PHP

With sorting the list it is easier for the user to locate items in a sorted list than unsorted. It rearranges the data in specific order (ascending or descending).

You can either use PHP or AJAX to get the sorted data.

I am using AJAX to sort the list in this tutorial.

In the demonstration, I am displaying the employee’s list and attach click event on the table column header. Whenever header gets clicked then send an AJAX request with column name to sort with.

Sorting the Table by clicking Header with AJAX

AJAX Jquery PHP

A tooltip is a small pop-up element which shows information when moving the mouse pointer to the element. You can dynamically update the tooltip content with AJAX if you don’t want to fix the content while creation.

You can add the tooltip to the element with Bootstrap, jQueryUI, or any other library.

I am using jQuery UI library in the tutorial.

In the demonstration, I am displaying the list of users and dynamically load information on the tooltip with AJAX on mouse hover.

Dynamically show data in the Tooltip using AJAX

AJAX Jquery PHP

By adding file upload to the project, there may case arrives where you have to check image width and height before upload if you only allowed image files for uploading.

This is very common in Job Application Forms where the user has only can upload its profile photo of given dimensions other it’s not uploaded.

In this tutorial, I explain you with an example how to implement it. For uploading, I am using AJAX and PHP and done restriction with JavaScript.

How to Validate Image width And Height Before Upload Using JavaScript

AJAX Javascript Jquery PHP