Category: AJAX

The infinite page scroll you have seen on the social networking sites – Facebook, Twitter or on e-commerce websites where the new content is automatically loaded when scrolling down to the web page.

For implementing this functionality using jQuery to detect page scroll when the user reaches the end of the web page then send an AJAX request to load new content.

Load content on page scroll with jQuery and AJAX

AJAX Jquery PHP

For upload file with AngularJS need to send the file by $http service and with the use PHP store the requested file to the server and return a response.

In the demonstration, I am creating two examples –

  • In the first, using JavaScript to select file,
  • And in the second, using custom directive

Then pass it as data in $http service for upload.

Upload file with AngularJS and PHP

AJAX AngularJS

When working with multiple AJAX requests at that time its hard to detect when will be all request is being completed.

You can use the setTimout() method which will execute your action after your given time. But it is not a better solution.

jQuery have inbuilt AJAX event handler that helps you in this situation.

Detect when all AJAX requests are complete - jQuery

AJAX Jquery

AJAX Jquery

This usually occurs when the user already submitted data and tries to refresh the page. In this case, the browser will attempt to POST the page again.

If you do not perform any action then a new duplicate record inserted on the MySQL Database table.

In this tutorial, I show some of the ways which you can use to avoid it.

Prevent page from submit on refresh in PHP

AJAX Jquery PHP

When you send AJAX request to fetch the long list of data from the server then it may take some time to process your request and return.

During this case, at the user end, there is no change is being displayed and it doesn’t know either its request is in progress or not. If the user is on the slow network then its take some more time.

You can display a loading Text message on the screen or show an image loader.

In this tutorial, I show you How to display loading image when you are making AJAX request. But you can do the same with Text message.

Display loading image when AJAX call is in progress

AJAX Jquery

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