Drag and Drop File Upload with jQuery and AJAX

Drag and drop is a simple way to allow users to upload their files by dropping them into 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 a similar type of feature in your project and show a thumbnail when the file is successfully uploaded using jQuery AJAX and PHP.

Drag and Drop File Upload with jQuery and AJAX

Read more

Like unlike using AJAX, jQuery and PHP

Like unlike functionality used in many websites to know the user response to 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 these posts they have like unlike button.

It also has a label that shows how many totals like and unlike gets a post. Whenever the user clicked on a button the value of the label gets changed.

Like unlike using AJAX, jQuery and PHP

Read more

Make Autocomplete Search with jQuery AJAX

Autocomplete search filter display suggestion based on the user input e.g. listing all products which start with the character ‘a’.

It makes easier for the user to search for an item from the list and select it from the suggestion list.

Require jQuery AJAX for implementing this.

Whenever the user enters a character send an AJAX request to fetch records with PHP and display the result.

In the demonstration, I show a textbox to search users. When an item selected from the suggestion list then fetch details of the selected users and display on the screen.

Make Autocomplete Search with jQuery AJAX

Read more

How to Auto populate dropdown with jQuery AJAX

When working with large datasets, auto-populating dropdown lists is a common requirement in web development.

With the help of jQuery AJAX, it’s possible to dynamically fill dropdown lists with data from a server in response to user input.

A common use case of this feature is when selecting a country, state, and city. According to the country selection related state list populates, followed by a list of cities within the selected state.

It enables users to quickly choose their location from a list of options and can enhance the user experience by requiring less manual input.

In this article, we’ll explore how to use jQuery AJAX and PHP to retrieve data from a MySQL database and populate it on the dropdown in a real-time. By the end of this article, you will know how to create dynamic dependent dropdown lists that will enhance the user experience and make web forms much simpler to use.

How to Auto populate dropdown with jQuery AJAX

Read more