Posts Tagged ‘jquery’

Speaking at DC .NET on Jan 18th

Posted on January 13th, 2011 by Kevin

If you’re in the DC Metro area, then I invite you to come out to the DC .NET User Group and listen to me present a new talk entitled “jQuery On The Go” on January 18th.

This talk is meant to promote the new jQuery Mobile framework for touch based devices. If you’re already a jQuery developer, than the information in this talk should help provide you a little bit of insight in how we’ll be able to use jQuery to build better mobile applications.

Go to http://www.dcdnug.org/dnn/default.aspx for location and time information!

I hope to see you all there!
jQuery Tidbits : jQuery.each()

Posted on September 16th, 2010 by Kevin

A lot of devs doing jQuery might have used the jQuery(selector).each() method in instances where you need to perform an action on all the elements returned by jQuery. But did you know that the jQuery utilities provide you the same functionality for iterating through an array.
```
var array = [“Kevin”, “Bob”, “Joel”, “Keith”];
 
$.each(array, function (index, value) {
     alert(“Say hello to “ + value);
});
```
Check it out here!
#DevLink Slides and Source

Posted on August 10th, 2010 by Kevin

Thanks to everyone who attended my DevLink talks. I had a blast presenting to you all and I really hope you got a lot out of the presentations. Here are the slides to the 3 presentations I gave. They are available for download. I also have source available for those of you that wanted to look at my examples.

ASP.NET MVC From The Ground Up

View more presentations from Kevin Griffin.

jQuery From the Ground Up

View more presentations from Kevin Griffin. Source code is available here.

Async

View more presentations from Kevin Griffin. Source code is available here.
Speaking at DevLink

Posted on August 2nd, 2010 by Kevin

I will be traveling to Nashville this week to speak at DevLink, August 5-7. This will be my first conference giving more than 2 talks (3 this time around), and it’ll be my second conference where people have actually paid to be there. Be sure to come chat with me at any of my sessions, in the hallways, or at Open Spaces.

Here are the 3 talks I’ll be giving:
- August 5th – 1:00 PM (SWANG-S108) – ASP.NET MVC From The Ground Up
- August 7th – 9:00 AM (SWANG-S108) – jQuery From The Ground Up
- August 7th – 11:30 AM (SWANG-S102) – Asynchronize with jQuery
See you all there!
Materials for jQuery From The Ground Up

Posted on June 22nd, 2010 by Kevin

Sorry for dragging my heals on this this. A lot of you have been asking for the material from my jQuery From The Ground Up talk that I’ve done at several code camps in the area.

Demo Code
Slide Deck

These should be the latest and greatest available. If you have questions, please feel free to ping me on Twitter, through comments or the Contact page.
If You Reach Just One Person

Posted on March 29th, 2010 by Kevin

After giving a talk, it’s really difficult to judge if you reached any of the attendee’s. Normally, you get the occasional “good job” or “thanks, that was a big help.” Today I got a small mention by Johnathan Bracken, who was sitting in my jQuery From The Ground Up talk at Roanoke Code Camp. This means a lot, because it shows that my talk stayed in Johnathan’s head past the end of the talk.

He just started blogging, and mentioned me in his entry I Will Not Run from JavaScript No More. This is very cool to see. I wish Johnathan the best of luck in his jQuery adventures! And I expect him to give a jQuery talk at next year’s code camp.
Using jQuery Tabs and ASP.NET MVC Partial Views For AJAX Goodness

Posted on February 23rd, 2010 by Kevin

Note: This example was built using jQuery UI 1.7.2 (which packages jQuery 1.3.2). If you use jQuery 1.4.1, this example will break. jQuery UI 1.8 will fix. Thanks to mvcuser. http://dev.jqueryui.com/ticket/5065

In my current project, I’ve had the need to use a Tab control but the data inside of the tabs was way too hefty to load initially when page loaded for the first time. Luckily, the jQuery Tab control provides this functionality for me already. However, I needed to find a way to easily organize the tab content on the server. ASP.NET MVC provides a great structure for this called Partial Views.

In this quick tutorial, I’ll give you a run down on how to set up a jQuery tab control and how to configure ASP.NET MVC Partial Views to work with the tab controls.

Configuring Your View

Since we’re working in ASP.NET MVC, we’re going to talk about our pages in the form of Views. I’m working with the default “blue screen” ASP.NET MVC application. After you’ve downloaded and linked the jQuery and jQuery UI scripts to your View (either in the view itself or in the master page), you’re going to add the following code:
```
    <script type="text/javascript"></script>
<div id="tabContainer">
<ul>
	<li><a href="/Home/GetHomeTab">Home</a></li>
	<li><a href="/Home/GetProductTab">Products</a></li>
	<li><a href="/Home/GetContactUsTab">Contact Us</a></li>
</ul>
</div>
```
This code replaces the existing content section in the Index view for the Home controller. The most interesting part of this is the tabContainer div. Inside of it, we’ve declared a unordered list, and several list items. jQuery UI uses this determine how to format the tab control.

You’ll notice that inside of our list items (<li> tags) that we’re using links to various action links (and yes, I know I could use HTML helpers to build these links for me). Now, we need to build the views that will be rendered inside the tabs.

Here is an example of building the GetHomeTab view. Nothing special, but make sure that you select Create a partial view. Partial views won’t have any of the HEAD, HTML, or BODY fluff inside of them. These are perfect for our tabs.

Repeat for GetProductTab and GetContactUsTab. Add a few lines of text to the views in so you know they’re working. Here’s an example of what my GetHomeTab looks like:
```
&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %&gt;
<h1>Home</h1>
You're inside the Home tab, which was rendered via a partial view!
```
Before we can test, we need to update our Controller to return the views as requested. Here’s the additions you’ll make to your Home controller:
```
public ActionResult GetHomeTab()
{
return PartialView();
}
public ActionResult GetProductTab()
{
return PartialView();
}
public ActionResult GetContactUsTab()
{
return PartialView();
}
```
You can attach models to these views and they’ll work fine. Build and run the application.

And to prove that everything is working as AJAX call backs, we can look at FireBug:

Firebug will show that when I clicked on the Contact Us tab, it automatically made an AJAX call to our Home controller and retrieved the partial view.

That’s awesome Kevin, now Why?

Tabs can be bloaty. They contain a ton of markup for rendering inside the tab, and all this needs to be maintained within a single file. By loading our pages dynamically, we’re eliminating the strain on the server. Imagine we have 10 tabs. If the user only needs to access two of them, we’re wasting bandwidth by downloading all the additional markup. Then the browser needs to render it and store it, waiting for the user to come along and do something. In an AJAX environment, we only download tabs as needed. Much less strain on the server.

Second, maintaining 11 small files is much easier than maintaining 1 large file. If you need to make a change to the Contact Us tab, you don’t need to go searching through the main page to find it. Instead, you locate the GetContactUsTab view and make your changes!

I hope you’ve learned something from this, and maybe implement it into your future projects. I can tell you that it definitely makes a difference in my app where there are 10 tabs containing a lot of data. Separating out all the pieces makes it much easier to maintain and update.
Review My 2010 Presentation Abstracts

Posted on January 21st, 2010 by Kevin

I’m hard at work right now preparing some presentations for the 2010 code camp/user group season. In order to make these presentations the best they possibly could be, I’m putting them out for the public to see and review.

Asynchronize with jQuery

jQuery is a fantastic tool for web developers interested in giving their web applications a little glitz and glamor. In addition to its powerful DOM transversal engine, jQuery also comes equipped for handling AJAX requests. In this presentation, Kevin Griffin will guide you through getting started with jQuery’s AJAX functionality. A basic understand of jQuery is recommended, however not required for this presentation.

Awesomize Your Windows Apps

With the release of Windows 7, many developers might be looking to take advantage of the features Windows 7 offers. This presentation offers attendees a broad overview of the Windows API Code Pack, which is a managed library for .NET developers to use for accessing some of the underlying functionality of Windows that was typically reserved for Interop fans. Topics and demos include Windows 7 taskbar functionality, Task dialogs, Libraries support, and more.

ASP.NET MVC From The Ground Up

ASP.NET MVC has taken the web development world by storm. It’s a technology that many people are curious about, but might have had trouble adopting. In this presentation, we’ll take a look at ASP.NET MVC from the ground up. We’ll peel back the layers, and look at each component of MVC individually without the Test Driven Development or Dependency Injection mantra. The goal is for you to walk out of this talk with enough knowledge of MVC to dive in! This talk assumes no experience with MVC or Web Forms (although some web forms knowledge would be helpful).

jQuery From The Ground Up

Web 2.0 has taken over; there is no doubt about it. However, many developers are being left in the dust. Amazing technologies such as jQuery allow developers to easily add flair to their web applications. In this presentation, Kevin Griffin will guide you through the world of jQuery. Starting from the bottom, we will discuss what is possible with jQuery, how do you obtain and setup jQuery in your projects, and then actually putting jQuery to work. This presentation is designed for developers with no experience with jQuery (or Javascript in general). An understanding of HTML and CSS is recommended.
Listen to Me on the Community Megaphone Podcast

Posted on January 14th, 2010 by Kevin

I’ve been waiting for this announcement for a little while, but I’m finally pleased to announce that I had the pleasure of being the first guest on the new Community Megaphone Podcast.

In this episode, I talked with Dane Morgridge (@danemorgridge) and Andrew Duthie (@devhammer) about general stuff I’m interested in. Topics included Windows 7 for developers, jQuery, and the developer community.

Please take an hour and listen to the show. Let me know your thoughts! Also, please send a note to Dane and Andrew. Let them know if you enjoyed the show.

Listen Here (http://www.communitymegaphonepodcast.com/Show/1/Kevin-Griffin)
jQuery From The Ground Up: Part II – Getting jQuery

Posted on October 23rd, 2009 by Kevin

As part of my effort to put more technical content onto my blog, I’ve decided to break my current talk “jQuery From The Ground Up” into a blog series. My goal here is to go into a little bit more in depth, and try to answer any questions that typically come up during my talk.
1. What Is jQuery?
2. Getting jQuery
3. Setting Up jQuery
4. What’s a Selector?
5. Doing Something Useful
6. jQuery UI
7. Plugins, Plugins, Plugins
Getting Your Hands On jQuery

This is the easy stuff. You want to use jQuery, but you don’t have any idea where to get it. Point your web browser of choice to http://www.jquery.com. You should be welcomed with a page like this:

You’ll notice there are two buttons on the screen that say “Download”. The first one is at the top of the screen, and the second one is in the bottom right hand corner of screenshot. Right now, we’re interested in the big “Download(jQuery);” button. Clicking that will yield one of two download types.

Production

Downloading the production version of jQuery will result in a “minified” version of the file. This means you don’t have the luxury of nicely formatted code, comments, and overall readability. Only use this version if you’re going to production, and you’re not planning on touching the jQuery source.

Development

The development version of jQuery is useful for most shops. If you’re interested in being able to read the jQuery source, everything in this file is fully commented and formatted for easy reading. The larger file size makes it not recommended for production environments.

Once you’ve downloaded the single .js file, you’re ready to go. In the next section, we’ll discuss actually bringing jQuery into your web pages.

jQuery Documentation

This is also a good time to stop and discuss the jQuery documentation. To put it simply, it’s awesome. The important thing to remember is that you’re not going remember everything about jQuery. Every time I sit down to work with jQuery, I have the documentation open and ready to use.

Everything you can do in jQuery can be narrowed down into 11 different categories:
- jQuery Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- Effects
- Ajax
- Utilities
- jQuery UI
Let’s say, for example, I wanted to wire up a click event for an element on my page. If I looked under “Events”, I would find the click event waiting for me. If you go to the documentation for the click event, you’re given a useful and straight forward look at what it does and how to use it.

Every documentation page gives you an easy, full source code example. Not only that, but underneath the code is a working version of the code in action. Use this to your advantage, and you’ll be up and running with jQuery in no time!

Visual Studio 2008 Intellisense

If you’re like me, you use Visual Studio. If you’re like me, you love Intellisense. While Visual Studio already has some support for JavaScript Intellisense, wouldn’t it be nice if Visual Studio gave you the same support for jQuery!

Wait no longer! Around the time ASP.NET MVC was coming down the pipe, Microsoft announced full support for jQuery Intellisense. If you’re starting an MVC application, you get the Intellisense right out of the box!

But what if you’re working with an older version of jQuery or web forms application! Fear not! Point your browser to http://docs.jquery.com/Downloading_jQuery (or click the smaller “Download” button at the top of the jQuery page. Scroll down, and you’ll notice:

The “Visual Studio” documentation files only need to be dropped into the same folder as your jQuery.js file. If it doesn’t work out of the gate, you might need to install the following hot fix at http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736.

Wrapping Up

Explore the documentation and get a good hold on what it can do for you. Learn the names of some methods and event you would likely use on a regular basis. In the next article, we’ll look at setting jQuery up in your applications. Enjoy!