let run long runing task in background in javascript

So When I am in javascript development I had a long running javascript method which delays page loading. So I wanted to make it run in background to protect responsiveness of application. So I found Differed execution in Jquery.  Using differed execution we can run functions in background and do another stuffs as we want. And we can pass callback function to execute on after finishing the long running function.

Code Sample on jsfiddle

Responsive Mobile menu – mmenu

So I was asked to develop a responsive menu.  When in tablets and mobile’s Sliding menu should be presented. So I came to know about plugin called mmenu from one of my buddy.

more on mmenu

So I created a sample on code pen. It is very handy….

Get query string values from Javascript

So now I am writing here utility function that i am using to get query string values.

Just Passe the query string name and function will return value.

function queryString(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) return "";
else { var x = results[1]; return x.replace(/%20/gi, ' '); }
}

Find Bootstrap screen size in Javascript

Some times we want to know bootstrap screen size from javascript. When I am developing I needed it and Now I am using following function. Calling it I can get bootstrap screen size like “xs”,”md”,”sm”,”lg”

function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];

$el = $('
<div>');
$el.appendTo($('body'));

for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];

$el.addClass('hidden-' + env);
if ($el.is(':hidden')) {
$el.remove();
return env
}
};
}

PopUp window does not close on Update in Kendo grid

So very recently I had to work with Kendo UI library. It is an amazing library. It has actually amazing UI controls.   I like very much to Grid control in kendo UI. It has tremendous features including grouping, filtering sorting inline and popup editing.

But in the development I got error when doing popup editing in kendo grid after the editing done popup is not closed. I searched more. I applied several solutions given by telerik team and others.

Finally I came up with a solution as below. It works fine..

$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: true,
columns: [
{ field: "productName" },
{ field: "category" },
{ command:"edit"}
],
editable:"popup",
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
save: function (e) {
var this= this;
this.refresh();
}
});

Function in save event give the solution.

 

Amazing select box using sumoselect

I just came across amazing ui Controll. SumoSelect . It is very simple and easy to use.

Can get more from

Sumo Select

It converts multiple select boxs to amazing Multi select drop down box.

I did a sample

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….

Run multiple AJAX requests in parallel

Some times it is best idea to issue multiple Ajax request in parallel. Without waiting one request to be completed we can issue multiple request using jquery when method

$.when($.get('files/1.json'), $.get('files/2.json')).then(function(r1, r2){
log(r1[0].message + " " + r2[0].message);
});