Category: AJAX

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.

In this tutorial, I will show you with two examples, to 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

How to check Broken Image with jQuery and AJAX

 

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

You can send JavaScript Array as data in the AJAX request which generally require when need to send a group of related values e.g. pass all checked checkboxes values.

In the demonstration, I will initialize JavaScript Array with all checked checkboxes values and send it as AJAX data.

How to Send JavaScript Array to the AJAX using jQuery and PHP

AJAX Jquery PHP

JSON stands for JavaScript Object Notation, it is a data interchange format which is also been used to passing data from the server.

It is best and effective way to return data when you want to return multiple values as a response from AJAX.

You couldn’t directly return an array from AJAX, it must have converted in the valid format.

In this case, you can either use XML or JSON format.

In the tutorial demonstration, I will return an array of users from AJAX, while return converts the array into JSON format using the json_encode() function in the PHP.

On the basis of response show data in tabular format.

Return JSON response from AJAX using jQuery and PHP

AJAX Jquery PHP

In this tutorial, I will show another type of pagination which has Load more button for loading new content.

This type of pagination you have seen on many websites or in mobiles apps.

When the users get clicks the load button, the next list of data is being fetched and append it to the last of existing structure.

What in the demonstration?

For demonstration, purpose I am showing the list of posts when all posts are being displayed on the web page then show the Hide button instead of Load more.

Hiding all posts except the first 3 posts when the hide button gets clicked.

Load more results with jQuery,AJAX, and PHP

AJAX Jquery PHP

Drag and drop is a simple way to allow the users to upload their files by dropping to the container. Nowadays most websites allow uploading using both drag and drop and the file browse e.g. PushBullet, Facebook, SlideShare, etc.

I am using AJAX to save the file to the server which triggers when the file dropped on the target container.

In this tutorial, I show how you can implement the similar type of feature in your project and which show thumbnail when the file successfully uploaded.

Drag and drop file upload with jQuery and AJAX

AJAX Jquery PHP

Like unlike functionality used in many websites to know the user response on their content or article.

In this tutorial, I will add like and unlike buttons within the content and handle with jQuery and PHP.

In the demonstration, I will show the list of posts within this posts they have like and unlike button. It also has a label which shows how many like and unlike get by a post. Whenever user clicked on a button the value of label gets changed.

Like unlike using AJAX, jQuery and PHP

AJAX Jquery PHP