SuperLoad jQuery Plugin

This plugin adds the ability to update multiple elements with a single Ajax response.

Usage

$.superLoad( options );

The options are the same as taken by the jQuery.ajax( ) method, with
the following observations:
dataType: defaults to 'html'
success: will be called after the content is updated on the page.

Expected response format:

<div class="ajax-response">

    <div class="ajax-content" title="!update #div1">
        <p>
            Anything inside this div will be used to update the #div1 element
            like $('#div1').html( $(thisDiv).html() );
        </p>
    </div>

    <div class="ajax-content" title="!appendTo #div2">
        <p>
            Anything inside this div will be appended to the #div2 element
            like $('#div2').append( $(thisDiv).html() );
        </p>
    </div>

    <div class="ajax-content" title="!prependTo #div3">
        <p>
            Anything inside this div will be prepended to the #div3 element
            like $('#div3').prepend( $(thisDiv).html() );
        </p>
    </div>

    <div class="ajax-content" title="#div4">
        <p>
            if the !command is not given, !update will be assumed
        </p>
    </div>

    <div class="ajax-content" title="!replaceWith #div5">
        <p>
            Replaces #div5 with this P element
        </p>
    </div>

    <script>
        //each script tag will be evaluated after the content has been applied.
        doStuff();
    </script>

    <script>
        doOtherStuff();
    </script>

</div>

The title attribute: 

• The ajax-content element's title attribute is used to determine what to do with the content:
• The format is: "!command selector"
• "!command": defaults to !update
• !update: replaces the inner HTML of the selected element(s) with the inner HTML of the ajax-content
• prependTo: adds the inner HTML of the ajax-content to the top of the inner HTML of the selected element(s)
• !appendTo: adds the inner HTML of the ajax-content to the bottom of the inner HTML of the selected element(s)
• !other: Beyond the above 3 standard !commands, one can also simply pass the name of any valid jQuery command (default of from a plugin) as long as the command is able to be applied to the selected element(s) and takes the new content as its argument.

JQuery Pluggins

JQuery Pluggins is a mechanism for adding in methods and functionality. You can found a lot of available pluggins. Read more about pluggin developing.

A simple example :

jQuery.fn.mypluggin = function() {
  return this.each(function(){
    alert(this);
  });
};

Using our developped pluggin : $("div p").mypluggin ();

Dynamically adding table row count number using JavaScript and jQuery

Recently on jQuery mailing list a user asked how he/she could add a row count in their table automatically. So I wrote a code snippet which looks like this:

$(document).ready(function(){
  $("table").each(function(){
    if($(this).is('table')){
      $('thead th:first-child, thead td:first-child', this).each(
                                                   function(){
        if($(this).is('td'))
          $(this).before('<td>#</td>');
        else if($(this).is('th'))
          $(this).before('<th>#</th>');
      });
      $('tbody td:first-child', this).each(function(i){
        $(this).before('<td>'+(i+1)+'</td>');
      });
    }
  });
});

This code was for specific case, where there is only one table on the page and it has only one row in its header. That is why I took into the account the possibility of row spans and multi line rows in header and rewrote the code. Then made a plugin out of it. So, here is the final code:

function($){ $.fn.extend({ addCount: function() { return $(this).each(function(){ if($(this).is('table')){ $('thead th:first, thead td:first', this).each(function(){ if($(this).is('td')) $(this).before('<td rowspan="'+$('thead tr').length+'">#</td>'); else if($(this).is('th')) $(this).before('<th rowspan="'+$('thead tr').length+'">#</th>'); }); $('tbody td:first-child', this).each(function(i){ $(this).before('<td>'+(i+1)+'</td>'); }); } }); } }); })(jQuery);

To apply it to your tables use this code:

$('table').addCount();
$('.some-table-class').addCount();
$('#some-table-id').addCount();

If you have better solution, just tell me !

QR Code (generator) plugin for jQuery & JavaScript

I recently came across a 2 dimensional barcode called QR Code. QR code’s are popular in Japan and they are mainly used there to quickly get to some website on their mobiles by simply taking a picture of the QR code. You may read more about QR codes on Wikipedia.

Here is an example of QR code for jQuery HowTo blog:

If you have a QR code reader on your mobile take a picture of it and it will open this website. Cool ha?!

Anyway, there are plenty of free online QR code generator sites, but no JavaScript and jQuery plugins/functions. So, I quickly searched for a free online QR code generator sites with “friendly” URL’s and put together a javascript and jQuery functions that generate QR barcode image’s URL for passed URLs. I used Kaywa & University of Bath services.

Here are javascript and jQuery QR code functions:

// JavaScript function
function qrcode(url, size){
  if(typeof(size) == 'undefined') size = 8;
  return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url;
}
qrcode('http://jquery-howto.blogspot.com');

// jQuery plugin
(function ($) {
  $.fn.qrcode = function(url, size) {
    if(typeof(size) == 'undefined') size = 8;
    return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url;
  }
})(jQuery);
$().qrcode('http://www.google.com');

The code above utilizes Kaywa’s online QR code generator. You can specify image site as the second argument to the function. The size argument mut be between 1 and 40 and the generated image will 32 x your argument.

Here is javascript and jQuery code for University of Bath barcode generator:

// JavaScript function
function qrcode(url){
  return 'http://go.bath.ac.uk/qr/download?DATA='+url;
}
qrcode('http://jquery-howto.blogspot.com');

// jQuery plugin
(function ($) {
  $.fn.qrcode = function(url) {
    return 'http://go.bath.ac.uk/qr/download?DATA='+url;
  }
})(jQuery);
$().qrcode('http://www.google.com');

If you have better solution, just tell me !