Category Archives: JS

How to remove options from select using jQuery

by

We  can sort an array using this method:

  1. This is the select (HTML): 
    <select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>
  2. How to remove the items. Just do: 
    //Deleting all the items with value equals to 'X':
$("#selectBox option[value='X']").each(function() {
    $(this).remove();
});
    //Or:
$("#selectBox option[value='X']").remove();

Reference link: http://stackoverflow.com/questions/375508/removing-an-item-from-a-select-box

How to sort an array of objects with javascript

by

We  can sort an array using this method:

  1. This is the method to sort the array: 
    var array = [(name, artist),(name, artist),(name, artist)];

function SortByName(a, b){
  var aName = a.name.toLowerCase();
  var bName = b.name.toLowerCase(); 
  return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
}
  2. How to sort the array with data? Just do: 
    var arr = [{name:'bob', artist:'rudy'},{name:'johhny', artist:'drusko'},{name:'tiff', artist:'needell'},{name:'top', artist:'gear'}];
array.sort(SortByName);

Reference link: http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript

jQuery form autofill

by

Simply autofill an empty form using JSON data:

  1. We need a form: 
    <form id="f">
    name <input type="text" name="name">
    email <input type="text" name="email">
    love jQuery
    <input type="radio" name="lovejquery" value="yes"> yes
    <input type="radio" name="lovejquery" value="no"> no
</form>
  2. and data: 
    var data = {
    "name": "John Doe",
    "email": "johndoe@mail.com",
    "lovejquery": "yes"
}
  3. How to autofill the form with data? Just do: 
    $("#f").autofill( data );

Reference link: http://labs.creative-area.net/jquery.formautofill/doc/

How to convert an HTML Table into a JSON Object

by

Table-to-JSON

A jQuery plugin that converts an HTML Table into a javascript object. Great for working with user-editable tables or accessing output from 3rd party tools.:

  1. JavaScript files needed:

    Insert these scripts into <head> tag:

    <head>
   //download this js from "http://jquery.com/download/"
   <script src="js/jquery-1.9.1.min.js"></script>

   //download this js from "https://github.com/lightswitch05/table-to-json/blob/master/lib/jquery.tabletojson.min.js"
   <script src="js/jquery.tabletojson.min.js"></script>
</head>
  2. Basic Usage JavaScript code:

    <head>
   //Insert this script into <head> tag:
   <script>
      //Basic Usage
      var table = $('#example-table').tableToJSON();
   </script>
</head>
  3. Advance Usage JavaScript code: 
    <head>
   //Insert this script into <head> tag
   <script>
      //Ignore first column (name)
      var table = $('#example-table').tableToJSON({
        ignoreColumns: [0]
      });
   </script>
</head>
  4. Example:
    First Name Last Name Points
    Jill Smith 50
    Eve Jackson 94
    John Doe 80
    Adam Johnson 67 
    HMTL
<table id='example-table'>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th data-override="Score">Points</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td data-override="disqualified">50</td></tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td></tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td></tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td></tr>
  </tbody>
</table>
  5. Result of the example:

    <script type="text/javascript">
  // Basic Usage
  var table = $('#example-table').tableToJSON();
  // table == [{"First Name"=>"Jill", "Last Name"=>"Smith", "Score"=>"disqualified"},
  //           {"First Name"=>"Eve", "Last Name"=>"Jackson", "Score"=>"94"},
  //           {"First Name"=>"John", "Last Name"=>"Doe", "Score"=>"80"},
  //           {"First Name"=>"Adam", "Last Name"=>"Johnson", "Score"=>"67"}]

  // Ignore first column (name)
  var table = $('#example-table').tableToJSON({
        ignoreColumns: [0]
  });
  // table == [{"Last Name"=>"Smith", "Score"=>"disqualified"},
  //           {"Last Name"=>"Jackson", "Score"=>"94"},
  //           {"Last Name"=>"Doe", "Score"=>"80"},
  //           {"Last Name"=>"Johnson", "Score"=>"67"}]
</script>

Reference link: http://lightswitch05.github.io/table-to-json/

JavaScript libraries comparison

by

JavaScript Libraries

JQuery Mootols Minified Zepto

Size Comparison

Name Legacy IE Support Compiled Size Compiled and GZip’d
minified-web.js yes 9.1kb 4089 bytes
minified-web.noie.js no 7.7kb 3429 bytes
jQuery 1.10.2 yes 91kb 32kb
jQuery 2.0.3 no 82kb 29kb
MooTools Core NoCompat 1.4.5 yes 88kb 29kb
Zepto.js 1.0 no 27kb 9.7kb

Feature Comparison

Feature Minified jQuery MooTools Zepto.js
CSS Selector yes

CSS1 or browser engine
 yes

CSS3 subset + extensions
 yes

CSS3 subset + extensions
 yes

browser engine
CSS Style Changes yes yes yes yes
CSS Class Changes yes yes yes yes
Element Creation yes yes

HTML-strings only
 yes yes

HTML-strings only
Element Cloning yes yes yes yes
DOM Manipulation yes yes yes yes
Animation (numeric) yes yes yes yes

CSS transitions only
Animation (color) yes no yes yes

CSS transitions only
Events yes yes yes yes
DOMReady yes yes yes yes
Ajax/XHR yes yes yes yes
Promises/A+-compatible yes yes no no
JSON yes yes yes yes
Cookies yes no yes no
Form Serialization no yes no yes
Array Helpers (Iteration) no

will be in Util module
 yes yes yes
AMD support yes yes no no
Online Builder yes

modules and functions
 no yes

modules
 no
Internet Explorer 6-8 compatible yes

IE-support optional
 yes

jQuery 1.x only
 yes no

 

Reference link: http://minifiedjs.com/