Learn Jquery

Get URL parameters & values with jQuery

2010-09-17T11:06:00.000-07:00

In this post, I would like to share a little jQuery code snippet that makes getting URL parameters and their values more convenient.

Recently, while working on one of my projects, I needed to read and get parameter values from URL string of the current page that was constructed and sent by PHP script. I came across this short and sweet JavaScript code snippet by Roshambo that does just that.

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

The function returns an array/object with your URL parameters and their values. For example, consider we have the following URL:

http://www.example.com/?me=myValue&name2=SomeOtherValue

Calling getUrlVars() function would return you the following array:

{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

To get a value of first parameter you would do this:

var first = getUrlVars()["me"];


// To get the second parameter
var second = getUrlVars()["name2"];

To make the script syntax to look more jQuery like syntax I rewrote it as an extension for jQuery:

$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

Now, if you include the above code in your javascript file, you can get URL parameter values in the following way:

// Get object of URL parameters
var allVars = $.getUrlVars();

// Getting URL var by its nam
var byName = $.getUrlVar('name');

Create callback functions for your jQuery plugins & extensions

2010-09-17T11:05:00.000-07:00

Most of the time custom jQuery plugins and extensions that we create do not use a callback functions. They usually simply work on DOM elements or do some calculations. But there are cases when we need to define our own custom callback functions for our plugins. And this is especially true when our plugins utilize AJAX querying.

Let’s say our custom jQuery extension gets data by making some AJAX request.

$.extend({
  myFunc : function(someArg){
    var url = "http://site.com?q=" + someArg;
    $.getJSON(url, function(data){

        // our function definition hardcoded

    });
  }
});

What is bad in this jQuery code is that the callback function is defined and hardcoded right in the plugin itself. The plugin is not really flexible and its user will have to change the plugin code, which is bad!

So the solution is to define your own custom callback function argument. Here is how it is done:

$.extend({
  myFunc : function(someArg, callbackFnk){
    var url = "http://site.com?q=" + someArg;
    $.getJSON(url, function(data){

      // now we are calling our own callback function
      if(typeof callbackFnk == 'function'){
        callbackFnk.call(this, data);
      }

    });
  }
});

$.myFunc(args, function(){
  // now my function is not hardcoded
  // in the plugin itself
});

The above code shows you how to create a callback function for AJAX load, but if you want to create a simple callback function for your jQuery plugin, for example the one that executes on your own custom events. To achive this you can do the following:

$.extend({
  myFunc : function(someArg, callbackFnk){
    // do something here
    var data = 'test';
 
    // now call a callback function
    if(typeof callbackFnk == 'function'){
      callbackFnk.call(this, data);
    }
  }
});

$.myFunc(someArg, function(arg){
  // now my function is not hardcoded
  // in the plugin itself
  // and arg = 'test'
});

Cross-domain RSS to JSON converter [jQuery plugin]

2010-09-17T11:04:00.000-07:00

No doubt that Web2.0 is one of the best things that happened in our lifetime (besides the internet itself). When we mention Web2.0 first things that come into our minds are AJAX, rounded corners, clean and light layouts and of course RSS feeds. Nowadays, you either provide an RSS feed or consume it in your web app using AJAX/JavaScript.

The only bad thing is that you can not request cross-site content with AJAX requests. Requesting someone else’s RSS in your JavaScript falls into this limitations. One way to overcome this problem is to apply a server-side proxy workaround. However, there is even better solution and workaround – RSS to JSON conversion.

Basically, using Google Feeds API service and jQuery plugin you can request and get any RSS from different domain converted into the JSON object in your javascript.

Let’s see an example of RSS2JSON converter:

<script src="jquery.js"></script>
<script src="jquery.jgfeed.js"></script>
<script>
$.jGFeed('http://twitter.com/statuses/user_timeline/26767000.rss',
  function(feeds){
    // Check for errors
    if(!feeds){
      // there was an error
      return false;
    }
    // do whatever you want with feeds here
    for(var i=0; i<feeds.entries.length; i++){
      var entry = feeds.entries[i];
      // Entry title
      entry.title;
    }
  }, 10);
</script>

In order to have universal client-side RSS to JSON converter you first need to include jquery.js and Google Feeds API plugin jquery.jgfeed.js. Then use jQuery plugin and Google Feeds API to get reliable and fast RSS to JSON(P) converter.

The code above gets Twitter RSS feeds in JSON format and does whatever it wants with it. Great workaround isn’t it :)

To see jGFeed()’s argument lists and how to use it please read this post.

jQuery code / syntax guidelines

2010-09-17T11:03:00.000-07:00

We all write our own jQuery code and since creating custom jQuery plugins is so easy, we all create our own jQuery plugins. And all of us have our own code syntax preferences. For example:

function myFunction() {
    ...
}

// some prefere it like this
function myFunction()
{
    ...
}

If you want to publish your jQuery plugins following jQuery core code writing guidelines is a good idea. This would make your code more easier to read to other jQuery developers. Follow the link above and go through the guidelines (it will only take a few minutes). The guidelines page shows gives you general guidelines, but I went through the jQuery core code and found several additional ones. I lay they out at the end of this post.

In short, the official guidelines are as follows: (Taken from official docs)

Use tabs to indent your code

Use liberal spacing":

function myFunction ( myVar, myVar2 ) {
    // Pay attention to spaces around
    // the brackets and curly brackets
}

Use strict equality checks whenever possible (===)

Braces should always be used on blocks and statements should not be on the same line as a conditionals:
```
// NO:
if ( true ) blah();

// YES:
if ( true ) {
   blah();
}
```

When checking an object type:

String: typeof object === "string"
Number: typeof object === "number"
Function: jQuery.isFunction(object)
Array: jQuery.isArray(object)
Element: object.nodeType

See full list on official docs page (link above)

Don't use "string".match() for RegExp, instead use .test() or .exec()

Node related rules:
- .nodeName should always be used in favor of .tagName.
- .nodeType should be used to determine the classification of a node (not .nodeName).
- Only attach data using .data().

Now let’s see other additional rules that I could spot reading the jQuery core code.

Additional jQuery code / syntax guidelines:

The first thing that I noticed was multiline comments did not use common /* comment */ syntax. In jQuery core all multiline comments use line comment syntax // comment.
```
// This is an example of multiline
// comment syntax used in jQuery core.
```

Local variables are declared and initialized on one line just below the function declaration with no extra line:

function someFunction () {
    var target = arguments[0] || {}, i = 1, name;

    // Empty line and then the rest of the code
}

When declaring objects, there is no space between property name and colon:
```
{
    myName: "",
    myFunc: function( ) {}
}
```

All strings are in double quotes " ", not single quotes ' ':
```
var myMarkup = "<a href='/a'>a</a>";
```

The last but not least, variable naming uses camelCase.

jQuery Mobile

2010-09-17T11:02:00.001-07:00

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:

jQuery Mobile will be in core, NOT as a separate distribution like jquery.mobile.js
jQuery UI team will improve current jQuery UI and develop new mobile components (initial designs).
Release of the jQuery Mobile and new jQuery UI components is planned for October 2010.
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.
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.

How to check loaded jQuery UI version?

2010-09-17T11:01:00.000-07:00

In this post I will show how to check currently loaded jQuery UI version on the page. Unlike checking loaded jQuery version ( $().jquery ), checking jQuery UI version is a bit different.

Checking currently loaded jQuery UI version on the page:

// Returns jQuery UI version (ex: 1.8.2) or undefined
$.ui.version

// Alternatively
jQuery.ui.version

You would most probably use it in the if statement:

if($.ui.version){
    // jQuery UI is loaded
}

You can also check if jQuery UI is loaded or not:

// Checking if jQuery UI is loaded or not
if($.ui){
    // jQuery UI is loaded
}else {
    // jQuery UI is not loaded
}

jQuery YouTube plugin demo

2010-09-17T11:00:00.000-07:00

Long overdue demo for my jQuery YouTube plugin – jYouTube is now available here. The plugin can fetch and get you any YouTube video’s screenshot or thumbnail by its URL or video id.

Here is an example:

// Getting video screenshot by YouTube video ID
$.jYoutube('rSUfWXcNAOw');

// Returns video thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

By default the plugin will return URL of the video screenshot (480×360). If you just need a video thumbnail (120×90) pass an optional second parameter "small".

See the plugin in action on jQuery YouTube demo page.

jQuery Twitter plugin update

2010-09-17T10:53:00.000-07:00

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.

Loading content with jQuery AJAX - using a loading image

2010-01-24T09:18:00.000-08:00

Loading content with jQuery AJAX - using a loading image

The .load() function doesn't have any way of dealing with errors in the examples provided here, so if the content is never loaded then the loading image will continue to display. I will show how to allow for error handling in a future post.

I get my loading images from www.ajaxload.info which is a useful resource for generating animated GIF images suitable for showing content is loading. There are a number of different indicator images and you can change the foreground and background colours.

Example in action

Click the "Click Me!" button below to see a working example in action. If you are viewing this in an RSS reader then you'll need to click through to the post in a web browser for the example to work.

After clicking "Click Me!" the loading image will appear, then the AJAX request will be made. The content from the AJAX request will replace the loading image once it has been loaded. For the purposes of this example, there's a 2 second delay between the loading image displaying and the AJAX request being made. See my "Using setTimeout() with Javascript" post for details about how to make a function run after a set time.

How it works

The HTML for the above example looks like this:

<input type="button" onclick="example_ajax_request()" value="Click Me!" />
<div id="example-placeholder">
<p>Placeholding text</p>
</div>

function example_ajax_request() {
$('#example-placeholder').html('<p><img src="/images/ajax-loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("/examples/ajax-loaded.html");
}

The first line in the example_ajax_request() function sets the html of the

to the loading image, and the second line then loads the content from /examples/ajax-loaded.html into the div.

It's best in this sort of situation to pre-load the loading image so that when the button is clicked it appears immediately from the cache. If this is not done then the AJAX request may be completed before the image has finished downloading. I'll look at doing that in another post.

How do I ... ?

2009-07-08T10:17:00.000-07:00

How do I select an item using class or id?

* This code selects an element with an id of "myDivId". Since id's are unique this expression always selects 1 element, or none if the id does not exist.

$('#myDivId')

* This code selects an element with a class of "myCssClass". Since any number of elements can have the same class, this expression will select any number of elements.

$('.myCssClass')

A selected element can be assigned to a javascript variable like this

var myDivElement = $('#myDivId');

Usually selected elements are acted on by other JQuery functions:

var myValue = $('#myDivId').val(); // get the value of an element

$('#myDivId').val("hello world"); // set the value of an element

How to use JQuery

2009-05-15T11:40:00.000-07:00

Jquery is JavaScript Library

It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery is designed to change the way that you write JavaScript.

How to use JQuery ?

To use JQuery we need to add below code

< script type="text/javascript" src="jquery.js"> < /script >

But remember if jquery.js is in the same directory as your HTML file, then give give the above path.I will suggest to make javascript in separate directory, like "/_js" folder , In that folder you can include your update version jquery.js and your own JS file which you use in your site like "global.js"

So path can be :

< script type="text/javascript" src="_js/jquery.js"> < /script >
< script type="text/javascript" src="_js/global.js"> < /script >

You can download your new version of jQuery.js from the Jquery.com

jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event

 $(document).ready(function(){
// Your code here
});

Example :

Inside the ready event, I have added click handler to the link:


$(document).ready(function(){
$("a").click(function(event){
alert("It is easy......");
});
});

If you want the convenience of the $ function for jQuery without colliding
some other use of the global $ function,the jQuery documentation suggests the
following

:

(function($) {
// Within this block, $ is a reference to jQuery
});