Gator.js a micro event handling framework

I’ve had a look at gator.js, it’s useful because it’s very a lightweight way of handling events on page elements. Quick demo below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gator demo</title>
      <script type="text/javascript" src="gator.min.js"></script>
</head>
<body>
     <table id="mytable">
        <tr>
            <td>A</td>
            <td>1</td>
        </tr>
        <tr>
            <td>B</td>
            <td>2</td>
        </tr>
        <tr>
            <td>C</td>
            <td>3</td>
        </tr>
        <tr>
            <td>D</td>
            <td>4</td>
        </tr>
        <tr>
            <td>E</td>
            <td>5</td>
        </tr>
    </table>
    <script type="text/javascript">
        var table = document.getElementById("mytable");
     
        Gator(table).on('click', 'tr', function (e) {
            alert("clicked on table row");
        });
    </script>
</body>
</html>

JavaScript check if a variable is defined

A good way to check if a variable has been defined is to make use of JavaScript typeof:

<script type="text/javascript">
    var varA = "Hello World!";

    if (typeof varA !== "undefined") {
        console.log("Defined");
    } else {
        console.log("Undefined");
    }
    
    // Undefined variable
    if (typeof varB !== "undefined") {
        console.log("Defined");
    } else {
        console.log("Undefined");
    }
</script>

JavaScript parse query string values

A quick post on how to use JavaScript to retrieve a query string value.

   // Function to parse the querystring
   getQueryString= function(sVar) {
        return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
    };

   // Get the value
   var queryParam = getQueryString("your key");

JQuery AJAX request syntax

A simple JQuery AJAX implementation.

  var data = JSON.stringify({
                field1: xxx,
                field2: yyy
            });

            $(document).ready(function () {
                $.ajax({
                    type: 'POST',
                    data: data,
                    contentType: 'application/json',
                    url: '/path/'
                }).success(function (data) {
                    console.log(data);
                }).error(function (err) {
                    console.log(err);
                });
            });

JQuery event.preventDefault()

In JQuery, the default event behaviour can be altered by using event.preventDefault() which will stop the default action from taking place.

<script>
$( "#alink" ).click(function( event ) {
  event.preventDefault();
});
</script>

<a id="alink" href="http://thechsharper.com">Default click action is prevented</a>

JQuery set a timer event on a page

A example of a timer interval on a page to perform an action on a schedule.

 ...
  // Call the function every minute
 setInterval(function () {
    // Perform action here
    aFunction(params);
 }, 60000);
...