gora

Hi, in this post let's see how to add select all options to jQuery Select2 plugin . Select2 is an excellent alternative to the standard HTML selection box that supports all its functions and provides greater flexibility. The plug-in is easy to setup and use. It supports multiple selection options where the selected elements will be added as pills to the top text box. You can also tag, search and load remote data-sets to select2 control. Below we will see how to use select2 in your web projects, and select all options at once by ticking a check box using jquery. How to Use Select2 jQuery Plug-in? To implement Select2 plug-in in your projects, create a regular drop-down box with html markup as usual. HTML: <select id="states" style="width:300px"> <option>Alaska</option> <option>Arizona</option> <option>California</option> <option>Florida</option> <option>Hawaii</option> ...

Content theft is a serious issue faced by many website / blog owners. This can be limited to a certain level by disabling right click on websites. Disabling mouse right-click will prevent the context menu from appearing, there by preventing the page contents from being copied. Although it is not recommended as the best practice, it is certainly feasible. It is very easy to disable the right click on your site using jquery. You can do it at page level or element level. You have to capture and cancel the event inside the event handler. We will see how to do it. jQuery - Disable Right Click Context Menu: You can avoid copying the contents of your website in two ways. One is to disable the right-click context menu altogether and the other is to simply disable the cut, copy and paste operations. 1) To disable the right-click event on the entire web page, use this script, <script type="text/javascript"> $(document).ready(function(){ $(this).on('contextmenu...

Hi! In this post, let's see how to add images to dropdown list using jquery . I had a form with a drop-down element for the list of countries and wanted to insert the corresponding country flag before each country name. But HTML does not support the addition of elements to select box. Then I found some CSS hack but this method is not compatible with all browsers. Finally, I decided to go with java script and found a fairly neat solution. Actually, it is a jquery plugin called 'select2'. It includes the autocomplete feature to dropdown list , but also allows you to add icons to those select options. Below, I'll show you how to use the select2 add-on to insert country flags before the country names in a drop-down list. jQuery - Adding Images to the Dropdown List: STEP-1) First load the 'jQuery' and 'Select2' libraries on the Web page. You need to add both 'css' and 'js' files of the plugin. <link href="https://cdnjs.cloudflar...

How to Create Dynamic Treeview Menu using PHP, MySQL and AJAX? Most modern websites use tree view to display the dynamic sidebar menu for easy navigation. In case you don't know, a Treeview is a hierarchical representation of elements in a tree-like structure. You can go for jquery solution in this context, but I would recommend 'Bootstrap Treeview' plug-in if you use the bootstrap framework to build your websites. The plug-in uses JSON dataset to create a hierarchical tree structure. I have already discussed the creation of static treeview menu using bootstrap treeview . But you can also generate a dynamic tree where you pull off the data elements stored in the database. In this tutorial I'm going to show you about creating dynamic treeview using php, mysql, ajax and bootstrap. How to Create Dymanic Treeview in PHP & MySQL? For the demo, I'm going to load all the required libraries via CDN. So there's no need to download them to your web server. Here...

At times, you may want to update part of a web page repeatedly. Let's say, for example, that you have a website flashing live news or a cricket score update. Here you have to refresh that specific content on a regular basis and ajax is the best way to do it. You are left with two options when you want to fire ajax request at specific time interval - one is setInterval() and the other is setTimeout() function. Both JavaScript functions are good for doing periodic tasks, but one is much better than the other. In this tutorial we will see what is the best approach and how. Fire Continuous AJAX Request using setInterval(): The setInterval() is the common method used for repeated tasks. It executes a function at specified interval in milliseconds. Repeated calls can only be stopped using the clearInterval() method or by closing the window. setInterval(function, milliseconds); Consider the following example. This java script will fire ajax call every 5 seconds to the server a...

Hi! In this post, we will see how to make ajax pagination in codeigniter using codeigniter pagination library . The Pagination class offers feature rich functions to paginate the query results in view. Although the usage of pagination library is well-documented, paginating the results with jquery ajax is somewhat a mystery. The solutions available around the web are too complicated for beginners. Hence I decided to write a tutorial on the topic that is easy enough for anyone to implement codeigniter pagination with ajax. For this example, we'll need two libraries which are jQuery and Bootstrap . The jQuery.js is for making ajax call and bootstrap is for designing the user interface. CodeIgniter AJAX Pagination Example: To create ajax pagination, I'm going to use the default pagination library of the code igniter framework. Simply follow the below steps to implement the same. STEP-1) Create Database First create the required database, table and the records to use in our ...

Hi! Today let's see about creating treeview using bootstrap and jquery . A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap. And I found out a good library called 'Bootstrap Treeview' . It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons , checkboxes and filters etc. Building Treeview with Bootstrap: Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries, Bootstrap CSS jQuery Bootstrap Treeview These libraries are available in the cdn, so you can load them directly on your projects without down...

Hi! In this post, let's see how to autocomplete search from database using codeigniter and ajax . We are going to pull in live search thing something similar to Google search. As soon as you start typing in the textbox, the related suggestions will appear from the database. To implement this auto complete feature we need a jquery plugin called 'Select2'. Select2 is an excellent plug-in that supercharges the regular select box with search functionality . It's really inappropriate to make the end user to skim through hundreds of options to pick just one. With Select2 the entire process is a breeze. It adds up a search filter to the dropdown (select box), thus populating results on fly with the help of ajax. AJAX Autocomplete Search from Database in CodeIgniter: To implement the live autocomplete search in codeigniter, we need two JavaScript libraries, 1. jquery.js and 2. select2.js . Either download them or use from the cdn library just like I do in this demo. Jus...

Hi! Today, we are going to see an interesting tutorial, which is to animate typing effect using jquery typed.js plugin . Not all animations require the skill of a graphics artist. You can pull in some really cool animations just with jquery plugins. jQuery has its share of animation plugins and 'Typed.js' is one among them. It is simple, lightweight and let you add typing effect to web pages. The text will be typed literally character by character thus giving you the impression it is being typed on a terminal. Come, let's see how to implement this typing effect on websites. Adding Animated Typing Effect in jQuery: Typed.js is a jquery library to simulate the terminal typing effect that allows you to print plain text or html as if you were typing on the screen. How to Use it: First create a container to print the string. <div id="container"></div> Then call the function typed() on the container element that we have created and provide the str...

Hi! Today let's see how to print contents of a div using javascript . Have you ever tried printing a web page or part of a page programmatically? There is an interesting utility in JavaScript called print(). It is one of the methods of the 'Window' object and is used to trigger your system's printing feature. In case you want to print part of a page area, the simple solution is to place all the printable content inside a 'div' block and invoke the print action with some user event. Let's see how to do it. Print Contents of a Div in JavaScript: Let's first create a div container to hold the printable part. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Print Part of a Webpage with JavaScript</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr...

Hi! In this tutorial we will see how to submit form using jquery ajax and php without page refresh . Web Development enhanced with AJAX increases speed and performance thereby improving the overall user experience. It allows you to update part of a web page without refreshing it completely. Basically, when you submit an html form, the entire page will be refreshed. But by using ajax technique, you can submit the form to the web server without having to reload the page. Instead, the form data will be submitted to the server in the background and can be processed in any way you want. How to Submit Form using jQuery AJAX and PHP? The jQuery library provides ajax() method which allows you to submit form without refreshing page . It will send an HTTP request to the web server (here is the php script), which is then processed by the server and sends an http response. Let's see how to do it. Step 1) Create a Basic HTML Form First let's create a simple html form containin...

Hi! In this tutorial let's look at the server-side processing of jquery datatables using php, mysql and ajax . In case you don't know, Datatables is an amazing jquery plugin that converts the simple html table into a feature-rich data grid with additional functions like instant search, pagination, multi-column sorting etc. The table works with multiple data sources like DOM, AJAX etc., and supports both client and server side processing. We have already seen about datatables with json data and here we will see about server side processing. For the server script, we are going to use PHP and MySQL as a data source. jQuery Datatables Server-side Processing with PHP and MySQL: Let's see how to fetch records from the server-side using ajax request and list it in the data tables. To use in this example, we need a dummy database. So let's create it first. Step 1) Create MySQL Database The following sql will create a mysql database, a table and some sample records i...

Hi, in today’s post we’ll see How to Read and Parse JSON String in jQuery. JSON is a human readable data exchange format used among web services and it's a necessary skill for modern day web developers (frontend/backend) to deal with JSON data received from various third-party APIs. Keeping that in mind we have discussed about parsing json data using php script sometime back. And now we have come up with this jquery tutorial which walks you through the process of parsing json string using jquery library, convert and display it into an html table. How to Read and Parse JSON String in jQuery? jQuery provides several JSON methods like “getJSON”, “parseJSON”, “stringify” and for this post we’ll pickout and use the method “parseJSON” , which parses through well formed json string and returns javascript object. JSON.parseJSON(JSON STRING) The function parseJSON() takes the string parameter and returns String, Number, Object, Array or Boolean. Using this jQuery method we can ...