Quick Tip: How to use OnClick and OnClientClick events to Prevent Double Clicking on your ASP.Net Buttons

Quick Tip

While ASP.Net provides an excellent validator set of controls, sometimes you need to “roll your own” so to speak when creating your controls. In addition, if you have some AJAX processing with your buttons behind the scenes (for example, saving a record in a popup window) you run the risk of having “double saves” occurring when the user clicks on the button and nothing happens immediately.

Having struggled with this issue myself lately, it took a little more work than anticipated to get this to work properly. Here’s how you get everything to play nicely together. Continue reading

jQuery Logo
Soup to Nuts - The Complete Package

Integrating the Nivo Slider into a CodeIgniter Site

Soup to Nuts - The Complete Package

Yesterday’s adventure in coding involved getting a slider type control integrated into the site we’re redesigning. We’re taking the old system that was PHP based with its own “templating” sytem and putting into CodeIgniter, which is the MVC framework that PyroCMS is based off of (if you remember my post from last week).

This new site features a lot of video, and there is a “slider” on the front of the page that cycles through the recent videos available. The current slider we have is functional, but out of date, and since we have jQuery at our disposal with the new site, I figured getting an existing solution that was easy to integrate and modify was in order.

Enter the Nivo Slider. I’ve worked with this slider at my old job, and really liked how you could get a basic slider off the ground really quick, but also had a lot of easy ways to extend and customize it, by using your own stylesheets or even writing your own Javascript code through some triggered events, such as when a new slide came in.

In order to make this MVC friendly to go with CodeIgniter, then plan is to create a View that has our slider HTML code in it. We can then use our video model to retrieve the videos we need. The controller on which our page resides simply needs to retrieve the desired videos and put them in the template data. Since our video objects have lots of details in them, and our image code needs a few indexing keywords in it, I decided to create a helper class that would do the “processing” of our videos in order to generate the appropriate image and caption content. That way if we needed to do some extra manipulation down the road, we only have to worry about the helper and not anything else.

Off to the code!!!!

So the meat of all of this lies in the view and the helper. Our view contains our slider code, like this:

<?php $this->load->helper('slider'); ?>

<!-- Load slider resources -->
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/nivo-slider-my-style.css" type="text/css" media="screen" />
<script src="/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<div class="slider-wrapper">
 <div id="slider">
 foreach(get_video_image_code($slider_videos) as $image)

 foreach(get_video_caption_code($slider_videos) as $caption)

<script type="text/javascript">
$(window).load(function() {
 effect:'fold', // Specify sets like: 'fold,fade,sliceDown'
 slices:15, // For slice animations
 boxCols: 8, // For box animations
 boxRows: 4, // For box animations
 animSpeed:500, // Slide transition speed
 pauseTime:6000, // How long each slide will show
 startSlide:0, // Set starting Slide (0 index)
 directionNav:true, // Next & Prev navigation
 directionNavHide:true, // Only show on hover
 controlNav:true, // 1,2,3... navigation
 controlNavThumbs:false, // Use thumbnails for Control Nav
 controlNavThumbsFromRel:false, // Use image rel for thumbs
 controlNavThumbsSearch: '.jpg', // Replace this with...
 controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
 keyboardNav:true, // Use left & right arrows
 pauseOnHover:true, // Stop animation while hovering
 manualAdvance:false, // Force manual transitions
 captionOpacity:0.8, // Universal caption opacity
 prevText: 'Prev', // Prev directionNav text
 nextText: 'Next', // Next directionNav text
 beforeChange: function(){}, // Triggers before a slide transition
 afterChange: function(){}, // Triggers after a slide transition
 slideshowEnd: function(){}, // Triggers after all slides have been shown
 lastSlide: function(){}, // Triggers when last slide is shown
 afterLoad: function(){} // Triggers when slider has loaded

This is pretty much the standard way the Nivo slider is setup. I’ve chosen to take all the “default” styling required to make things work and put them into a separate stylesheet for easier maintenance. I’ve also replaced the image and content sections with some PHP code that calls our helper method. Let’s take a look at that now.

function get_video_image_code($videos)
 $results = array();
 $caption_count = 0;

 foreach($videos as $video)
 $image_code = '';
 $img_path = $_SERVER['DOCUMENT_ROOT'] . '/images/videos/' . $video->id . '.jpg';

 if ($video->imageid == 0 || !file_exists($img_path))
 $img_path = '/images/videos/default_video.jpg';
 $img_path = '/images/videos/' . $video->id . '.jpg';

 $image_code .= '<a href="/videos/' . $video->id . '">
 <img src="' . $img_path . '" alt="" title="#caption' . $caption_count . '" />

 $results[] = $image_code;

 return $results;

function get_video_caption_code($videos)
 $results = array();
 $caption_count = 0;

 foreach($videos as $video)
 $caption_code = '<div id="caption' . $caption_count . '" class="nivo-html-caption">
 <span class="CaptionTitle">' . $video->title_billboard . '</span>
 <span class="CaptionDescription">' . nl2br($video->description) . '</span>

 $results[] = $caption_code;

 return $results;

You’ll notice that both methods have a caption count, which allows us to make sure our captions line up with our video images. You’ll also notice that the helpers take an array of videos as its input, because if we did our data query here, we risk the chance of a new video slipping in between method calls and then things are out of sync.

In our video model here, our slider images are named with the same Id as the video Id itself. In the event that our video images folder doesn’t have the image, or our Id specified is 0, we fall back to our default video image. One word of note. CodeIgniter’s application folder is locked out to the public, so you need to make sure that all of your CSS, Javascript, and image files reside under your public_html folder. Because of this issue, I like to use the server’s DocumentRoot property when building the file path for me to check. All the image references themselves can remain relative to the public_html folder.

In our video model, we’re using the caption field to display both the title and the description of the video they can link to. I wanted to be able to customize these a bit further than what would typically be seen, so I went ahead and wrapped each section up in a SPAN tag and gave them the class of CaptionTitle and CaptionDescription. Then in the “my-style” CSS file I can design this out a bit further.

Within our controller, we load the videos we need and call the View to render it.

$this->template_data['slider_videos'] = $this->video_model->get_recent_videos(5);

For those of you not familiar with CodeIgniter (I’m still fresh to it myself) the template_data array is what is passed down and parsed to the View for it to do its presentation with. That is why in the View code at the top it passes in the variable $slider_videos in order to process. It’s a simple “hand me down” type process, but very handy because the template_data is flushed out on every page load (preventing old data from lingering around) and handled automatically.

That’s how it all works! I wish I could put an entire “soup to nuts” functional solution here for you, but that would involved getting a lot of CodeIgniter stuff in place. However, I am including my view, helper, and the supporting image/slider files here so you should be able to modify and get this going on your own site pretty quickly. Code will be coming soon.


Soup to Nuts: Creating a Timeout Notifier in ASP.Net using AJAX Toolkit or jQuery

The Quandary

One of those “gotchas” that a new developer faces when working with ASP.Net is that the SessionTimeout variable you find in the web.config only applies to the server side end of things, not the client. The problem with this is that if the client’s session has ended, they won’t know it, and the next time they post back to the server, they’ll either run into an error, or have their forms blanked out (if they were working on them) and not know why.

The trick is to develop a solution that will track the timeout value on the client end (browser) as well as make the appropriate updates to the server end. Fortunately, anytime that a post back is made to the server, or a new page is loaded, ASP.Net automatically handles our session processing. Our main focus will be on developing the client end.

In order to prevent the user from accidentally clicking elsewhere and bypassing the warning, we’ll present the warning as a modal popup window that they’ll be forced to interact with. As the title says, I’ll show you how to implement this using either the AJAX Control Toolkit or jQuery (leveraging jQueryUI), so you can implement it in whatever system you’re more comfortable with. Continue reading

Review: jQuery Pocket Reference


jQuery is the most popular JavaScript library currently on the web. It has revolutionized the way developers provide a user interface to the user without worrying about compatibility issues or complex code. I’m a recent convert to jQuery myself, but cheat sheets have not been helpful and I don’t have the time to read a large and detailed book on the entire framework. I recently discovered jQuery Pocket Reference by David Flanagan just the book I needed to learn while implementing jQuery into my site.

The book starts with a brief overview jQuery and how the fundamentals (selectors, “chaining methods”, modifiers) of the library work. From there each chapter covers the standard features of jQuery: Getting/Setting Elements, Modifying Document Structure, Events, Animations, AJAX, Selectors, Plugins, and UI. Even though the book is titled “pocket reference”, each chapter provides more detail than a simple reference list, which I found very helpful, given my lack of experience with the library. The final chapter does include a cheat sheet, which is also helpful when you need to find an attribute or command on the fly.

This book is perfect for the beginning jQuery programmers that are well versed in other programming languages. It is also helpful for intermediate and advanced jQuery programmers that need a quick way to look up a function or brush up on the concepts behind the jQuery library. You can view a preview of the book by going to the O’Reilly site at http://oreilly.com/catalog/9780596806286/.