Category: AJAX

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 where we have required 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.

In this tutorial, I show How to use jQuery AJAX to implementing this.

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.

AJAX Jquery PHP

We generally require sorting feature in the Table layout when there is many columns or lots of data.

In this tutorial, I show you How you can implement it using AJAX and PHP within your project.

In the demonstration, I am creating a table layout which shows the list of employees and adding click event in header column. Within click, calling a function in which passing column name as an argument and sending AJAX request.

AJAX Jquery PHP

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