
Let's say, I have a page with HTML Select box in it. The requirement is to reload the page whenever the user changes Select box value. For example, if you have country names dropdown and you need to show a new set of address fields whenever the user changes the country. As a long time JQuery user, coding this is a piece of cake.

```javascript
$('#selectBox').on('change', function(event){
  // Reload page.
});
```

That works well, in all browsers, as long as the user use mouse to select a new value.

But the problem arises when the user has to use keyboard arrow / TAB keys to select a new value.

* Chrome and Internet Exlorer 9 fires a *change* event as soon as you use arrow keys to select a new value.
* Firefox will wait till the Select box loose focus **and then** fires the *change* event. So, in Firefox, you have to use down/up arrow keys to choose the value and then press TAB in order to fire the *change* event.

In my case, this inconsistency was not acceptable. I wanted the Firefox behavior in IE/Chrome too, as it is more appropriate to reload the page once the user completed done with selecting a new value, instead of reloading every time the user press down arrow on Select box.

So, I came up with following piece of code and wrapped it as a JQuery plugin.

```javascript
(function($){

  $.fn.onSelect = function(callback){

    return this.each(function(){

      if(!$(this).is('select')){
        // this plug-in is only for Select elements.
        return;
      }

      var selectBox = $(this);
      selectBox.data('previousValue', selectBox.val());

      selectBox.on('keyup', function(event){
        if(event.which === 13){
          selectBox.blur();
        }
      });

      selectBox.on('click blur', function(event){
        if(selectBox.data('previousValue') != selectBox.val()){
          selectBox.data('previousValue', selectBox.val());
          callback.call(selectBox, event);
        }
        return false;
      });

    });

  };

}(jQuery));
```

So, after adding the above code, I can do this:

```javascript
$('#selectBox').onSelect(function(event){
  // Reload page.
});
```

The above code will reload page only when the user done with selecting a new value. The behavior will be consistent across Chrome / Firefox / Internet Explorer. I.e. the call back you pass to `onSelect` will be called:

* When user selects a new value using mouse.
* When user uses keyboard / arrow keys to scroll to different values of dropdown box and press TAB or ENTER key after choosing a value.

The code is hosted at Github - [onSelect](https://github.com/vraa/onselect) and you are free to modify and use the code anyway you like.



```


onSelect - JQuery Plugin


Often I need to pull some content out of web pages. Of course, I can always do a simple _Ctrl C_. But many times, I want the scrapped content to be in a different format than it's already in. So, I used to write Java code that downloads the content and do some XML parsing and then converts it into the format I want. But, this became a tedious process soon.

So, these days I figured out another easy way to do the web scraping. JQuery!

IMO, JQuery is the best tool to do the DOM parsing and content extraction. Of course, that's why the JQuery library is built for.

But the problem here is, not all websites include JQuery with them and even if they do, you can't just go and execute your JavaScript code in amother person's website.

Thanks to Scratchpad from Firefox which solves the above problem. Starting last August, Firefox comes with a built-in webdev tool - [Scratchpad][1] that enables you to execute your own JavaScript code in the context of any website.

[1]: http://blog.mozilla.com/devtools/2011/08/15/introducing-scratchpad/ "Introducing Scratchpad"

So, this is what I do to scrape any public content from any web page:

1.  Open the page in Firefox.
2.  Press **Shift F4 **or go to **Firefox menu->Web developer->Scratchpad** to open the JavaScript editor.
3.  Include the below lines to add JQuery library to the current page ([thanks to this page][2]).
  ```javascript
      var GM_JQ = document.createElement('script');
      GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
      GM_JQ.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(GM_JQ);
  ```
4.  After that I can use any valid JQuery statement to navigate through the page content and parse it.

  ```javascript
      var pages = [];
      $("#Text1 table a").each(function(){
              pages.push($(this).attr('href'));
      });
  ```
[2]: http://blogs.ischool.berkeley.edu/i290-04f09/2009/09/12/add-jquery-to-any-or-every-webpage/ "Add jQuery to any (or every) webpage"



How I scrape web pages


Let's say you are using some external components in your web page that renders a button as below:

The above code will call the *delete() *method when user clicks on the button.

But, what if you want to show a confirmation box before calling the _delete()_? Since the code is rendered by a external component, most probably you won't be having control over how its code generated.

So, you have to intercept the onclick event and block it until your method is called and then invoke the original method.

Lets do it..

```javascript
    var btn = $("#btn");
    btn.data("funcToCall", btn.attr("onclick"));
    $("#btn").removeAttr("onclick");
    $("#btn").bind("click", function(e){
    	if(confirm("Are you sure?")){
    		var func = $(this).data("funcToCall");
    		eval(func);
    	}
    });
```

As you can see, the *onclick *function is first stored into that element and then the *onclick *attribute is removed. Finally when the button in clicked, our custom method is called first and based on the user decision, the *delete() *method is either called or not called.


Intercepting onclick event in JavaScript using JQuery


All these days, I was using [my home page][1] to tell my visitors about myself. My previous home page designs were all similar to magazine style with all the information spread across the page and the visitor can go and read.

[1]: https://veerasundar.com

But yesterday, I got an idea to change this. What if the user discover the information about me rather than me showing all information at once. It would increase the visitors curiosity and give them some fun rather than boring reading stuff.

Then born the idea of presenting my information by means of a simple card matching game. Sat down for 5 hours to write the game logic and design the site - thanks to JQuery, JQuery Flip, HTML5 and CSS3 for designing websites such an easy task. Within one day, I conceptualized the idea, implemented it and pushed it to live.

[![vraa-home-page][3]][3]

[]: https://veerasundar.com

Only the basic version is now live. I'm planning to add scoring, reloading, randomizing cards position and few more stuffs once I get some positive feedback from my readers.

[Play the game][1] and let me know your feedback.


#jquery (4)