jQuery and Windows Azure

The goal of this blog entry is to describe how you can host a simple Ajax application created with jQuery in the Windows Azure cloud. In this blog entry, Stephen Walther assume that you have never used Windows Azure and going to walk through the steps required to host the application in the cloud in agonizing detail.

Our application will consist of a single HTML page and a single service. The HTML page will contain jQuery code that invokes the service to retrieve and display set of records.

There are five steps that you must complete to host the jQuery application:

1. Sign up for Windows Azure
2. Create a Hosted Service
3. Install the Windows Azure Tools for Visual Studio
4. Create a Windows Azure Cloud Service
5. Deploy the Cloud Service

Via jQuery and Windows Azure

jLight – Interop between Silverlight and JS based on jQuery

 

Interop between Silverlight and the javascript based on jQuery. The syntax used in Silverlight is as close as posible to the jQuery syntax.

Examles of regular jQuery expressions:
jQuery:

    jQuery("span:last").offset({left : 10, top : 100}); 
    jQuery("div").css("border","3px solid red");

   jLight in Silvelight:

    jQuery.Select("span:last").Offset(new {left = 10, top = 100 }); 
    jQuery.Select("div").Css("border","3px solid red");

   But, with jLight you can interop between C# and javascipt. The code below runs thru each textbox and adds its value to a textbox.

    jQuery.Select("input:text").Each((a, b) =>
                    {
                        textBox1.Text += jQueryObject.FromObject(a).Val();
                        return false;
                    });

Via jLight

5 Steps Toward jQuery Mastery

 

Most of us get our first taste of jQuery by implementing a simple animation effect or using a plugin for a specific purpose. This is natural because, like JavaScript itself, jQuery lends itself to beginning with the basics and building from there.

As you branch out from the trivial and begin using jQuery for more complex solutions, it’s important that you stay vigilant for new ways to approach those more involved problems. What works well enough for a dozen lines of code may not work for hundreds, and the unforgiving cross-platform environment that comes along with developing for web browsers only magnifies any trouble you run into.

With that in mind, I want to share a few tips with you that I found valuable as my work with jQuery became more complex.

• Use Firebug to experiment interactively …

• Cache selector results …

• Don’t use jQuery unless there’s a good reason to …

• Learn advanced selectors, filters, and traversals …

• Use CDN hosting when available …

Goto 5 Steps Toward jQuery Mastery | Encosia for details

A better solution to find ASP.NET ClientIDs with jQuery

 

A small routine that returns us a jQuery object based on only the id:

function $$(id, context) {
    var el = $("#" + id, context);
    if (el.length < 1)
        el = $("[id$=_" + id + "]", context);
    return el;
}

So in simple usage to select my ctl00_MainContent_txtSymbol value both of the following work:

alert( $$("txtSymbol").attr("id") );

Or if I want to be specific about the container:

alert( $$("txtSymbol",$("#wrapper")).attr("id") );

Via A generic way to find ASP.NET ClientIDs with jQuery – Rick Strahl’s Web Log

Paging and Sorting ListView Control with jQuery Tablesorter plugins within ASP.NET MVC

 

This article provides a simple example of using jQuery along with the jQuery tablesorter and tablesorter.pager plug-ins to provide sorting and paging support for a listview within the context of an ASP.NET MVC application.

http://tablesorter.com/docs/

 

Paging and Sorting ListViews with ASP.NET MVC and jQuery

Form Validation using jQuery Validation plugin

In the example above, we only used three validation methods (required, email and url). There are several other methods that can be used here. Here are a few of them:

• remote: requests a resource to check the element for validity.
• min: makes the element require a given minimum.
• date: makes the element require a date.
• creditcard: makes the element require a credit card number.
• equalTo: requires the element to be the same as another one.

You can find an exhaustive list of built-in validation methods at http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods.

But I can’t find a suitable built-in method for my situation. Can I write my own method?” Yes you can! And its really easy.

Writing Your Own Validation Method

Calling the jQuery.validator.addMethod() method. It takes three parameters:

• name: The name of the method, used to identify and referencing it, must be a valid javascript identifier.
• method: the actual method implementation, returning true if an element is valid.
• message: The default message to display for this method.

In the validate function, we specify that the ‘sport’ field should be validated using the selectNone method.

Make sure to look at the source code behind these demos

Via Form Validation using jQuery

Another tutorial here

jQuery 1.3 Cheat Sheet

View this document on Scribd

Using FireFinder & FireQuery Add-on for jQuery

•  Firefinder for Firebug for Firefox for Fiddling with jQuery
• Digging Into The FireQuery Add-on for jQuery

Create Simplest Accordion Menu using jQuery

 

Step 1: Create HTML for your Menu

Step 2: Apply some style to your Menu using CSS – (optional using Round Corner CSS w/o images)

Step 3: Give life to your Menu using jQuery – using .click, .slideUp, .slideToggle

Via Accordion Menu: Create Simplest Accordion Menu using jQuery | ViralPatel.net

How to use Firebug to learn jQuery

 

A 9:59m video:

If the HQ version of the YouTube video still isn’t legible enough for you, Craig also made a full resolution WMV available as well.

Bookmarklet uses in the video

1. Inject jQuery into any web page: jQuerify
2. Point & Click CSS Selector:  SelectorGadget

Via Updated: See how I used Firebug to learn jQuery | Encosia