In this post you will learn how to disable and enable different HTML elements (input, textarea, links, etc.) using jQuery. First, let's categorize the diffent types of elements that can be disabled using jQuery. We can categorize them into 3 general categories. Method of disabling items in each category is different.

If I missed some other element that does not fall under any of those 3 categories please leave a comment. The idea behind any method is very simple though. Usually all you have to do is to change element's attribute. See example below to get an idea.

Consider you have a form and you need to disable some element on it. All you have to do to disable it is to add disabled property to that element (input, textarea, select, button). Let's see an example:

Caveats & notes

Setting form element's disabled attirbute causes browsers not to sent that element to the server on form submit. In other words, your server script will not receive that form element's value. The workaround to that problem is to sent readonly attribute instead of disabled. This will make your fields non editable, but browser will still send the data to the server.

Caveats & notes

In the onclick example above we added e.preventDefault() method which would stop event propagation. If you have other events relying on it on parent elements, please remove that method call. Also, when setting link's new href attribute, you can save the initial value with .data() method in order to set it back later.

What is great about jQuery is its simplicity in selecting elements. We all use it here and there, basically everywhere. This simplicity comes with its drawbacks. jQuery traverses through all elements every time we use selectors. So to boost up your jQuery application you should always cache your selections to some variable (if you find yourself using the same selection more than once). In case you are not selecting an element more than once you should not cache your selection by assigning it to some variable.

Sometimes after all day long coding your code becomes not so effective and your code (usually interface related) becomes slow. You have done so many changes and don't exactly know what slowing it down. In cases like this (and of course, plenty other cases) you can test your JavaScript code performance. First of all, you need Firefox browser and Firebug web developers life saver plugin. I can not think of my web programming work without it.

Anyway, Firebug makes available console variable to your JavaScript page. Console can be used for logging or printing out debugging information to the Firebug console. Console also has one handy method for tracking time in milliseconds.

The title maybe a little misleading. So don’t confuse things like Arrays, RegEx, Boolean, etc. with Object! They are all obejcts but a different class. They have common and non-common methods. You can use jQuery's $.type() method to check any given variable's class.

Most of the time we work with arrays or arrays like jQuery objects. So jQuery has built-in method to check if a variable is an array ($.isArray(var)).

Now, back to our initial statement: "Everything is an Object". This means that integers, floats and booleans, etc. also behave like ordinary objects. Which in turn means that we can add and call properties on them as well. Let's see an example:

Because everything is an object, JavaScript engine will allow this property assignment methods. However, it will ignore the assignments and when called it will return "undefined". Number class objects are an exception.

So, knowing this little fact helps you understand why for in loops, for example, allow itirating over arrays. By the way, array keys are internally implemented as object properties. Also, array's .length property is also not an exception, but a simple property defined on an array object.

Recently I wrote two articles on how to extend jQuery using its plug in system and a shorthand for that. If you look into them closely they are actually the same thing. The only difference being that the code in first one is wrapped in this anonymous JavaScript function:

(function ($) {
// code goes here
})(jQuery)

Little research shows that this allows the use of $ within this function without conflicting with other JavaScript libraries who are using it. Basically, since we are setting $ as a parameter, $ will overwrite any globally defined variables/references of $ in that particular anonymous function.

So basically it’s an anonymous function that lets jQuery play nicely with other javascript libraries that might have $ variable/function. Also if you notice, all jQuery plugins code is wrapped in this anonymous function.

In this post you will learn how to add your own custom functions to jQuery. In essence, this is the same as creating jQuery plugin. Recently I wrote a template on how to extend jQuery and how to create your own functions. Since then I came across even smaller code snippet on how to add your own custom functions, in other words how to create plugins for jQuery.

So without further ado:

$.fn.myFunction = function() {
return $(this).addClass('changed');
}
// Now, you can use it like this
$('.changePlease').myFunction();

Even though, it is a shorter version, you are better off using the correct way. The correct way is to wrap your custom function code into the closure so that it does not interfere with surrounding code and does not cause issues with redefining existing variables.

By using the above recommended methods of creating custom jQuery functions, we are making sure that:

We do not assume that jQuery is not in jQuery.noConflict() mode. So our code does not require that $ refers to jQuery.

We can define custom variables without worrying about polluting global namespace. Since our code is defined in the closure, our variables will not overwrite global variables. Overwriting global variables may cause unexplainable unit test failures and unidentifiable bugs.

The two methods are technically the same. The $.fn.extend() method is basically merging our passed object with itself. Whereas, in the $.fn.custom_method = case we are explicitly defining property on the $.fn object. So in the essence, jQuery allows adding custom function by defining properties on $.fn object.

This means that we are not limited to custom functions, but also can define custom variables as well. It can be used as a global property holder. This properties are accessible from anywhere on in your code. So plugins can use it to exchange data between themselves.

As you can see, Google CDN also hosts jQuery (as well as jQuery UI). In this post we will concentrate on jQuery.

Google CDN hosts uncompressed as well as minimized jQuery files, supports gzip. The main advantage of using Google hosted jQuery is that if your visitors have already visited some site that loaded jQuery from Google servers, then it would already be on user's machine. So the browser would load it from its' cache.

Today, almost everyone is using Google hosted jQuery. So there is a huge chance that your visitors have it cached. By using Google CDN, you are reducing your page load times.

One of the reasons jQuery is so popular is the number and quality of its' plugins. They allow quickly achieve user goals and get on with their lifes. A lot of tasks can be done by jQuery plugins without ever have to write any custom jQuery code.

However, when you write some awesome code and think the community will benefit from it - release it as jQuery plugin. In this post, you will learn how to extend jQuery with your custom plugins.

One of the most used features of jQuery is DOM manipulation, but right after that are probably event binding and AJAX content loading. When we bind events to AJAX loaded or dynamically added elements our app might not behave as we would have expected. This is one of the oldest dilemmas of front-end development.

jQuery has addressed this problem back in version 1.3 by introducing .live() method. Since then, the jQuery team has improved upon it and introduced .delegate() and .on() event binding methods. Depending on the jQuery version your project is using, you will need to use one of these methods.

In this post, I will try to help you identify the recommended way of binding events to AJAX loaded (or dynamically created) elements depending on jQuery version you are using. Also, cover some of the performance considerations you should be aware of.

This post will discuss and provide several solutions to "Access to restricted URI denied" error. This error is thrown in Firefox browser, while making AJAX request that does not comply with the browser's security policies.

The error occurs when application tries to do an AJAX request that does not comply with the same-origin policy or tries to access a local resource (file on your hard drive with a path like file://c:/Users/etc.). To solve this problem you need to change the URI to your files so that it appears as if they were on the same domain as the page your AJAX script is calling it from.

Let's try to reproduce the error.

$(document).ready(function(){
// Try to load content from the hard drive
$.get('file:///Users/path-to/seed-data.js', function(data){
console.log(data);
});
// Try to load content from another domain
$.ajax({
url: "http://www.google.com/some-file.html",
}).done(function(data) {
console.log(data);
});
// Try to load content from the same domain, but different protocol
// Assume we are on http://www.example.com page and trying to access
// page on the same secure domain "https"
$.get('https://www.example.com/seed-data.js', function(data){
console.log(data);
});
});

The examples above will result in the following error in your JavaScript console.

Reasons

In the first example, the reason for the error is Firefox's security model that does not allow retrieving/accessing resources localhost resources.

In the second example, Firefox enforced "same origin" security policy that does not allow accessing resources from other domains (NOTE: www.example.com and example.com are considered two different domains as well).

In the third example, we tried to access resources using different protocol (https). Don't forget HTTP and HTTPS are two different protocols.

Solutions

In order to solve the "Access to restricted URI denied" error, you need to identify which of the reasons above is causing your script to throw an error and fix it with one of the solutions below.

First problem: Deploy files to a web server or alternatively run one locally (ex. XAMPP). Once deployed, access your page from your domain (http://www.your-domain.com/page.html or http://localhost:port/page.html).

To access resources from other domains you have to overcome the "same origin policy". This can be done by putting a simple proxy script on your own domain and it would appear as if you are fetching resources from your own domain. You can find description and an example proxy script in “Cross domain AJAX scripting” post.

The solution to the last method is usually easy. In most cases it is either putting or removing "s" to/from "http". But for cases when you have to grab content from URL using different protocol, your only solution is to use proxy script described in the second solution.

If this post does not cover your case please leave a comment with reproducable code or a link to fiddle page. If you found this post helpful, please share/like it.