Category: Jquery

You can use jQuery AJAX to autocomplete data on the single or multiple elements when the user search or select value from an element.

It is a better way to allow the users to easily search for data in existing records and get required information e.g. get student details by its id, product details, etc.

In the demonstration, I am using jQuery UI to display suggestion list and fetch details using PHP from the MySQL database table when a value from the suggestion list is gets selected.

How to autocomplete data on multiple fields with jQuery and AJAX


QR code is quick response code that has large storage capacity. It is consist of black and white square box that can be read using smartphones or dedicated QR reading devices to gain access to additional information.

This can be used for advertisement, storing web site URL, information, etc.

In this tutorial, I am using the jquery.qrcode.js plugin to generate custom QR code and embed on the web page.

You can adjust its size, background and foreground color with options.

Add QR code to the webpage with jquery.qrcode.js


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


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


Bootstrap provides dozens of custom plugins that helps to create better UI. With this, you can easily add tooltip to the HTML elements.

A tooltip will appear when the user moves the mouse pointer over the element e.g. link, buttons, etc. This gives hint or quick information to the user.

It is helpful for the new visitor to the website to understand the advanced UI and functionality.

Add tooltip to the element with Bootstrap


Html2Canvas is a JavaScript library that provides functionality to take screenshot of the whole web page or specific part.

It technically doesn’t take the screenshot but creates the view based on the available information on the page.

This returns HTML5 canvas element which you can use to show screenshot preview on the screen or create a new image file.

Take screenshot of webpage with html2canvas


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


The pace.js is an automatic page load progress bar. You don’t need to write any code to initialize the script during page load.

It is easy to implement and not dependent on any other external JavaScript libraries.

You can also use this with AJAX request to show the progress bar when the request is been triggered.

Several themes with different-different colors are available that you can use.

Automatic page load progress bar with Pace.js

Javascript Jquery

How To Javascript Jquery

By default, jQuery uses $ as an alias for jQuery because of this reason sometimes it conflicts with other JS libraries if they are also using $ as a function or variable name.

In this tutorial, I show some of the ways by using them you can avoid jQuery conflict with any other JS libraries.

How to avoid jQuery conflict with other JS libraries