jQuery

jQuery 1.6.1 has been released

Rajesh Pillai — Tue, 24 May 2011 06:05:22 GMT

For more info refer the below post

http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Some great improvements and fixes.

Free jQuery ebook online

Rajesh Pillai — Sun, 27 Jun 2010 13:39:40 GMT

jQuery fundametal online book is available at http://www.rebeccamurphey.com/jqfundamentals/book/release/html/

Enjoy :)

ASP.NET MVC Application In Action - I (DailyJournal)

Rajesh Pillai — Fri, 21 May 2010 02:27:44 GMT

Its been long due I was planning to write an article on creating some useful ASP.NET MVC application. I have code named it "DailyJournal". Its a simple application which allows creation of multiple activities and assign tasks to these activities. Its' kind of "Yet another Task/Todo application".

The credentials which you can use with the attached demo application is shown below.

Collapse Copy Code

User Name : admin 
Password   : admin123

Framework/Libraries Used

ASP.NET MVC
jQuery + jQuery UI (for ajax and UI)
ELMAH for Error logging

Warning Ahead

This is just a rough draft and so I am putting down some of the known limitation.
Some points of warning before we move further with this application. This is just an early prototype. As such many of the design principles have been ignored. But, I try to cover that up in the next update once I get my head around this.

The application in its current state supports the following features

Create users
Assign Activities to users
Assign tasks to activities
Assign a status to a task

The user creation/authentication is being done by the default Membership provider. Most of the activities are highly visual i.e. you can drag-drop task to different areas, in-place edition of task details and so on.

The following are the current issues with the design which I promise to refactor in the second version.

No Validations
Fat Controller
XSS/CSS vulnerable
No Service model/abstraction yet. For the demo LINQ to SQL is implemented.
No separation of layers
UI Design
et el...

This is just an extract. For source code and more information proceed to

http://www.codeproject.com/KB/aspnet/mvcinaction.aspx

Hope you like this!

jQuery 1.4 Released

Rajesh Pillai — Sun, 17 Jan 2010 17:26:42 GMT

jQuery 1.4 released. You can find more info at http://api.jquery.com/category/version/1.4/

Also celebrate jQuery 1.4 release with 14 days of jquery at jquery14.com/pre-release-1

Learn about 15 new features of jQuery you must know net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

Enjoy jQuerying.....

jQuery Limit text entry

Rajesh Pillai — Thu, 03 Dec 2009 12:10:31 GMT

Lets quickly have a look at how you can limit the entry to textbox and display the character input left to be keyed in.

First things first, the script.

<script type="text/javascript">
    $(function() {
        var limit = 250;
        $('#dvLimit').text('250 characters left');
        $('textarea[id$=txtDemoLimit]').keyup(function() {
            var len = $(this).val().length;
            if (len > limit) {
                this.value = this.value.substring(0, limit);
            }
            $("#dvLimit").text(limit - len + " characters left");
        });
    });
</script>

The $() function does the following things on startup.

1. Set a variable to a limit of 250 characters.

2. Assign a default value to the "div" element with id "dvLimit"

3. Find the control that contains the id "txtDemoLimit" and hook up the keyup event.

4. In the keyup event get the length of the current text.

5. If len is greater than the limit set, set the text value as a substring within the specified limit.

6. Update the div with the no. of characters left to be keyed in.

The HTML is shown below.

<div id="dvLimit"></div>
<div>
    <asp:TextBox ID="txtDemoLimit" TextMode="MultiLine" Columns = "40" Rows = "10" runat="server"></asp:TextBox>
</div>

The following is the application in action.

Modify this as per your requiement and enjoy jQuerying !!!

<a href="http://www.codeproject.com/script/Articles/BlogFeedList.aspx?amid=48141" style="display:none" rel="tag">CodeProject</a>

Lets build a simple blog engine - Prototype for Public Site [eboard] - 3

Rajesh Pillai — Fri, 27 Nov 2009 18:55:24 GMT

Prototype

This time we will have a basic prototype ready for the public website. The design will be kept simple so that we
could concentrate on the main task at hand. Later on we will enable theming,so that the user could customize the
blog to their heart's content.

The landing page looks like in the figure below.

Create a "Blog" folder under the "Views" folder in the website. Add an aspx and copy the below markup and name it "List.aspx".

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Eboard.Model.Blog>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    List
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>You have <%= Model.Count() %> blogs created.</h2>
    <table>
        <tr>
            <th></th>
            <th>Title</th>
            <th>Created On</th>
        </tr>

    <% foreach (var item in Model) { %>
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new {  id=item.Id  }) %> |
                <%= Html.ActionLink("Show", "Show", new {  id=item.Id  })%>
            </td>
            <td>
                <%= Html.Encode(item.Title) %>
            </td>
            <td>
                <%= Html.Encode(String.Format("{0:g}", item.CreatedOn)) %>
            </td>
        </tr>
    <% } %>
    </table>
    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>
</asp:Content>

Create a "BlogController.cs" in the "Controller" folder and copy the following code.

public ActionResult List()
{
ViewData["Message"] = "Welcome to Ebaord. The minimalistic blogging engine!";
return View(); // by default this returns a view with the name "List"
}

The above is just the boiler plate code just for reference. The actual method will be implemented once we build our
repository and service layer.

When the user click on the "Show" link the user will be taken to the home page of that blog.

The final product may vary a bit as we go along. See you soon. Happy prototyping....

jQuery Receipe : Build a simple pager plugin to use with asp.net mvc

Rajesh Pillai — Fri, 27 Nov 2009 07:11:05 GMT

Welcome back. This time we will look at creating a simple jquery pager plugin to use with asp.net mvc project. Please note the intent is to learn
the basics of jquery plugin development. The control as such is not recommended for use in production environment.

I recommend having a look at the jQuery Authoring Guideline at
docs.jquery.com/Plugins/Authoring

Let's begin our journey into the mystery of jquery plugin. The first step is to create a self executing anonymous function. Anonymous functions play
a very important role in plugin development. Lets dissect it.

Let's have a look at the application in action.

First let's understand the different way in which a function can be declared.



Pattern 1

function hi() { 

    alert('say hi'); 

}


Pattern 2

var hi = function() { 

    alert('say hi'); 

}

The result of the above two function is the same.
hi(); // displays the alert

Steps to invoke anonymous function



    # original

    function hi() { alert('say hi'); }

    

    # step 1 

    # WRAP EVERYTHING IN () SO THAT WE HAVE A CONTEXT TO INVOKE THE FUNCTION

    > (function hi() { alert('say hi'); })

    

    # now call () to invoke this function

    > (function hi() { alert('say hi'); })();

The final code is a bit awkward look for the uninitiated eye. But, that is all anonymous function is all about. With this understanding the
below code now seems to make sense.


(function($) {

}) (jQuery);


In the above function we are passing "$" as the parameter to the anonymous function.  "$" in this case is 
jQuery object that is passed while invoking this function.


A note about self executing anonymous function

Self-invoking functions are anonymous functions declared at run time and then invoke it immediately. Since 
they are anonymous functions they can’t be invoked twice. They are a good candidate for initialization work 
which is exactly what is happening in the jQuery plugin pattern.

Now let's quickly have a look at how we can extend the jQuery object.

    (function($) {
        $.fn.pager = function(url, callback, loadData) {
        }
    }) (jQuery);

jQuery offers a mechanism for adding in methods and functionality to the existing jQuery object.

$.fn.pager  (indicates we are extending the jQuery object witha pager function.

Let's move on.  Our function requires three parameter to function correclty.  The URL of the action method, 
the callback function to invoke and a boolean indicator whether to load data on first call or not.



Since jQuery should support muliple element we should wrap the call to our main function in an each() block.


(function($) {

    $.fn.pager = function(url, callback, loadData) {

        var cb = callback;

        var url = url;

        var element; // = $(this);

        this.each(function() {

            element = $(this);

            buildPager();

        });

        function buildPager() {

            var ht = '<table class="slickpager" style="margin-left:auto;margin-right:auto">';
            ht += '<tr >';
            ht += '<td  id="prev" class="previous previous-off" >«</td>';
            ht += '<td >';
            ht += 'Page <input type="text" style="width:30px" id="pageno" value="1"/> of <span id="totalpage">10</span>';
            ht += '</td>';
            ht += '<td id="next" class="next next-on"><a href="#">»</a></td>   ';
            ht += '</tr>';
            ht += '</table>';
            element.html(ht);

            $("table.slickpager td", element).css("background-color", "#DAEAF6");

            $(element).css("background-color", "#DAEAF6");

            if (loadData) {
                var parameter = "pageNo=1";
                post(url, parameter, callback, "json");
            }
            else {

                attachPageEvents(url, cb);
            }
        }

}) (jQuery);

The buildPager() function creates the necessary HTML to generate the pager widget.  Me being lazy "pageNo"parameter is 
hardcoded. You can make it as a parameter to the function.  This parameter is passed to the URL to fetch paginated records.

The attachPageEvent() function hooks up the events for the "next", "previous" events.

function attachPageEvents(url, callback) {

    $("table.slickpager td a", element).unbind("click");

    $("table.slickpager td a", element).click(function(event) {
        event.preventDefault();
        var qs = getQueryString(this.href)["page"];
        var parameter = "pageno=" + qs;
        post(url, parameter, callback, "json");
    });

    $("table.slickpager input#pageno", element).unbind("blur");

    $("table.slickpager input#pageno", element).blur(function(event) {
        var pageno = $(this).val();
        var parameter = "pageno=" + pageno;
        post(url, parameter, callback, "json");
    });
}

The post method is show below. This function is important as it is here that the callback function that the client passed is invoked on success of the post.



function post(url, parameter, callback, dataType) {

    $.ajax({

        type: "post",

        url: url,

        data: parameter,

        dataType: dataType,

        beforeSend: function(XMLHttpRequest) {

        },

        success: function(data) {

            updatePager(url, data);

            attachPageEvents(url, callback);



            if (typeof callback == 'function') {

                callback.call(this, data);

            }

        },

        error: function(msg) {

            alert("error : " + msg);

        },

        complete: function(XMLHttpRequest, textStatus) {

        }

    });

    }


The following block invokes the callback function.


if (typeof callback == 'function') {
    callback.call(this, data);
}


The updatePager() function updates the status of the pager control.

function updatePager(url, msg) {

    // set the prev text and link.
    $("table.slickpager td#prev", element).removeClass("previous-off").addClass("previous-on");

    var prevText = $("table.slickpager td#prev", element).text();

    var lnkPrev = "<a href='" + url + "?page=" + (msg.PageIndex - 1).toString() + "'>" + prevText + "</a>";

    $("table.slickpager td#prev", element).html(lnkPrev);



    // set the next text and link.

    var nextText = $("table.slickpager tbody tr td#next", element).text();

    var lnkNext = "<a href='" + url + "?page=" + (msg.PageIndex + 1).toString() + "'>" + nextText + "</a>";



    $("table.slickpager td#next", element).removeClass("next-off").addClass("next-on");

    $("table.slickpager td#next", element).html(lnkNext);



    $("table.slickpager input#pageno", element).val(msg.PageIndex);

    $("table.slickpager td span#totalpage", element).text(msg.TotalPages.toString());



    if (!msg.HasPreviousPage) {

        var prevText = $("table.slickpager td#prev", element).text();

        $("table.slickpager td#prev", element).html(prevText);

        $("table.slickpager td#prev").removeClass("previous").addClass("previous-off");

    }

    if (!msg.HasNextPage) {

        var nextText = $("table.slickpager td#next", element).text();

        $("table.slickpager td#next", element).html(nextText);

        $("table.slickpager td#next", element).removeClass("next").addClass("next-off");

    }

}



There are some optimizations which we could do.  I may possibly highlight that in another blog post.
Now comes the most important part.


    return this;


Invoke this statement at the end of all the function.  This will keep the jQuery design
of chainability of objects intact.



To use this pager component in your page

<script type="text/javascript">

    $(function() {

        $("#pager-demo").pager("/home/GetRandomData", callback, true);

    });



    function callback(msg) {

        if (msg == null)

            return false;

        

        if (msg.Items.length > 0) {

            var data = "<table border='0' width='100%'>"

            data += "<thead><tr>";

            data += "<th>Book Name</th>";

            data += "<th>Tag</th>";

            data += "</tr></thead>";

            $(msg.Items).each(function() {

                data += "<tr>";

                data += "<td><a href='#'>" + this.BookName + "</a></td><td>" + this.Tag + "</td>";

            });

            data += "</table>";

            //alert(data);

            $("div#content").html(data);

        }

        else {

            $("div#content").html("<i>There are no books to be displayed.</i>");

        }

    }

</script>

</pre>

Modify the callback method as per your requirement.  The HTML markup is shown below.



<div id="widget">

    <div id="content"></div>

    <div id="pager-demo">

    </div>

</div>

</pre 
For reference the css is given below
.slickpager a{

    border:solid 1px #9aafe5;

    margin-right:2px;

}



.slickpager .previous-off, .slickpager .next-off {

    border:solid 1px #DEDEDE;

    color:#888888;

    display:block;

    float:left;

    font-weight:bold;

    margin-right:2px;

    padding:3px 4px;

}

.slickpager .next a, .slickpager .previous a {

    font-weight:bold;

}

.slickpager .active{

    background:#2e6ab1;

    color:#FFFFFF;

    font-weight:bold;

    display:block;

    float:left;

    padding:4px 6px;

}



.slickpager a:link, .slickpager a:visited {

    color:#0e509e;

    display:block;

    float:left;

    padding:3px 6px;

    text-decoration:none;

}



.slickpager a:hover{

     border:solid 1px #0e509e

}
And here's the entire source code for jquery.slickpager.js
 
(function($) {
    $.fn.pager = function(url, callback, loadData) {
        var cb = callback;
        var url = url;
        var element; // = $(this);

        this.each(function() {
            element = $(this);
            buildPager();
        });

        function buildPager() {
            var ht = '<table class="slickpager" style="margin-left:auto;margin-right:auto">';
            ht += '<tr >';
            ht += '<td  id="prev" class="previous previous-off" >«</td>';
            ht += '<td >';
            ht += 'Page <input type="text" style="width:30px" id="pageno" value="1"/> of <span id="totalpage">10</span>';
            ht += '</td>';
            ht += '<td id="next" class="next next-on"><a href="#">»</a></td>   ';
            ht += '</tr>';
            ht += '</table>';

            element.html(ht);

            $("table.slickpager td", element).css("background-color", "#DAEAF6");

            $(element).css("background-color", "#DAEAF6");

            if (loadData) {
                var parameter = "pageNo=1";
                post(url, parameter, callback, "json");
            }
            else {
                attachPageEvents(url, cb);
            }
        }

        function attachPageEvents(url, callback) {
            $("table.slickpager td a", element).unbind("click");
            $("table.slickpager td a", element).click(function(event) {
                event.preventDefault();
                var qs = getQueryString(this.href)["page"];
                var parameter = "pageno=" + qs;
                post(url, parameter, callback, "json");
            });

            $("table.slickpager input#pageno", element).unbind("blur");

            $("table.slickpager input#pageno", element).blur(function(event) {
                var pageno = $(this).val();
                var parameter = "pageno=" + pageno;
                post(url, parameter, callback, "json");
            });
        }

        function post(url, parameter, callback, dataType) {
            $.ajax({
                type: "post",
                url: url,
                data: parameter,
                dataType: dataType,
                beforeSend: function(XMLHttpRequest) {
                    //$(element).html('<img id="loader-img" src="/Images/ajax-loader.gif" />');
                },
                success: function(data) {
                    updatePager(url, data);
                    attachPageEvents(url, callback);

                    if (typeof callback == 'function') {
                        callback.call(this, data);
                    }
                },
                error: function(msg) {
                    alert("error : " + msg);
                },
                complete: function(XMLHttpRequest, textStatus) {
                }
            });
        }

        function getQueryString(href) {
            var assoc = new Array();

            if (href != '') {
                var queryString = unescape(href.substring(1));
                queryString = unescape(href.substring(href.lastIndexOf("?") + 1));
            }
            else {
                var queryString = unescape(location.search.substring(1));
            }

            var keyValues = queryString.split('&');
            for (var i in keyValues) {
                var key = keyValues[i].split('=');
                assoc[key[0]] = key[1];
            }
            return assoc;
        }

        function updatePager(url, msg) {
            // set the prev text and link.

            $("table.slickpager td#prev", element).removeClass("previous-off").addClass("previous-on");

            var prevText = $("table.slickpager td#prev", element).text();

            var lnkPrev = "<a href='" + url + "?page=" + (msg.PageIndex - 1).toString() + "'>" + prevText + "</a>";
            $("table.slickpager td#prev", element).html(lnkPrev);


            // set the next text and link.
            var nextText = $("table.slickpager tbody tr td#next", element).text();
            var lnkNext = "<a href='" + url + "?page=" + (msg.PageIndex + 1).toString() + "'>" + nextText + "</a>";


            $("table.slickpager td#next", element).removeClass("next-off").addClass("next-on");
            $("table.slickpager td#next", element).html(lnkNext);

            $("table.slickpager input#pageno", element).val(msg.PageIndex);
            $("table.slickpager td span#totalpage", element).text(msg.TotalPages.toString());

            if (!msg.HasPreviousPage) {
                var prevText = $("table.slickpager td#prev", element).text();
                $("table.slickpager td#prev", element).html(prevText);
                $("table.slickpager td#prev").removeClass("previous").addClass("previous-off");
            }
            if (!msg.HasNextPage) {
                var nextText = $("table.slickpager td#next", element).text();
                $("table.slickpager td#next", element).html(nextText);
                $("table.slickpager td#next", element).removeClass("next").addClass("next-off");
            }
        }
        return this;
    }
})(jQuery);

Hope you enjoyed this blog post.  I'll soon post the source link to this blog.

Lets build a simple blog engine [eboard] - 2

Rajesh Pillai — Thu, 26 Nov 2009 20:17:50 GMT

Welcome to the 2nd series of building a blog engine. In the first part we have laid out the foundation for this application and modeled the DB structure for quick mockup.

You can read the first part here lets-build-a-simple-blog-engine-eboard---1.aspx

One thing I missed to mentioned in the first part is the we will be using the excellent ELMAH for error logging. This is a pretty cool module which hooks up to the system
and logs all exceptions without writing a single line of code.

You can read more about ELMAH at code.google.com/p/elmah/

What we will be doing is creating the public facing website first rather than creating the administration screens. We will decide upon the themes to use and mockup a
quick prototype for the public view.

The following the is the project structure I came up with. This is just skeleton and the meat will be added incrementally over next couple of weeks.

Project Structure

I have divided the project according to the responsibility of each component. As you can see we will be using the LinqToSql along with the Repository pattern for
data access. This will provide us with the flexibility to switch data provider at will and also provides the principle of OCP (Open for Extension and Closed for Modification).

I prefer to keep the model in a separate project rather than keeping it along with the web project. For this project the controllers wil be lying in the default "Controllers" folder.

We will also change the layout of the "Content" folder. The content folder is where all your css are kept. We will take a different approach possibly to enable easy theming
of our blogs.

Watch for the next post, where we will be mocking up the public site for the blog.

Lets build a simple blog engine [eboard] - 1

Rajesh Pillai — Thu, 26 Nov 2009 18:47:59 GMT

Welcome to eBoard

Hello and welcome to this series of application development using asp.net mvc, jquery, automapper, ninject. Though the world doesn't need another blog engine, but sometimes reinventing the
wheel teaches you many unknown things and it's the learning experinece that counts more than anything else.

I have been using asp.net mvc + jquery for about a year now. So, it's time to put down something which will help the beginner with this technologies get a good graps of the fundamentals skill required
to do web development.

The side effect of this is we will also learn about some design principles, best practices and troubleshooting will add icing to the cake.

Without further ado, lets begin. Let's first lay down the basic business requirement for the blog engine. This may be simple in form, but will help us keep an eye on the actual requirement and prevent
us from deviating from the main goal.

The blog engine will be named as "eboard".

Requirements

Multi blog support : The user should be able to create multiple blogs.
Make posts
Assign a category to the post
Assing one or more tags to the post
Allow readers to post comment
Comment Moderation
Simple Blog Settings like theme selection.

Apart from creating a working blog engine the following are educational/learning benefit the reader may derive from this experience

Learn asp.net mvc and jquery
Learn to design/extend a validation framework
Learn about Repository pattern
Learn dependency injection using Ninject.
Service design
Design for testability (though we won't be writing test at this point in time).

With the above requirements in mind lets move ahead a take a shot at creating the database for our blog. Some of the reader may frown at this idea. Designing the database first or the model first is akin to
the chicken and the hen problem. But for this small application I think the database design will closely mimic the model as well. Please free to shout at me if you feel anything is terribly wrong here.

The initial DB model looks like the figure shown below.

DB Model

We are using the membership provider for users and roles. The above DB model gives us a good start in designing our blog. It has all the essential elements to support the business
requirement that we have laid out for "eboard".

The below table highlights the essential details about the above model.

BlogSettings	This stores the essential settings related to blog. Curently it has only the name of the theme and comment moderation flag. This can be extended as required.
Blog	This allows us to have multiple blog created.
Post	The posts that goes with the blog.
Comment	The comments that goes with the post.
Category	A post can belong to only one category.
Tags	A post can hve multiple tag. Tags are useful for search.

That's it for this episode. In the next episode we will layout the folder structure for the "eboard" application. Till then happy learning and enjoy blogging.

CodeProject

In-Place-Edit with jQuery

Rajesh Pillai — Thu, 26 Nov 2009 07:24:42 GMT

Let's try a simple in-place edit with jquery. For demonstration purpose I am using the plain old HTML file. However,
if you, wish you could apply the same technique to asp.net, asp.net mvc or php or any other web application as well.

Here is the html that we will be using for the demo.

<body>
    <div style="line-height:3xm;background-color:skyblue">
        Double Click the below paragraph to edit.
    </div>
    </br></br>
    <div class="edit">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
        sagittis ipsum. Praesent mauris.
        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.
    </div>
</body>

The element that needs to be made editable is given a class of "edit".

The following is the minimal CSS we will be using for this demo.

</style>

Let's add a reference to the jquery library

If you have a local copy then refer it as follows

<script src="scripts/jquery-1.3.2.min.js"></script>

The above assumes you have a copy of the jquery library in the scripts folder on your root directory.

Otherwise you can always grab the latest copy from google..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Now let's setup the event handler to make the div editable.

The $() function is jquery's way of telling the browser to execte the function when the DOM is ready.

Here' is the setEditable function.

function trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g, "");
}

The above function essentially does three things.

Hook up the click event handler on the element with class ".edit".
Inside the function the following are the sequence that happens
1. Build the html for inserting a <textarea> for editing.
2. Build the html for inserting a "save" and "cancel" button.
3. Save the current value of the element.
4. Removes the current div (with class .edit) and inserts the above html.
5. Hooks up the events for "save" and "cancel" button.

Note: the jquery function after() inserts content after each of the matched elements.

The below function is called when you click "save" or "cancel" button

That's it. You can actually make an ajax request and send this data to the server for persistence. We will see
that in an another post.