Category: AJAX

If you know how to send jQuery AJAX request in Core PHP then it is simpler for you to do it in CodeIgniter.

In CodeIgniter, you can use the controller and model to handle AJAX call instead of creating the separate file. Make AJAX call either from the view or external script file.

In this tutorial, I am creating a simple example to demonstrate the AJAX calling in CodeIgniter.

How to Send AJAX Request In CodeIgniter

AJAX Jquery PHP

Load more pagination allows the users to load new content on a button click. This appends new content with existing contents.

It is the type of infinite pagination where the user has to click the action button to view new records. This load data until records are available.

In this tutorial, I am implementing this functionality on a page with AngularJS and PHP.

Load more pagination with AngularJS and PHP

AJAX AngularJS PHP

The autocomplete functionality shows the suggestion list according to the entered value. The user can select a value from the list.

With jQuery UI you can easily add autocomplete widget on the input element. Navigate to the suggestion list either by mouse or keyboard arrow keys.

It has the various options that allow us to customize the widget.

You can fix the suggestion source value while initializing in this case whenever the user typed any character then it searches the value within the given source value or you can make it dynamic with AJAX.

In the demonstration, I am implementing this on an element which shows the user’s name list according to the entered value with AJAX.

jQuery UI autocomplete with PHP and AJAX

AJAX Jquery PHP

AJAX is use to communicate with the server to perform the action without the need to refresh the page.

You can either handle AJAX requests on the same page or on the separate page.

In this tutorial, I show how you can send and receive AJAX requests on the same page.

How to handle AJAX request on the same page - PHP

AJAX Jquery PHP

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