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
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
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');
});
});
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
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.
@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 */ }
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
In this post I would like to show you how to put the first letter into upper case in Java:
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
In this post I would like to show you how to uncheck input or array of inputs through input value:
<body>
<input type="checkbox" name="cbname" value="test" checked="checked" />
</body>$('input:checkbox[value="test"]').attr('checked', false);
//or
$('input:checkbox[value="test"]').prop('checked', false);
<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
A common use of JSON is to read data from a web server, and display the data in a web page:
<head>
//download this js from "http://jquery.com/download/"
<script src="js/jquery.min.js"></script>
</head>JSON.stringify to create a string from a object
var data = [{id: 1, name:'personsName'}, {id: 2, name:'personsName2'}]
var string = JSON.stringify(data)JSON.parse is to create an object from a string
var data = [{id: 1, name:'personsName'}, {id: 2, name:'personsName2'}]
var string = JSON.stringify(data)
var objects = JSON.parse(data)Foreach loop
objects.forEach(function(key, index){
console.log(key.id);
console.log(key.name);
});
Reference link: http://stackoverflow.com/questions/23068875/parse-json-array-in-jquery-in-foreach-loop
marcalbert 