Archive for July, 2010

jQuery and YQL

A couple of weeks ago while working on a project  I came across something very interesting, something called YQL ( Yahoo Query Language). YQL is a free service offered by Yahoo and it’s a very powerful tool for working with web services and doing all kind of interesting things like: data scraping, data insertion/updating and other cool and highly powerful things. YQL offers the possibility of creating different query’s over different web services and then retrieving the data in an easy to use XML or JSON format.

Here is how a YQL query looks like (this returns all flickr photos that contain “Cat” with a 10 limit) :

  1. select * from flickr.photos.search where text='Cat' limit 10

An other good functionality for YQL is data scraping, here is an example (this will find all ‘a’ tags from a specified xpath) :

  1. select * from html where url='http://example.com' and xpath='//body/p/a'

Ok. So now lets say that we want to add the data from the previous example in out page using jQuery.This is how it should be done:

  1. $.ajax(
  2.          {
  3.       type: 'GET',
  4.              url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url='http://example.com'%20
  5. and%20xpath='//body/p/a'&format=json",
  6.              dataType: 'jsonp',
  7.       success: function(data, textStatus)
  8.       {
  9.                 $('body').append(data.query.results.a.content);
  10.        }
  11. });

For help with creating your own YQL queries use the Yahoo YQL Console: http://developer.yahoo.com/yql/console/

For easy-to-use YQL queries i suggest using the YQL jQuery plugin : http://usingjquery.wordpress.com/jquery-yql-plugin/

After you install the YQL plugin this is how it can be used to replicate the example presented before:

  1. $.YQL("select * from  html where url='http://example.com' and xpath='//body/p/a'",function(content){
  2.           $('body').append(content.query.results.a.content);
  3. });

jQuery 1.4 Cheat sheet

With the release of jQuery 1.4.1, I thought a cheat-sheet is required to help with your development. So…here it is:

Read more

Google CDN (Content Delivery Network) for jQuery

A new service from google for including the jQuery library is the Google Content Delivery Network (CDN). A Content Delivery Network is a network of servers that serve content in a fast and scalable manner, distributed geographically, each request being served by the closest server in the network.

So, instead of hosting the jQuery files on our own web server we have the option of letting Google serve the jQuery file. You benefit from the speed and reliability of Google’s vast infrastructure, with the added bonus of the option to always use the latest version of jQuery and that because of the use of this service by many webpages the file will be cached (this means better speed for the users).

This is how to include:

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

JavaScript Namespacing

I’ve learned from experience that when programming javascript namespacing is a very important technique for keeping a clean code.

By definition the main goal of namespacing is avoiding collisions, but namespacing also helps in keeping a nice and clean code.By separating your code using namespacing easy to use packages of code can be created.
This is how to declare a variable and a function in a “my” namespace:

  1. var my = {};
  2. var my.url = 'www.google.ro';
  3. var my.sayHello = function (){
  4. alert('Hello');
  5. };

To call sayHello just:

  1. my.sayHello();

I recommend using namespacing in your implementation of javascript code.

Event delegation in Javascript (jQuery)

Event delegation.What is event delegation and why do we need it?…First of all a small recap on event handlers.  If we want to add an onclick event handler for all paragraphs in a document, this is the instruction in jQuery:

  1. $('p').click(function(){/* Code here */})

By doing this we add an anonymous function as a handler for the onclick event.

Before explaining event delegation you must know that as of version 1.4.1 jQuery has support for event delegation with the function live().

Event delegation makes use of two overlooked features of JavaScript events:event bubbling  and the action target. When an event is triggered on an element, for example a mouse click on a button, the same event is also triggered on all of that element’s parents.The event target hold’s the originating element (the button in our example).

Read more

IE innerHTML select bug

As an example for how easy jQuery makes developers life I will present a small problem that exists in IE and that jQuery takes care of.

If you have a ‘select’ and want to modify the innerHtml of that select by using something like this:

  1. document.getElementById('id').innerHTML = '<option>1</option>';

this will not work in IE, so the new content will not be set by just using innerHTML. A fix for this problem can be found, but i just suggest instead of looking for a fix, just use jQuery.

In jQuery this problem doesn’t exist, so by using

  1. $('#id').html('<option>1</option>');

the desired content for the select will be placed and no problem will exist.

Using jQuery .. what is jQuery?

So what is jQuery?..Well jQuery is a open-source Javascript library designed to help developers work with javascript.

The main advantage of using jQuery is easy DOM manipulation, event handling, animating, and easy to use Ajax. Also from experience I can say that one of jQuery’s top advantages is cross-browser compatibility.

So let’s get started…

First thing that you should know about the jQuery class is how to use it. The $ sign is the main alias for the jQuery class. So you can use $(‘form’) or jQuery(‘form’).

If for example you would like to select all input’s from a page then you should write $(‘input’), or if you would like to select a specific div with the id = “new_id” then this is the the select: $(‘#new_id’). So for an id, the # should be used, and for a class the . should be used.

Example (delete all div’s with the class = “new_class”):

  1. $('.new_class').remove();

A thing that you should keep in mind is that every jQuery function returns a jQuery object and this offers the possibility of chaining your jQuery instruction.

Example (change the inner html of a element the make it visible) :

  1. $('#new_id').html('sometext').show();

Read more

Return top