theKindOfMe

January 17, 2009

Simple UI for Google Search with Greasemonkey and jQuery

Filed under: Uncategorized — Tags: , , — yasi8h @ 12:10 pm
niceme gm script screenshot 1

'simple google' gm script screenshot 1

niceme screenshot 2

'simple google' gm script screenshot 2

we all agree that most of the google web apps our there are simple. i love simple things too. in fact i am a firm ‘believer’ of the KISS philosophy. any ways getting in to the subject. google search have been very simple so far. and it still is very much simple. but i feel at times that it could be much more simpler that it is. i don’t need it’s menu bar, and i don’t want to see all those other links it have on its page…etc so with my new found love jQuery, i thought of making it a bit more simpler. i just removed(set style to display : none; so its there, but its hidden from the user’s view) all most every thing other than the google logo and the text box in the page from the users view. it was pretty straight forward actually. here the code.

// ==UserScript==
// @name           simplegoogle
// @namespace      thekindofme
// @include        http://www.google.lk/
// @include    http://www.google.lk/webhp*

// ==/UserScript==

//hide the whole document till GM runs letsJQuery()
document.body.style.display = "none";

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') {window.setTimeout(GM_wait,100);}
        else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        $("body > div").hide();
        $("center > *").hide();
        $("center > div > div").hide();
        $("center > div").show().css("margin-top", "20px"); //the google logo

        $("center > form").show();
        $("center > form > table > tbody > tr > td").hide();
        $("center > form > table > tbody > tr > td:eq(1)").show();
        $("center > form > table > tbody > tr > td:eq(1) > input").hide();
       
        var searchTextBox = $("center > form > table > tbody > tr > td:eq(1) > input:eq(1)").css("padding", "2px 6px 4px 6px").css("color", "#555555").css("background-color", "#E2FFE4").css("border", "#dddddd 2px solid").css("-moz-border-radius", "10px").css("margin-top", "15px");
        $("body").show();

        arrangesearchTextBoxLayout(searchTextBox);

        $(window).resize(function(){
            arrangesearchTextBoxLayout(searchTextBox);
            });

        searchTextBox.show().focus();
    }

    function arrangesearchTextBoxLayout(searchTextBox){
        searchTextBox.css("width", ($(window).width() /2)).css("font-size",($(window).height() /22) + "px");

    }

keep it simple stupid 🙂

Advertisements

January 12, 2009

Ajax Enabling MVCContrib Grid’s Pagination with jQuery

Filed under: Uncategorized — Tags: , , , , — yasi8h @ 8:16 am

The MVCContrib project(at http://www.codeplex.com/MVCContrib ) provides a nice Grid ‘control'(and a lot more of course…) for use with MVC framework. Currently it does not support some what magical generation of javascript. so that you can have a ajaxified grid control. but with jQuery its pretty easy to ajaxify it. Today i finished ajaxifiying the paging of the grid, with a little bit of jQuery. So this is how i did it. i am sure that there must be betters ways of doing it. but this is what i came up with 😛

Structure

First of all for this to work you will need some ‘structure’ in your app. let’s take a little example. if you want to display a list of People in your application using a grid. you will have a controller for people: PeopleController. this would have a two actions. one would be List. while the other one would be ListForGrid. List action would be a plain action that will just return a normal view: List.aspx. while ListForGrid would return a asp ‘control’ or a partial view: ListForGrid.ascx. ListForGrid.ascx would know how to render a grid. it will use the normal Grid helpers to render a grid that displays people. List.aspx will contain an empty div:grid_holder and some java script that would add the Ajax goodness.

How it works

when a user asks for the People/List. the List.aspx would be rendered. and upon the document.ready() it would call ListForGrid action via ajax and load the resulting html in to the page. ListForGrid uses the ListForGrid.ascx to render the grid. ListForGrid action will also accept the necessary parameters to support Grid’s pagination(ListForGrid(int? page)).

this is all good. but still we have not archived our main goal. the rendered grid will have pagination links that would take us back to theListForGrid action directly. so if we click on them we would go to that resulting view with out any ajax ‘magic’. to get the grid to render them with ajax we are going to have to use jQuery to ‘hook’ in to the click event’s of the pagination related links( first | prev | next | last) that are in the rendered grid. and we will ‘intercept’ any events(clicks) and load the grid through ajax as necessary. so if you click on the next link in the grid we will stop the page from going to the relevant page, we will ‘read’ what ‘location’ that he is trying to take us to and we will load that through ajax.

now if you don’t understand what i am trying to tell you, please take a look at the source code bellow. i am sure you will understand that 🙂

relavant JS/jQuery source code
$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";

//load the grid when the document loads. this code will run only once
$(document).ready(function() {
    $($gridHolder).load($ListForGridURL, null, function() {
        //now the grid is loaded call ajazPaging,
        //this will hook on to the click events
        ajaxPaging();
    });
});

//hook on to the click events(in a recursive way) of all pagination
//related links, and when clicked load the updated grid through AJAX
function ajaxPaging() {
    //this will zero in on the needed <a> elements in the Grid
    $(".paginationRight > a")
        .click(function(event) {
            //stop the browser from going to the relevant URL
            event.preventDefault();
            //this.href will give us the href value of the current
            //element, which have the URL from which we should update our grid
            $($gridHolder).load(this.href, null, function() {
                //call the function recursively so that the same code would
                //run when the user click on the pagination links after the loading happens
                ajaxPaging();
            });
        });
}

Update: with the release of jQuery 1.3 you can write this in a more simpler way using the live(). more info

Live Events

jQuery now supports “live events” – events that can be bound to all current – and future – elements. Using event delegation, and a seamless jQuery-style API, the result is both easy to use and very fast.

$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";

//load the grid when the document loads. this code will run only once
$(document).ready(function() {
    $($gridHolder).load($ListForGridURL, null, function() {
        //now the grid is loaded call ajazPaging,
        //this will hook on to the click events

    //hook on to the click events of all pagination
    //related links, and when clicked load the updated grid through AJAX
    //this will zero in on the needed <a> elements in the Grid
    $(".paginationRight > a")
        .live("click", function(event) {
            //stop the browser from going to the relevant URL
            event.preventDefault();
            //this.href will give us the href value of the current
            //element, which have the URL from which we should update our grid
            $($gridHolder).load(this.href);
        });
    });
});
rest of the sample source code(controller, actions and views…)
<em>PeopleController </em>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

using MvcContrib.Pagination;
using MvcContrib;

namespace MvcLocalization.Controllers
{
    public class PeopleController : Controller
    {
        public ActionResult List()
        {
            return View();
        }

        public ActionResult ListForGrid(int? page)
        {
            ViewData["people"] = GetListOfPeopel().AsPagination(page ?? 1, 1);
            return View("UserListGrid");
        }
    }
}

<em>
List.aspx</em>


<h2>People</h2>
<div id="grid_holder"></div>

        $gridHolder = "#grid_holder";
        $ListForGridURL = "/People/ListForGrid";

        //load the grid when the document loads. this code will run only once
        $(document).ready(function() {
            $($gridHolder).load($ListForGridURL, null, function() {
                //now the grid is loaded call ajazPaging, this will hook on to the click events
                ajaxPaging();
            });
        });

//hook on to the click events(in a recursive way) of all pagination
related links, and when clicked load the updated grid through AJAX
        function ajaxPaging() {
            //this will zero in on the needed <a> elements in the Grid
            $(".paginationRight > a")
                 .click(function(event) {
                       //stop the browser from going to the relevant URL
                     event.preventDefault();
                    //this.href will give us the href value of the current <a> element, which have the URL from which we should update our grid
                     $($gridHolder).load(this.href, null, function() {
                          //call the function recursively so that the same code would run when the user click on the pagination links after the loading happens
                         ajaxPaging();
                     });
                 });
        }

    


<em>ListForGrid.ascx</em>


<%
    Html.Grid(
        "people",
            column =>
            {
                column.For(p => p.Name);
                column.For(p => p.Age);
                column.For(p => p.Address);
            }
            );
%>

Aha! that’s it. jQuery rocks eh!
hope this will be useful to someone/myself.

Note 1: if you are completely new to MVCContrib Grid, you might want to read this
Note 2: a article on “Using MVCContrib Grid in a Web 2.0 World with jquery and AJAX” (btw this article does not cover implementing paging through ajax…)

Blog at WordPress.com.