Showing posts with label news. Show all posts

8+ methods that will not work in jQuery 1.9

There have been many method additions and deprecations in the last jQuery releases, but never so many changes that remove previous deprecations and make backward incompatible changes in a single release. Final release of jQuery 1.9 will be announced today. This article will help you get an overview of what’s changing and how to get prepared. So lets review these changes.

1) $.browser is no longer available

$.browser added in v1.0, deprecated since v1.3 and now it's gone. If possible use browser feature detection ($.support) instead of browser sniffing ($.browser). The documentation says that it may be moved to a plugin, but it's not yet (well, not considering jQuery Migrate of course). If you haven't used $.support before, we will cover it in our next post.

For those who really need just the browser sniffing feature back, you can copy-paste the highlighted code from jQuery 1.8.3's core here.

2) .andSelf() is renamed to .addBack()

.andSelf() added in v1.2, deprecated in v1.8. It's used for adding previous selection set to the current set in the chain.

For example: $('.first-set').children().andSelf() - would return a set with all children of the .first-set, plus .first-set's themselves. It took no arguments and now it has been replaced by .addBack() method that does the exact same thing, but accepts optional selector argument to filter out the set. So with the example above you could say: $('.first-set').children().addBack('div') - return all children of .first-set, plus .first-set's that are <div>s.

3) Removed deprecated .sub()

.sub() added in v1.5, deprecated in v1.7. Lets you create a copy of jQuery object, so that methods' default behaviours could be overwritten.

For example you could overwrite jQuery's .data() methods so that it would try to fetch required data from your server if it's not found on the element.

(function() {
  var copy = jQuery.sub();

  copy.data = function(element, key, value) {
    // Make sure user is trying to get, not set data
    if(!!value) return jQuery.data.apply(this, arguments);

    // Get data using default jQuery.data() method
    var data = jQuery.data.apply(this, arguments);

    if(!data) {
      // if no data, get it from the server
      data = $.ajax({ AJAX_INFO });
    }

    // Once we have the data, cache it using
    // original $.data() and return to the callee
    return jQuery.data.apply(this, arguments, data);
  };

  copy(document).ready(function($) {
    alert($(".test-elem").data();
  });

})();

If you want to study how it was accomplished, here is the related code from 1.8.3 code base.

4) Can't toggle through click events, only visibility

.toggle() added in v1.0, deprecated in v1.8. There were 2 .toggle() methods: one that animates show/hide, the other toggles click events. The one that toggles through click handlers is removed. So .toggle(function(){}, function(){}) will not work. Here is the related code in jQuery Migrate plugin.

5) No more $('img').error()

.error() added in v1.0, deprecated in v1.8. Not to be confused with $.error() method, that throws new Error(msg);

6) .attr() for working with attributes only

.attr('value', newValue) used to set property instead of attribute. To set current value use .prop('value', newValue) and .val(newValue) for form elements.

Learn the difference between property and attribute.

7) Removed "hover" pseudo-event

"hover" – there is no more event called hover. Instead use "mouseenter mouseleave". Please note, that only pseudo-event name is no longer available. You can still use .hover() method.

8) Global AJAX events triggered on document

ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxComplete, ajaxStop now must be bound to 'document'.

9) Internal undocumented changes

There are also some other internal methods that were either changed or removed (like .data('events') and $.clean()), but since they are not documented I guess you are not using them.

How to deal with all the changes?

As you can see jQuery 1.9 throws away many deprecated methods, but the team understands that there is a lot of code in production that relies on these features. So jQuery team provided us with jQuery Migrate plugin that makes code written prior to 1.9 work with it.

If you use unminified version of the plugin, it will log warning messages in console if your code uses any of the deprecated methods. The minified file is for production and it does not throw any warnings.

“It’s alive” - new theme design, interesting posts & more…

Happy New Year everyone! I would like to give you a heads up with the news that the blog will become “live” again with more regular and interesting posts around jQuery and JavaScript. For the last couple of years I have been involved in a very fast growing start-up with a vibrant developers team. I have learned a lot during this period, so I decided to also cover topics about maintaining frequently changing codebase, programming best practices for better code maintenance and also tools & tips to stay sane.

To get things moving I spent couple of days redesigning the blog theme using Twitter Bootstrap and dressing it up to Blogger template (if there is a demand, I can polish the template’s code and release it to the public). I hope you like the new look. If there are any bugs, please leave a message on Facebook or Twitter.

Happy New Year and happy coding…

jQuery Globalization plugin — jquery.glob.js

This is the first post of a series that are dedicated to jQuery’s new Microsoft contributed Globalization plugin or shortly jquery.glob.js. In this first post I will try to cover the very basics like library licensing, “the good & the bad” and some thoughts on how it could be improved (IMO).

I will be post some jQuery globalization plugin tutorials in coming days, so bare with me.

Before we jump into licensing and support issues, first things are first. What’s up with the name? It’s confusing! When did we start calling localization (l10n) a globalization?! I haven’t seen any g12n abbreviations lately, have you? When I first came across it, I thought it was some wicked jQuery solution to "global variables are evil" idea or solution to some other problem that I am not even familiar with :) Don’t you agree, it’s confusing a bit.

So, there you go. One little improvement: "Don’t confuse, rename it!"

Before we talk about the jQuery globalization plugin license, let me mention that this plugin is now officially supported by jQuery Project. Which means that it will be under continues improvement by jQuery core team and will be compatible with the future jQuery and jQuery UI releases. Also globalization plugin will become a part of the jQuery UI project.

jQuery Project officially supports jQuery Globalization plugin.

Now, the legal stuff – the license. Because jQuery project accepted the globalization plugin as officially supported (and of course because Microsoft agreed to its terms) jQuery Globalization plugin is distributed under the same license as core jQuery.js. So you are safe to do pretty much anything.

jQuery Globalization plugin is licensed under the same non-restrictive terms as the core jQuery.js

After playing with the plugin for a while I realized that it does not do any DOM manipulations and you certainly don’t expect any animations. So what’s the point of having it as jQuery plugin and not a general JavaScript globalization/localization library? This way a larger community could benefit from it. I guess it was more of marketing decision rather than technical.

JavaScript library alternative to globalization plugin would be nice.

To be honest, JavaScript and jQuery community had a lack of localization libraries and jQuery Globalization plugin with over 350 localizations is a great solution. Surely, plugin’s exposed function names and namespacing could be improved, and most probably will be, but we’ll talk about it in our next “jQuery Globalization plugin tutorial” post. Stay tuned…

jQuery mobile source code

If you want to download jQuery Mobile source code and look into it just like everybody else, we are all out of luck :(  As I mentioned in my previous post jQuery mobile facts, the source code will be available in October this year.

The jQuery Mobile source will not be in a separate jquery.mobile.js file. It will be right in the jQuery core. This means that jQuery team is fixing and improving jQuery core so that it works nicely in all major mobile phones and devices.

By the way, if you want to keep track of the jQuery mobile source code and be the first one to download it, when it is available, you should watch jQuery on GitHub.

The big part of the upcoming jQuery mobile is new UI components that work and render nicely in all mobile devices and degrade gracefully. So, keep an eye on jQuery UI as well. Here is the jQuery UI GitHub page.

Meanwhile you can read all jQuery mobile facts here.

jQuery Mobile

jQuery Mobile is an attempt to create a javascript framework that would work on all major mobile browsers. In this post I will try to lay down all the facts that I could find about jQuery Mobile, so that you are up to date.

jQuery team has mentioned that they were planning and started to work on jQuery for Mobile devices when they announced jQuery 1.4. John Resig said that they already had different mobile devices from sponsor for testing purposes. Anyway, jQuery Mobile is officially announced now, but there is a very little information about it.

Here are some facts that I found:

  1. jQuery Mobile will be in core, NOT as a separate distribution like jquery.mobile.js
  2. jQuery UI team will improve current jQuery UI and develop new mobile components (initial designs).
  3. Release of the jQuery Mobile and new jQuery UI components is planned for October 2010.
  4. As of writing of this post, jQuery Mobile source code is not available. The code will be pushed to the jQuery core’s GitHub repository and announced on the official jQuery mobile page.
  5. You can help jQuery Mobile project by testing jQuery core on your mobile devices at TestSwarm.

That’s all I could find on jQuery Mobile for now. Subscribe to my RSS or follow me on Twitter to stay updated about news related to jQuery Mobile.

jQuery Twitter plugin update

A lot of users requested a demo for my jQuery Twitter plugin. It has been a while since I updated the plugin, so I downloaded the latest version and while looking thought the code found couple of bugs. So, here comes updated and fixed jQuery Tweeter plugin - jTwitter 1.1.1.

In this release, I fixed a little bug that would not allow you request Tweets without number of posts like this:

// Defaults to 5 latest posts
$.jTwitter('jQueryHowto', function(posts){
  //Callback function with the user data
});

You can specify the number of posts you want to be fetched like so:

// Get latest 13 posts
$.jTwitter('jQueryHowto', 13, function(posts){
  //Callback function with the user data
});

Also, I created a simple demo page for the plugin here. Please visit and see the code and also note that with this plugin you can create a custom Twitter badge with no design limitations!

Update: Pushed the project to GitHub.

jQuery Twitter plugin update – jTwitter 1.1

Some time ago I created jQuery Twitter plugin – jTwitter. Plugin lets you get data about any Twitter user, such as user’s bio, profile image, homepage URL, background image URL, following count, followers count, messages count, etc. without any Twitter API key. It is very useful to attach additional Twitter data to your site’s user profiles, etc.

However, it was not very handy for creating your own and custom Twitter Badge. Well, right until now! I updated jTwitter plugin and now it can get you not only Twitter user details but also any number of that user’s latest posts. And yes, all these you can do without any Twitter API keys.

Here is the main function and its argument details:

$.jTwitter(username, numberOfPosts, callbackFunction);

/* username - Twitter username
   numberOfPosts - Number of user posts to get
   callbackFunction - callback function to call
   when data is loaded */

Let’s see a real life example now. In example below, we are fetching latest 3 posts of jQueryHowto Twitter user and appending those post messages to some DOM element with an id=tweets.

$.jTwitter('jQueryHowto', 3, function(posts){
  for(var i=0; i<posts.length; i++){
     $('#tweets').append(posts[i].text);
  }
});
You can see example usage and demo here.

To get a clear view of what data is returned and available in your callback function here is an example of returned JSON data object:

/*
    Example of returned object
*/

[
  {
    'in_reply_to_user_id':null,
    'in_reply_to_screen_name':null,
    'source':'web',
    'created_at':'Fri Sep 18 06:11:15 +0000 2009',
    'truncated':false,
    'user':{
      'profile_background_color':'9ae4e8',
      'description':'jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...',
      'notifications':false,
      'time_zone':'Central Time (US & Canada)',
      'url':'http://jquery-howto.blogspot.com',
      'screen_name':'jQueryHowto',
      'following':true,
      'profile_sidebar_fill_color':'e0ff92',
      'created_at':'Thu Mar 26 14:58:19 +0000 2009',
      'profile_sidebar_border_color':'87bc44',
      'followers_count':2042,
      'statuses_count':505,
      'friends_count':1015,
      'profile_text_color':'000000',
      'protected':false,
      'profile_background_image_url':'http://s.twimg.com/a/1253209888/images/themes/theme1/bg.png',
      'location':'',
      'name':'jQuery HowTo',
      'favourites_count':15,
      'profile_link_color':'0000ff',
      'id':26767000,
      'verified':false,
      'profile_background_tile':false,
      'utc_offset':-21600,
      'profile_image_url':'http://a3.twimg.com/profile_images/110763033/jquery_normal.gif'
      },
    'in_reply_to_status_id':null,
    'id':4073301536,
    'favorited':false,
    'text':'Host jQuery on Microsoft CDN servers http://retwt.me/2N3P'
  },
  {
    'in_reply_to_user_id':null,
    'in_reply_to_screen_name':null,
    'source':'<a href="http://www.hootsuite.com" rel="nofollow">HootSuite</a>',
    'created_at':'Thu Sep 17 17:20:21 +0000 2009',
    'truncated':false,
    'user':{
      'profile_sidebar_fill_color':'e0ff92',
      'description':'jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...',
      'friends_count':1015,
      'url':'http://jquery-howto.blogspot.com',
      'screen_name':'jQueryHowto',
      'following':false,
      'profile_sidebar_border_color':'87bc44',
      'favourites_count':15,
      'created_at':'Thu Mar 26 14:58:19 +0000 2009',
      'profile_text_color':'000000',
      'profile_background_image_url':'http://s.twimg.com/a/1253141863/images/themes/theme1/bg.png',
      'profile_link_color':'0000ff',
      'protected':false,
      'verified':false,
      'statuses_count':504,
      'profile_background_tile':false,
      'location':'',
      'name':'jQuery HowTo',
      'profile_background_color':'9ae4e8',
      'id':26767000,
      'notifications':false,
      'time_zone':'Central Time (US & Canada)',
      'utc_offset':-21600,
      'followers_count':2038,
      'profile_image_url':'http://a3.twimg.com/profile_images/110763033/jquery_normal.gif'
    },
    'in_reply_to_status_id':null,
    'id':4058535256,
    'favorited':false,
    'text':'jQuery Tip: Don't forget that you can load jQuery UI files from Google servers as well http://bit.ly/fJs2r'
  },
  {
    'in_reply_to_user_id':null,
    'in_reply_to_screen_name':null,
    'source':'web',
    'created_at':'Thu Sep 17 05:44:30 +0000 2009',
    'truncated':false,
    'user':{
      'profile_sidebar_fill_color':'e0ff92',
      'description':'jQuery and JavaScript howtos, tutorials, hacks, tips and performanace tests. Ask your jQuery questions here...',
      'friends_count':1015,
      'url':'http://jquery-howto.blogspot.com',
      'screen_name':'jQueryHowto',
      'following':true,
      'profile_sidebar_border_color':'87bc44',
      'favourites_count':15,
      'created_at':'Thu Mar 26 14:58:19 +0000 2009',
      'profile_text_color':'000000',
      'profile_background_image_url':'http://s.twimg.com/a/1253048135/images/themes/theme1/bg.png',
      'profile_link_color':'0000ff','protected':false,
      'verified':false,
      'statuses_count':503,
      'profile_background_tile':false,
      'location':'',
      'name':'jQuery HowTo',
      'profile_background_color':'9ae4e8',
      'id':26767000,
      'notifications':false,
      'time_zone':'Central Time (US & Canada)',
      'utc_offset':-21600,
      'followers_count':2035,
      'profile_image_url':'http://a3.twimg.com/profile_images/110763033/jquery_normal.gif'
    },
    'in_reply_to_status_id':null,
    'id':4048429737,
    'favorited':false,
    'text':'Added a demo page for my 'How to bind events to AJAX loaded elements' blog post as requested by users http://bit.ly/q2tWe'
  }
]

As you can see, you get not only user’s latest posts but also all the information about posts and user who posted it on Twitter.

You might also be interested in my jQuery YouTube Plugin.
It gets any YouTube video’s thumbnail image.

If you are using Twitter don’t forget to follow me.

Host jQuery on Microsoft CDN servers

After Microsoft decided to ship and use jQuery library for its JavaScript needs in Visual Studio, hosting jQuery on Microsoft CDN servers is actually a logical and good decision. Yes, some of us might argue that Google already hosts jQuery, but Microsoft can not recommend to use its competitor’s services, can it?! :)

Anyway, intention of this post is not to discuss why Microsoft introduced its own jQuery hosted servers, bu to share links to Microsoft hosted jQuery library. Here we go:

jQuery 1.4.x
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js

jQuery 1.3.2
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2-vsdoc.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js

Microsoft also host jQuery Validation and jQuery UI files.

Currently Microsoft AJAX CDN hosts only jQuery version 1.3.2, but they will add more releases in the future. To see a full list of the JavaScript libraries and their URLs that are already hosted on CDN cache go here: www.asp.net/ajax/cdn

Mozilla Jetpack & jQuery

Jetpack is a new product of Mozilla Labs. It is basically a new way to create Firefox plugins using web programming languages like HTML, CSS and JavaScript. The idea behind is the same as for Adobe AIR. If you know HTML, CSS and JavaScript you can build a Firefox plugin in no time.

The bad news is that Jetpack is still in early developer testing stage, so it is not available in Firefox yet. The good news is that Jetpack is using jQuery and you can use it to do all kinds of stuff like responding to user click events, manipulate any website DOM elements and use cross-site XMLHttpRequest object, etc. Besides, Jetpack can be setted up to use other javascript libraries such as prototype.js, dojo.js etc. and third party API libraries such as Twitter, Google, etc. API libraries.

Where to go from here?

If you want to learn more about Jetpack and how to use jQuery with it refer to this links:

  1. Watch this Jetpack video
    Good starting point to get an idea of what Jetpack is and how jQuery is used within it. Also good starting point to understand what kind of things can be don with Jetpack.
  2. Read Jetpack tutorial
    Official Jetpack introduction tutorial from Jetpack team. Probably the first article you must read about developing for Jetpack.
  3. Jetpack API documentation
    A list of global variables that are available in your Jetpacks. Currently it has a very limited global variables and functions.
  4. Jetpack plugin for your Firefox
    If you want to develop Jetpacks you need to install this Firefox plugin.
  5. Available Jetpack to investigate the code here and here.
    Most developers prefer understanding the logic and learning by investigating someone else’s code easier.

I am planning to post more Jetpack tutorials on this blog and try to show what kind of things can be done using Jetpack and jQuery. Keep tuned by following me on Twitter (@jQueryHowto) or subscribe to blog’s RSS.

jQuery Beginner tutorials

This post is about a decision I made yesterday to post more jQuery beginner tutorials on the blog.

See a list of all jQuery beginner tutorials on this blog.

There were two reasons for me making this decision:

  1. People are finding this jQuery blog searching for jQuery basics
    Analyzing my Google Analytics account I found that a lot of developers who are landing on this blog through search are jQuery Beginners and looking for basic jQuery method explanations. So publishing more beginner tutorials would benefit them. They would get more relevant information from the new Beginner category posts.
  2. I am being asked more and more jQuery Beginner questions
    I have been quite active on Twitter (@jQueryHowto) and other online discussion boards lately answering and helping developers with their jQuery problems. The jQuery community on twitter is quite active and most of the jQuery problems I came across were jQuery beginners questions. I could not squeeze my ideas or explanations of jQuery basics in 140 characters, so I had to search the web for explanation and post a link to the website.

Message to non beginner readers:

I hope I will not lose intermediate and advanced jQuery developers with this posts. I enjoy your insights and comments on my posts and actually learn a lot more from your feedback. I will try to post no more than one beginner tutorial or insight per my regular post. I hope for your understanding.

List of jQuery Beginner Tutorials and posts:

I actually posted several jQuery Beginner tutorials and method explanations on this blog with backdate. I will try to keep this post updated with the links for my beginner posts so you can bookmark this page or share it with your jQuery beginner colleagues.

See all jQuery beginner tutorials on this blog.
  1. Using $.noConflict()
  2. How to check if checkbox is checked
  3. Identify how many elements were selected
  4. Adding custom functions to jQuery
  5. Identifying & locating mouse position in jQuery
  6. How to load jQuery from Google CDN servers
  7. Setting HTML tag’s attribute in jQuery
  8. Getting HTML tag’s attribute in jQuery
  9. Binding jQuery events to AJAX loaded elements
  10. How to disable and enable an element
  11. Quick tip to solve a problem with setting CSS background image to an element