Category: JQuery

You can easily enable date selection to the form element using Bootstrap datepicker if you are already using Bootstrap in your page.

You need to add external Bootstrap datepicker library.

This allows the users to select any from the datepicker and they are not restricted.

To restrict the date selection you can use startDate and endDate option while initializing it on the HTML element.

Bootstrap Datepicker start and end date validation


AJAX How To JQuery PHP

A tooltip is used to display quick information about the element and it is easy to add to the element using Bootstrap.

You can specify your text or HTML content using title option.

Within the tooltip, you can show content dynamically using jQuery AJAX. For this require defining an Anonymous function to handle AJAX request and get the content.

Dynamically load content on Bootstrap Tooltip with AJAX


Enable disable functionality gives the administrator more control on the site.

The administrator can directly control the users from its dashboard by either restrict access to some area of the site or enable disable the user.

This is very efficient when there are multiple types of the user exists on the site e.g. admin, student, professor, etc.

In this tutorial, I am using jQuery AJAX for this and creating an extra field on the MySQL table.

How to Restrict User Access on the Website with jQuery AJAX


By enabling the social login on the website it is easier for the user to easily register or sign in on the website without entering its details.

In this tutorial, I am adding LinkedIn Login on the webpage.

LinkedIn provides a very simple JavaScript API for developers to fetch the user details after successfully authorization and use it for registration or login.

How to Login LinkedIn with JavaScript API

How To Javascript JQuery PHP

Dynamically dependent dropdown commonly seen in the country, state, and city selection on the webpage. The data on the child element changes according to the value of the parent element.

The process follows the same way if there are more than 2 dropdown elements.

To do this you can either use only PHP or jQuery AJAX.

In this tutorial, I am using jQuery AJAX to make dynamic dependent dropdown.

Dynamic dependent dropdown in CodeIgniter with AJAX


Bootstrap Modal is a popup box which is customizable and responsive.

It can be used in many different ways – display login or registration form, terms and conditions, information, image etc.

In this tutorial, I am using AJAX to update user information on the Bootstrap Modal according to the requested data.

Dynamically load content in Bootstrap Modal with AJAX


Zip file creation is a better way to enable the user to download multiple files in one package. This may affect the page load time according to the number of files and their size.

Arises more problem when need to create multiple zip files on page load for download.

To avoid this type of problem you can either use only PHP or jQuery AJAX to create and download the zip file when it’s required.

In this tutorial, I am using jQuery AJAX.

Create and download zip file with AJAX


If you are allowing the user to delete the list of records and they are more in numbers then it will hard for the user to delete the specific record one by one and consumes more time.

To make it easier you can allow multiple selections of records and delete all selected list either with the only PHP or with jQuery and AJAX.

In this tutorial, I am using jQuery AJAX to remove records.

Delete multiple selected records with jQuery and AJAX


When uploading the image with Dropzone then it will create a thumbnail of it for preview but it will show a blank thumbnail while uploading the non-image file like – text, word, pdf files.

This will be handled by using the dropzone option where check the image type and define the new default thumbnail image.

How to change thumbnail for non-image file - Dropzone