typescript-vs-es6-vs-es2015

https://www.excella.com/insights/typescript-vs-es6-vs-es2015

Advertisements

Can not find element using id having special character in jQuery ?

If you have special characters (!”#$%&'()*+,./:;?@[\]^`{|}~) in your HTML element’s name or ID then it can not be find using jQuery find method.  You have to escape the character with two backslashes \\.

For example, if you have an element with id=”foo.bar”, you can use the selector $(“#foo\\.bar”)

// Does not work:
$( "#some:id" )
// Works!
$( "#some\\:id" )
// Does not work:
$( "#some.id" )
// Works!
$( "#some\\.id" )

 

 

 

What is the difference between attributes and properties in HTML/JAVASCRIPT ?

The difference is that,  the  prop  method deals with properties defined by the Dom  ApI  HTMLElement  object,  rather than attributes defined by the  htmL element in markup.

Often,  the attributes and properties are the same,  but this isn’t always the case.  A simple example is the  class  attribute,  which is represented in the  HTMLElement  object using the  className  property.

In general,  the  prop  method is the one you should use because it returns objects that are easier to work with than attribute values.

Programming is Easy !!!!

How to disable the button and change text to processing while the page is processing?

As we know that a button behaviour is submitting the data, If we click multiple times on a button then form data submits multiple times and makes repetitive entries in the database which is wrong. To prevent multiple entry we can follow the following simple solution.

1) On very first click we will disabled the button using any client side scripting language.

2) we can also change the text like “Processing…” etc… if needed.

3) On completion the task we will enable the button and change the text to old one.


function DisableButton() {
    $("#btnSubmit").attr("disabled", "disabled");
    $("#btnSubmit").attr('value', 'Processing...');
}

//We will call this method on client side using onClientClick event.  
<asp:Button runat="server" ID="btnSubmit" ClientIDMode="Static" 
Text="Submit" OnClick="btnSubmit_Click"  OnClientClick="DisableButton();" />
						

Here button will cause the page postback so the button will get the enabled and the text will change the same as before. If your button does not cause the page postback then we need to enable the button on the task completion in our scripting code.

function EnableButton() {
    $("#btnSubmit").removeAttr("disabled");
    $("#btnSubmit").attr('value', 'submit');
}					

Programming is Easy..

How to load jQuery locally when CDN fails?

As per my last article What is a CDN?, we have seen that how using a CDN to delivery our CSS and Javascript we can speed up our page loading time.

Now let suppose in case CDN is down then our jQuery will not load and some of our website features will no longer work. So we need a way to load a local jQuery file if for some reason CDN jQuery fails to load.

Below given script code checks whether jQuery is loaded from Microsoft CDN or not, if not then it references the jQueryfile from your local folder.


<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

//If jQuery not loaded from CDN, then load from local folder
if (typeof jQuery == 'undefined') {
     document.write(unescape("%3Cscript src='jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E")); 
}

//Now, jQuery will be always available to use even if CDN fails
function test()
{
     alert($);
}

</script>

</head>
<body onload="test()">
<h1>Test page...</h1>
</body>
</html>

Programming is Easy…

What is a CDN?

“CDN- Content Delivery Network is a network of geographically dispersed servers which delivers cached content of a site like the images, CSS/JS files and other structural components from websites to end users based on the geographic location of the user.”

The goal of a CDN is to serve content to end-users with high availability and high performance.

Normally when a user comes to your website, they are redirected to your web host’s server. Your web host’s server which located at a central location let say in India. So every user on your website is accessing this one server to view your website. Now if you have high volume of traffic, then you can overload your server which leads to a slow loading site or even server crash. This is where a CDN comes in handy because it is a network of servers, but most importantly these servers are spread through out the world. When you use a CDN, your static content is cached and stored on all of these servers. Static content includes images, stylesheets (css files), javascripts, Flash, etc. Now when a user visits your site (original server), the CDN technology redirects them to the closest server to their location.

For example: If your main server is hosted in India, and someone from Durham, England tries to access it, then they will be redirected to the closest server which may be in London. This reduces latency and provides a faster loading of your website.

CDN

CDNs not only ensure a faster experience to your users, but they also help to prevent site crashes in the event of traffic surges – CDNs help to distribute bandwidth across multiple servers, instead of allowing one server to handle all traffic.

Why do I need a CDN? – 

The most important reason for using a CDN is to improve your user’s experience in terms of speed.

  • It increases the parallelism available –>Most browsers will only download 3 or 4 files at a time from any given site.
  • It increases the chance that there will be a cache-hit–> As more sites follow this practice, more users already have the file ready.
  • It ensures that the payload will be as small as possible–> Google can pre-compress the file in a wide array of formats (like GZIP or DEFLATE). This makes the time-to-download very small, because it is super compressed and it isn’t compressed on the fly.
  • It reduces the amount of bandwidth used by your server–>Google is basically offering free bandwidth.
  • It ensures that the user will get a geographically close response–> Google has servers all over the world, further decreasing the latency.

There are several scenarios when you might not want to use  CDN:-

  • When you are building an intranet application where the webserver is hosted on the same network as the clients.–> If you use CDN ,you will be making a call to the internet rather than a webserver on the local network. This increases bandwidth for your organization, and is slower.
  • When you want to run your application offline
  • When you need to customize it
  • etc…

Following are the three popular jQuery CDNs-

  1. Google
  2. Microsoft
  3. jQuery

Below is the code to load jQuery from all 3 CDNs.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>

For more info please visit- http://gtmetrix.com/why-use-a-cdn.html

Programming is Easy…

How to create mouse over menu without jQuery/Javascript in HTML?

Sometime, we need to display a mouse over menu like in grid to edit/delete rows etc…
It can be done easly by just creating required menu options and set default display style to none and show menu on item’s/rows mouse over in css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse over menu using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .itemsContainer
        {
            border: 1px solid red;
            height: 300px;
            width: 600px;
        }

        .item
        {
            height: 100px;
            width: 100px;
            float: left;
            margin: 10px;
        }

        .itemsContainer .item:nth-child(odd)
        {
            border: 1px solid green;
            background-color: gainsboro;
        }

        .itemsContainer .item:nth-child(even)
        {
            border: 1px solid gold;
            background-color: lavender;
        }

        .menu
        {
            list-style-type: none;
            margin-top: 0px;
            margin-left: 15px;
            display: none;
        }

            .menu li a
            {
                color: red;
                text-decoration: none;
            }

        .itemsContainer .item:hover .menu
        {
            display: block;
        }
    </style>
</head>
<body>
    <div class="itemsContainer">
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Programming is easy….

How to create auto height column using div

Sometime, we need to create a table using div tags. It can be done easly by just creating a continer div(that will be a continer for all columns) and add required child divs(i.e that will be treated as a columns) and set the child div’s(i.e column) style float to left.

It works great if column’s height are fixed and there is no requirement for column’s content change, but when column’s content increase/decrease dynamically then it becomes very difficult to manage all column’s heights. I had spent a whole day to manage all column’s heights using jQuery/JavaScript.

But later, I comes to know that it can be done easly using only CSS 🙂 (i.e no need any script).
It can be done as:-
1) Create a container div and set its style “display:table;”
2) Create child divs for columns and set these style “display:table-cell;float:left;”


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Auto height columns using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .table
        {
            display: table;
            border: 1px solid red;
        }

        .col
        {
            display: table-cell;
            width: 200px;
            height: 300px;
            border: 1px solid red;
            vertical-align: top;
        }

        .col_1
        {
            background-color: antiquewhite;
        }

        .col_2
        {
            background-color: aqua;
        }

        .col_3
        {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="col col_1">
            <textarea rows="5" cols="20">This is first column.</textarea>
        </div>
        <div class="col col_2">
            <textarea rows="5" cols="20">This is second column. </textarea>
        </div>
        <div class="col col_3">
            <textarea rows="5" cols="20">This is third column. </textarea>
        </div>
    </div>
</body>
</html>

Programming is easy….

 

Asynchronous requests in jQuery

As per my last post (What is Ajax ?), we have seen that the base of each asynchronous request is XmlHttpRequest object.

Now, Let’s look at the equivalent jQuery code for make synchronous and asynchronous requests.

jQuery offers an .ajax() method and various shorthands for accomplishing common tasks using AJAX.
Here’s the jQuery code:

 

$.ajax("google.com") // issue a 'GET' request to fetch google.com's home page
 .done(function(data) { // success handler (status code 200)
 console.log(data);
 })
 .fail(function(xhr) { // error handler (status code not 200)
 console.log("Error occurred: ", xhr.statusText);
});

The first line specifies the URL from which you want to request data. The code then specifies the callback
functions for the success and error conditions (jQuery takes care of checking for readyState and the status code).
Here we have not specify the type of request (GET) or whether it is asynchronous or not.
This is because jQuery uses GET by default and $.ajax() is asynchronous by default.
We can override these parameters (and more) to fine-tune your request:

 

$.ajax({
	url: "www.xyz.com",
	async: true, // false makes it synchronous
	type: "GET", // 'GET' or 'POST' ('GET' is the default)
	done: function(data) { // success handler (status code 200)
		console.log(data);
	},
	fail: function(xhr) { // error handler (status code not 200)
		console.log("Error occurred: ", xhr.statusText);
	}
});

For more info please visit:- http://api.jquery.com/jquery.ajax/

Note:- .done() and .fail() were introduced in jQuery 1.8. If you’re using an older version of jQuery, use .success() and .error(), respectively.

 

Programming is easy…