Bootstrap loading effects in button

It is nice to show loading behavior to user and let user no something is happening which take some time and avoid touching UI.

In bootstrap it is very simply task.

I think it might help you

$(this).button(‘loading’) shows loading text in button. we tell this to bootstrap by using data-loading-text=”Loading…” 

When finishing our long runing logic we can call

$(this).button(‘reset’);

This will bring button to original state.

Bind javascript array or object to html drop down in Jquery

So when we are in developing we have to populate dropdown box with javascript objects. Some times we have to write more dirty codes to do that.

I am using following Jquery function to populate dropdown box with javascript array or object.


//element=> html select element id,
//source=> javascript array
//showDefault=> show default --None-- : optional
//defIndex=> default selected index : optional
function bindCombo(element, source, showDefault, defIndex) {
var k = (typeof element == "string") ? $("#" + element)[0] : element[0];
k.options.length = 0; var r = 0, j = source.length;
if (showDefault) { k.options[0] = new Option("--None--", "-1"); r = 1; }
if (j > 0) {
if (typeof source[0] == "object") { for (var i = 0; i < j; i++) { k.options[i + r] = new Option(source[i].Value, source[i].Id); }; }
else { for (var i = 0; i < j; i++) { k.options[i + r] = new Option(source[i], source[i]); }; }
if (defIndex) $(k).val(defIndex);
}
}

So if we want to bind following array to drop downbox simply we can add html attribute as below and call the above function

<select id=”test”></select> 


<b>var arr = ["one","two"];</b>

<b>bindCombo('test',arr,false,false)</b>

Now it will be populated.

More over we can bind list of following object

 function Pair(Id, Value) {
this.Id = Id;
this.Value = Value;
   }
var arr=[];
arr.push(new Pair(1,first));
arr.push(new Pair(2,second));

bindCombo('test',arr,false,false)

Further we can provide whether to show default “–None–” or set selected index using ending two parameters in function. Just only pass true or false.

json date to javascript date

json date string comes like below.

“/Date(1238540400000)/”

While I was developing I wanted convert into javascript date and get date in “mm/dd/yyyy” format.

The I am using below function to get it done.


function parseJsonDate(jsonDateString) {

var date; var newDate;
if (jsonDateString) {
date = new Date(parseInt(jsonDateString.replace('/Date(', '')));
newDate = date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();

 return newDate;
 }
}

I think this might help you….

second argument to the $() function

What does second argument of $() function in jquery.

The second argument is context to limit the search

Suppose we have html like below

<ul id="firstList">
	<li>one</li>
	<li>two</li>
	<li>three</li>
</ul>
<ul id="secondList">
	<li>blue</li>
	<li>green</li>
</ul>

if we want to go through the li only under the firstList div we can use $() function’s second argument as below.


$('li','#firstList').each(function(){
console.log($(this).html());
});

 

Define an exists() function in Jquery

When we are in web development we have to check element is exist using Javascript. Below way we can check it.


console.log($('#elem').length == 1 ? "exists!" : "doesn't exist!");

But it can be cumbersome

So we can define a Jquery function as below


jQuery.fn.exists = function(){ return this.length > 0; }

console.log($('#elem').exists() ? "exists!" : "doesn't exist!");

Is it nice?…