How to convert a javascript string into a html object using jQuery

$(var)

If we want to convert string tag to an html object we can do it using a jQuery function like this.

Javascript:

var stringTag  = '<input type="text" name="nameInput" id="idInput" />';
var htmlObject = $(stringTag);

And we could take this object and use it as an object.
Reference link: http://stackoverflow.com/questions/2522422/converting-a-javascript-string-to-a-html-object

Advertisements

How to check if value is “undefined” in Javascript

TypeOf

If we want to know if the value of a variable is “undefined” in javascript, we can use “typeof” javascript operator. It returns a string and it doesn’t generate an error if the variable doesn’t exist at all.

Javascript:

if( typeof value === "undefined" ){
    // ...
}

And we could define an specific method to check it:
Javascript:

function isUndefined(value){
    return ( typeof value === "undefined" );
}

var varName = "hello";
if( isUndefined(varName) ){
    //do this
}else{
    //do this
}

Reference link: http://stackoverflow.com/questions/10653367/how-to-check-undefined-value-in-jquery

How to get string data of inputs in DataTables rows

DataTables

Sometimes we have some problems to get data from a row in a table specially whe the data is an input tag likes checkbox, radio or text input. With fnGetData() we obtain an array of td’s of the row but in string format.

If we want to obtain all data of some cell of the row in an html format, we have to do this:

Javascript:

$(document).ready(function() {
  //datatable creation
  var oTable = $('#example').dataTable();

  //foreach rows of the table
  $(oTable.fnGetNodes()).each(function(index,elem)){
    var aPos  = oTable.fnGetPosition(this);
    var aData = oTable.fnGetData(aPos[0]);
    
    //we get array of strings
    var tdArray = aData[index];

    //now is the moment to convert our tr and td's tags into html tags
    var nRow = $('#example tbody tr:eq('+index+') td').parent('tr')[0];

    //and if we want to get only all the input tags
    var jqInputs = $('input', nRow);
    
    //and to go directly to an specific input of the row. For example in the cell number 1 this is a input
    var input = jqInputs[1];
    console.log(input);

    //and we have to get all attributes of the input
    console(input.name);
    console(input.value);

    //or using jQuery
    console.log('#' + input.id).val());
    console.log('#' + input.id).attr('yourAttribute');
    console.log('input[name["' + input.name + '"]').attr('yourAttribute');
    //know if input is cheched or not
    console.log('input[name["' + input.name + '"]').is(':checked');
  });
});

 

How to resize columns in datatables using callback method

Datatables

Sometimes we have some problems to configure the aspect of a datatable correctly for different reasons. I would like to you show how to solve it in an standard way.

After the table is loaded, it calls the callback method. And then we have to call to a fnAdjustColumnSizing in order to adjust all the columns in tha table. It’s important to enter only one time in this method. For this reason we have to control it adding an internal flag.

Javascript:

$(document).ready(function() {
  var isTableLoaded = false;
  var oTable = $('#example').dataTable( {
   "bAutoWidth": true, 
   "fnDrawCallback": function( oSettings ){
      if( !isTableLoaded){
           isTableLoaded = true;
           $('example').dataTable().fnAdjustColumnSizing();
      }
   }
  });
});

We can obtain more or less the same effect without calling a callback method but is better the first step:

$(document).ready(function() {
  var oTable = $('#example').dataTable( {
   "bAutoWidth": true
   }
  }).fnAdjustColumnSizing();

//Or

  var oTable = $('#example').dataTable( {
   "bAutoWidth": true
   }
  });
  oTable.fnAdjustColumnSizing();
});

Reference links: http://legacy.datatables.net/usage/callbacks

How to use fonts in your Web Site with CSS and @font-face rule

Embedding Fonts in your Web Site

The @font-face rule allows custom fonts to be loaded on a webpage. Adding @font-face fonts to your Web site is not that difficult.

When you have found/bought the font you wish to use, first, you need to download some @font-face kits. Create a folder named “fonts” and place the myfont.eot and myfont.ttf files into the folder just include the font file on your web server. Then open your style sheet and add the following:

CSS:

@font-face {
      font-family: 'MyWebFont';
      src: url('../fonts/myfont.woff2') format('woff2');
}

Then use it to style elements like this:

body {
      font-family: 'MyWebFont';
}

and it will be automatically downloaded to the user when needed.

  1. Other things to be considered:
    The @font-face rule should be added to the stylesheet before any styles:

    @font-face { 
          font-family: 'MyWebFont'; 
          src: url('myfont.eot'); /* IE9 Compat Modes */ 
          src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
          url('myfont.woff2') format('woff2'), /* Super Modern Browsers */ 
          url('myfont.woff') format('woff'), /* Pretty Modern Browsers */ 
          url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
          url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
    }
  2. To uncheck the checkbox if value is = to a variable for instance “test” you can do this:
    TrueType Fonts (TTF)TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

    OpenType Fonts (OTF)

    OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

    The Web Open Font Format (WOFF)

    WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

    The Web Open Font Format (WOFF 2.0)

    TrueType/OpenType font that provides better compression than WOFF 1.0.

    SVG Fonts/Shapes

    SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

    Embedded OpenType Fonts (EOT)

    EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Reference links: https://css-tricks.com/snippets/css/using-font-face/
http://www.w3schools.com/css/css3_fonts.asp

How to capitalize first char in a String Java

Capitalize first char

In this post I would like to show you how to put the first letter into upper case in Java:

  1. Example:
    This is the method to do it:

    private String capitalizeFirstLetter(final String line) {
       String result="";
       if( result != null){
            result = Character.toUpperCase(line.charAt(0)) + line.substring(1);
       }
       return result;
    }

Reference link: http://stackoverflow.com/questions/1892765/capitalize-first-char-of-each-word-in-a-string-java

How to uncheck checkbox input value or array of input values with jquery

Checkbox input value

In this post I would like to show you how to uncheck input or array of inputs through input value:

  1. Example:
    Insert this input tag into body:

    <body>
       <input type="checkbox" name="cbname" value="test" checked="checked" />
    </body>
  2. To uncheck the checkbox if value is = to a variable for instance “test” you can do this:
    $('input:checkbox[value="test"]').attr('checked', false);
    //or
    $('input:checkbox[value="test"]').prop('checked', false);
  3. To uncheck array of inputs from object’s array or from json array:
    Example:

    <body>
       <input type="checkbox" name="personsName" id="" value="test1" checked="checked" />
       <input type="checkbox" name="personsName" id="" value="test2" checked="checked" />
    </body>


    If we have a json of strings first you have to use JSON.parse to create an object from a string

    var data = [{id: 1, cbvalue:'test1'}, {id: 2, cbvalue:'test2'}]
    var string = JSON.stringify(data)
    var objects = JSON.parse(data)

    Foreach loop and uncheck inputs

    objects.forEach(function(key, index){
      $('input:checkbox[value="' + key.cbvalue + '"]').attr('checked', false);
    });

Reference link: http://stackoverflow.com/questions/4957608/jquery-if-checkbox-value-test-uncheck