|
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
by
·
No comments
:
14 jQuery Modal Dialog Boxes
by
·
No comments
:
Let's Make Some Maps In JQuery
|
by
·
No comments
:
Modernizr and Polyfilling
Recently I have come across a question about the HTML5 feature support by different browsers. How you make sure that the application render properly in non-supporting browsers?
Answer for above question is the proper usage of Modernizr and Polyfilling.
Polifill is a code block that mimics the functionality of an API by providing fallback functionality to older browsers. For example, LocalStorage introduced in HTML5 is not supported in IE7; but we can use a Polifill to implement the LocalStorage support in IE7.
Modernizr is a JavaScript library that detects HTML5 and CSS3 feature supports in user’s browser. Using Modernizr conditional statements, we can define the new features for supporting browsers and another code block for non-supporting browsers.
Modernizr along with Polyfill help the UI developer to address the non-supporting browsers.
Answer for above question is the proper usage of Modernizr and Polyfilling.
Polifill is a code block that mimics the functionality of an API by providing fallback functionality to older browsers. For example, LocalStorage introduced in HTML5 is not supported in IE7; but we can use a Polifill to implement the LocalStorage support in IE7.
Modernizr is a JavaScript library that detects HTML5 and CSS3 feature supports in user’s browser. Using Modernizr conditional statements, we can define the new features for supporting browsers and another code block for non-supporting browsers.
Modernizr along with Polyfill help the UI developer to address the non-supporting browsers.
by
·
No comments
:
What is CallBack - In General ?
Callbacks are used extensively in asynchronous programming. When you don't want to block until a (possibly) long-running operation completes, one of the ways to approach the problem is to delegate the operation to someone who will do it on the side for you. This raises the question: how will you be able to tell when the operation is complete, and how will you get its results?
One solution would be to delegate the work to someone else and take a moment off your normal work every now and then to ask "is the work I gave you done yet?". If so, get the results in some way and off you go. Problem solved.
The problem with this approach is that it doesn't make your life much easier. You are now forced to ask every little while and you will not know that the operation is done as soon as it actually is (but only the next time you remember to ask). If you forget to ask, you will never be notified.
A better solution to this is the callback: when delegating work, provide a function along with it. The code which will actually do the work then promises to call that function as soon as the work completes. You can now forget all about that stuff and be secure in the knowledge that when the work is done, your callback will be called. No sooner, and no later.
by
·
No comments
:
Important Tips on jQuery - script tag in head or body?
In an HTML file, you can refer to your JavaScript at two places - within the head tag, or just before the closing close body tag. The web browser processes an HTML page from top to bottom, and executes any JavaScript that it finds between script tags, along the way. Due to this, the loading of the page is blocked if one of your scripts takes time to execute. Therefore, it's better to put the scripts just before the closing tag of body element, which ensures that your script is run, after the DOM is loaded.
In some of my articles and even my book, I often chose to put the script inside the head tag, but this is only for the sake of readability. But I also make sure to use $(document).ready() or the shortcut $(function(){ }) which ensures that the script will be executed only when the browser has loaded all of the content in the HTML document. Hence I am achieving the same effect as that of putting the script just before the closing close body tag.
Having said that, keep in mind that by having your scripts at the bottom of the page, you can completely avoid the use of $(document).ready(). In fact, in all my production ready applications, I use my scripts at the bottom of the page.
by
·
No comments
:
Important Tips on jQuery - Difference between this, $this and $(this)
Let us understand the difference between this, $this and $(this) with an example. Consider the following code:
Here we are looping over a bunch of div’s using each(). Once you are inside the loop, this refers to the DOM element which is not a jQuery object. So to make it a jQuery object and to run jQuery methods on it, we do $(this).
Now look at this statement: var $this = $(this);
If you’re going to reference the DOM element multiple times in the code, which we are doing in our example; then for performance sake, you should get a jQuery reference to it and then save that to a variable. Here $this is that variable. This is also called as caching the selector as it is expensive to run the jQuery function $(this) each time. So storing the output in a variable allows you to re-use the selector over and over, without calling the jQuery function again.
Note: Don’t get confused with $this. You can call it anything you like. I usually refer to variables that contain jQuery objects as $variablename.
by
·
No comments
:
Which JavaScript framework do I choose !!
Since JavaScript has made a big comeback as one of the most sought after skills in the job market there has been a lot of talk about which frameworks to focus on. Developers have several frameworks to choose from today; Angular, Ember, Knockout, Durandal, React and the list goes on.... Granted some of these are not in direct competition since they serve different purposes, but they all deserve to be on the list of notable frameworks in today's market. In this post I will talk about why I don't think it really matters which one you end up going with.
Not too long ago it used to be the case that developers relied on Jquery to do all the heavy lifting when building client side web applications, but the tight coupling between Jquery and the markup made the code hard to maintain and unit test as applications grew bigger and more complicated. Luckily some people realized this and created the frameworks we now have come to use and love. Common to all these frameworks is that they provide good organization of your JavaScript code and encourage much needed decoupling of javascript code from the html markup. Among other things the majority of the frameworks out there have some concept of a databound template that your decoupled object model gets applied to during rendering.
I can't emphasize enough how important this decoupling is for building maintainable and unit testable web applications. By removing the dependency on the DOM the code immediately goes from being almost untestable to highly unit testable. If your model is written correctly you should be able to realistically simulate all UI interactions just by writing tests against your models and logic. Not to mention, since your code doesn't assume a particular UI, it can be applied to totally different markup scenarios.
The point I am trying to make is that all the frameworks mentioned above are more about an architectural mindset than a specific syntax, so if you get into that mindset, you will succeed with all of them. The transition from one framework to the next will also become relatively painless since you already understand the core idea behind it.
In my opinion it's much more important that a developer is onboard with this mindset than it is to have x number of years of experience with a particular framework.
If you liked this article, share it with your friends !
by
·
No comments
:
jQuery AJAX with JSONP
JSONP Example
This cross domain policy is enforced to reduce the risks of a cross-site scripting (CSS) attack, where the browser or user maliciously attempts to contact another site.
So how do you make Ajax requests outside your domain or in other words, how do you make cross-domain Ajax requests? jQuery makes it possible to request JSON data outside the domain by requesting JSON with Padding – also known as JSONP. In your Ajax request, if the data is marked as JSONP, jQuery appends a query string parameter callback=? to the URL. Alternatively, you can also manually add &jsoncallback=? to the URL which notifies the calling site that you want to receive JSONP data. Doing so also lets jQuery’s $.getJSON() function treat this request as if the browser was requesting an external JavaScript file. Simply put, JSONP is JSON wrapped inside a function call
Let’s see this in action. We will use the Ziptastic API service (http://ziptasticapi.com/) which accepts a US zip code and returns City and State based on it and gives the data back in JSONP format which you can consume in your jQuery application.
The format of the API call is : http://ziptasticapi.com/zipcode?callback=mycallback
An important thing to observe in this API url is that ZipCode is part of the url.
Create a file ‘SimpleJSONP.html’. Let’s declare two text boxes, one for the Zip code and the other for the City.
Here’s the code to consume this API:
We start by monitoring the change event on the Zip Code textbox. We then use val() to retrieve the value of the Zip Code entered by the user in a variable zip. Since the Ziptastic API is of the format http://ziptasticapi.com/zipcode?callback=mycallback, in our code, we are concatenating the zip code in the url, followed by the callback parameter to tell the API to return JSONP.
We then use $.getJSON and pass in the url and a success parameter result that consists of a callback function that will be called if the request is successful. Inside the callback function, we check the value of the city and if it exists, update the value of the City textbox.Run the example, enter a zip code say 94101 and hit tab. You will see that the City textbox populates with the City name. |