Category: Jquery

jQuery is light weight JavaScript library which makes easier to use JavaScript on the web page.

You can perform your action in less code as compared to JavaScript.

This makes simpler to manipulate the HTML documents, traversing, event handling and performing AJAX request.

Compatible with most of the browsers and supports CSS3 selectors to find and style property manipulation.

How to embed jQuery into HTML page



You need to include an external library to embed date picker on the elements with Bootstrap.

It is easy to add on the element like jQuery UI datepicker and have available multiple options, method, and events to control the date picker.

How to add datepicker in Bootstrap


On WordPress, you have noticed that while writing a blog post it will autosave the post as a draft after the specified interval.

In this tutorial, I am creating the similar type of functionality with jQuery and AJAX. Where I check for any value update in input element if it is then set an interval of 5 seconds.

Send an AJAX request to save data when the interval gets completed.

Autosave data after specific time with jQuery and AJAX


Star rating bar gives an option to the user to submit his thoughts whether the content is good or not. This gives the administrator a view how well its item is performing.

It is very common on the e-commerce websites.

In this tutorial, I am using jQuery Bar Rating plugin to display star rating on the screen. Whenever the user changes the rating then send an AJAX request to save the user currently rating status on the MySQL database table with PHP.

5 Star Rating system with jQuery, AJAX, and PHP


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