Prevents texts being selectable in Jquery

So in some situations it is needed to prevent user from selecting text in web page.

So it will play nice in some situations like drag and drop.

So it can be done using Jquery.


$('p').attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);

Code pen

Client Side Form validation in ASP.NET MVC

Client side form validation increases User friendliness. User doesn’t want to wait for page refresh and see form validation errors.

In ASP.NET MVC we can validate using Data Annotation. So we can use these validation to client side validation. No more huge validation codes.

We can use Jquery validation plugin comes with ASP.NET MVC. This bundle is not referenced in _layout.cshtml by default. We have to add it manually.

Watch youtube video 

Download source code

 

jQuery ajax only works in IE when the IE debugger is open

It was very annoying. Ajax request not works perfectly in IE. But when developer tool is opened ajax quires are works fine. It was very cumbersome . It happened because IE chache Ajax requests. When Developer tool opened it is always refresh from server.

I get this fixed by making cache false in ajax request.


$.ajax({
type: "GET",
url: url,
dataType: "html",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({}),
cache: false,
success: function (r) {
}
});

I think it might help you.

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

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
}
};
}

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.