Social Vitamin » Ajax

Yahoo! Query Language (YQL)

Michael D. Irizarry — Fri, 10 Jul 2009 15:09:18 +0000

The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services. With YQL, apps run faster with fewer lines of code and a smaller network footprint.

Yahoo! and other websites across the Internet make much of their structured data available to developers, primarily through Web services. To access and query these services, developers traditionally endure the pain of locating the right URLs and documentation to access and query each Web service.

With YQL, developers can access and shape data across the Internet through one simple language, eliminating the need to learn how to call different APIs.

How Do I Get Started?

Check out the YQL Console.
Read how to access YQL from your application.
Get your API Keys to sign your requests if you need them.

10 jQuery 1.3 Tips and Tricks for everyday use

Michael D. Irizarry — Mon, 18 May 2009 17:22:18 +0000

Some useful jQuery Tips and Tricks for your everyday use. Removing and Hiding Dom Elements, Browser Detection, Toggling, Handling Select Lists and more.

1. Removing, Showing or Hiding DOM elements

// Remove Element
$("#div").remove();
 
// Hide
$("#div").hide();
$("#div").hide("slow"); 
$("#div").hide("fast");
$("#div").hide(1000);  
$("#div").hide(1000, callback); 
 
// Show
$("#div").show();
$("#div").show("slow"); 
$("#div").show("fast");
$("#div").show(1000);  
$("#div").show(1000, callback);  
 
// Toggle Hide/ Show
$("#div").toggle();
$("#div").toggle("slow");

2. Select All Check Boxes

// Check
$("#selectList").attr('checked', true); 
 
// Uncheck
$("#selectList").attr('checked', false);

3. Creating Images on the Fly

$("").attr({ "src": "images/loadingAnimation.gif" }).appendTo("#div");

4. jQuery noConflict used when using other libraries

var $j = jQuery.noConflict();
$j('#div').hide();

5. Getting Selected Radio Button value

$("input[name='id'][checked]").val();

6. Getting Select List values

// Value
$('#selectList').val(); 
 
// Text value
$('#selectList :selected').text() 
 
// Multiple Selection
var selections = [];
$('#multipleList :selected').each(function(i, selected){
     selections[i] = $(selected).text();
});

7. Check if checkbox is Checked

$('#checkBox').attr('checked'); 
 
$('#checkBoxID').is(':checked'); 
 
$("[:checkbox]:checked").each(
    function() {
    } 
);

8. Browser Detection

if( $.browser.safari ) { // Do something }
 
if ($.browser.msie && $.browser.version > 6 ) { // Do something }
 
if ($.browser.msie && $.browser.version <= 6 ) { // Do something }
 
if ($.browser.mozilla && $.browser.version >= "1.8" )  { // Do something }

9. Highlight a Row onClick

$("tr").click(function() {
    $(this).toggleClass("rowActive");
});

/* CSS highlights clicked row */
.rowActive {  
    border: 1px solid #333333; 
    background-color: #999999; 
}

10. Building the DOM Dynamically

$("").attr({id:"header", "class":"header"}).html("Welcome to my Site!").appendTo(document.body);
$("").attr("src", "images/logo.gif").appendTo("#header");

JS detecting event support in browsers

Michael D. Irizarry — Fri, 03 Apr 2009 04:08:16 +0000

As you may know there is no easy way of detecting which elements supports which events across browsers. Kangax from Perfection Kills has come up with a very clever way of detecting them.

JavaScript

 
  var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

Use

isEventSupported(<"Type of Event>")

For a more detailed description visit Kangax blog

Debouncing Javascript Methods

Michael D. Irizarry — Wed, 01 Apr 2009 03:23:58 +0000

What is debouncing anyways? Debouncing is any kind of hardware device or software that ensures that only a single signal will be acted upon for a single opening or closing of a contact. Imagine you have a form with a few elements that a user may access thru the tab key, on each element you have an onfocus event that will trigger an Ajax call to the server to acquire some data. You could just imagine how you could kill the server with all those Ajax calls! So that’s where debouncing comes into play. With debouncing your assuring that the method will be triggered in the element that the user intended to, although is not perfect it does work better than Throttling.

With this little method writen by John Hann from Unscriptable.com you can add debouncing functionality to your JS methods.

Javascript

var debounce = function (func, threshold, execAsap) {
 
    var timeout;
 
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null;
        };
 
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
 
        timeout = setTimeout(delayed, threshold || 100);
    };
 
}

Usage

    // using debounce in a constructor or initialization function to debounce
    // focus events for a widget (onFocus is the original handler):
    this.debouncedOnFocus = this.onFocus.debounce(500, false);
    this.inputNode.addEventListener('focus', this.debouncedOnFocus, false);