Reddybrek.com

I was recently working on our new website for Dragnet Systems when I stumbled onto an issue with submit buttons not working as expected in Internet Explorer when I was using the .live event for jQuery. Everything works as intended in Firefox, Safari, Opera and Chrome but Internet Explorer was completely ignoring the form submit clicks.

After doing some reading over on the jQuery forums it turns out that this is an issue quite a few people have run into. The solution I went with was to use a third party plugin called LiveQuery. This plugin ensures that after the DOM has loaded my elements are correctly registered to my events and will work as expected.

Using the script couldn't be easier, simply download the file from the LiveQuery plugin page and in your code use .livequery instead of .live.

There's a good chance that this will be fixed in later releases of jQuery but for now (1.4.2) this is a nice workaround.

I recently has an email come into me asking about a previous post I did regarding the jQuery UI date picker. This person was looking for a way to add some extra functionality to the date picker example I had that would auto default to setting the drop off date textbox value to be one day ahead of the pickup date.

To do this all that is required is to add an extra function within the document.ready() function that fires when the pickup date is changed, add one to the date entered and then put that value into the drop off box. The code to do this is:

$('.pUpDate').change(function() {
    var nextDayDate = $('.pUpDate').datepicker('getDate', '+1d');
    nextDayDate.setDate(nextDayDate.getDate() + 1);
    $('.dOffDate').datepicker('setDate', nextDayDate);
});

Building on the previous examples demo, below is a link to download a working example that includes the above new code snippet.

Download this demo

This little feature can be very handy if you want to auto scroll the page to a particular section. I have used this previously on sites where I want the user to be shown error messages that are on top of a large form. So instead of the user clicking submit and nothing happening the user would click submit and if there were any errors the page would scroll to the error messages on the top of the form.

To achieve this effect create a javascript function like this:
(Thanks to David King from OneDayLater.com for the Opera fix for the button click event!)

function goToByScroll(element) {
    var el = $.browser.opera ? $("html") : $("html, body");
    el.animate({ scrollTop: $(element).offset().top }, 'slow');
}

Now call the above function whenever you want the screen to move to a point. For our example we will scroll on a button click or from a link click using the code below:

$(document).ready(function () {
        //scroll if link click to section2
        $('#Section1 a').click(function (evt) {
            evt.preventDefault();
            goToByScroll('#Section2');
        });
        
        //scroll if button click to section 1 
        $('#SubmitForm').click(function (evt) {
            evt.preventDefault();
            goToByScroll('#Section1');
        });
});

You can view a working demo of this in action here. Simply Right Click and View Source to see the code.

If you have a checkbox on your form that has to be selected before you want the user to continue you can use jquery to check if it has been selected by doing something like the following:

$(document).ready(function () {
        $('#SubmitForm').click(function () {
            if ($('#Terms').attr('checked') == false) {
                alert('please select the terms and conditions before continuing.')              
                return false;
            }
        });
    });

Your html form must have a checkbox with an id value of Terms to match the javascript above.

    Please accept our terms and conditions
    
    

If it is crucial to have a checkbox ticked before continuing in your website or app you should validate on the server side as well but the above script should help to get you started.

Click here for a simple demo of this in action.

<shamelessPlug>I've been meaning to setup my own domain name for a while now. During December last year Blacknight.com were offering .ie domain names for only €2.99 so I couldn't resist and bought richardreddy.ie.

The site design is using BCProducties' vCard template which was given away for free for January to members of ThemeForest. If you're quick you might still be able to download the file for free here.

Over the coming days I will update the work section of the site so that it contains details of my latest work. It's nice to finally have something a bit more professional to use rather then reddybrek ;)</shamelessPlug>

View Demo | Download Source

I was recently asked to look into making a JQuery UI dialog box (aka a modal box) work with asp.net. I thought it would be straight forward but as with anything in asp.net it turned out to be a little bit trickier than I had initially thought. Part of the problem was that I wanted to put the dialog box on an asp.net submit button and depending on the user's choice either submit the page or cancel the action.

Thankfully I stumbled across this great article over at DeviantPoint. It was pretty much exactly what I needed. However, for my example I needed to only show the dialog box if any of the checkboxes on the screen were not selected. In other words a normal postback would occur if every check was selected but if there were any checkboxes not selected the user would be asked to confirm their action.

If you take a look at my very basic demo page you will see exactly what I'm talking about. You will find all of the code within the source files I have posted for download but below is a brief overview of what is going on.

View Demo | Download Source

HTML used:

    
    
    

        
This is a top class widget. Features include...
        
        

    
        

            Below are the required items for this product to function correctly:

            Required Item 1
            Required Item 2

            Required Item 3 
            Required Item 4

        
    

    

        For this widget to function correctly you need to make sure you have all the required parts. Are you sure you wish to continue?

    

    

        
    

    

Javascript used:

C# Codebehind:

if (!Page.IsPostBack)
        {
            //this line is used to hold the exact postback function call used by the asp.net button
            this.MsgBoxContinue.Value = Page.ClientScript.GetPostBackEventReference(AddToBasket, string.Empty);

            //ensure the postback message is blank on load
            PostBackMsgTest.Text = ""; 
        }

        if (Page.IsPostBack)
        {
            PostBackMsgTest.Text = "Content posted back successfully.";
        }

If you haven't already looked into using the jquery UI calendars, you really should! One of my latest projects, www.hertzflydrive.com, uses these calendars on the homepage. They are quick to setup and offer loads of options that make them very flexible for anyone looking to use date pickers on their forms.

One of the most common setups is to use two calendars to let users pick 'From - To' dates. Placing two textboxes and setting them up to use the calendars is easy (and for this post I am assuming you can at least do that much) but what if we only want our second calendar to only allow the user to select dates on or after the date entered in the first calendar?

Well the good news is that this is easy to do using a custom function that is called before the calendar is displayed to the end user. The script below shows the jQuery for setting up two calendars on your form and the custom function to ensure that the dates the end user selects on the second calendar are either after today's date or after the value entered in our 'From' calendar.

jQuery - save as calendar-config.js in a folder called scripts:

$().ready(function() {
    $('.pUpDate, .dOffDate').datepicker({
        numberOfMonths: 2,
        showButtonPanel: true,
        beforeShow: customRange,
        dateFormat: 'dd-mm-yy',
        showOn: 'both',
        buttonImage: 'images/calendar-icon.gif',
        buttonImageOnly: true,
        buttonText: 'Show Date Picker'
    });
});
function customRange(a) {
    var b = new Date();
    var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
    if (a.id == 'DropoffDate') {
        if ($('.pUpDate').datepicker('getDate') != null) {
            c = $('.pUpDate').datepicker('getDate');
        }
    }
    return {
        minDate: c
    }
}

The custom range function above should be self explanatory. We pass in the id of the element we clicked on (i.e. which textbox we're currently in) and if that textbox is the drop-off textbox we want to set the min date to be the value entered in the Pick-up textbox, assuming it has a value.

HTML:

    
     
    
    
    
    
    



    Pick-up Date
    

    Drop-off Date
    

To help you get started you can download a working example of this demo here - min date jquery demo.zip (67.37 kb). To view it in action head over to hertzflydrive.com.

After many months of work I'm proud to announce my latest project HertzFlyDrive.com. This website was designed from the ground up provide Hertz with a more effective way to manage their car rental booking information and help speed up the booking process for end users.

This site has a lot of new features in it that I had great fun with including Linq to XML for the XML calls to Hertz, jQuery UI date pickers, a brand new jQuery expander made specifically for this project, contacting the database using JSON and jQuery, multiple languages, etc. The list of new tech on the site is nearly endless! I'm proud of the speed of the site compared to their older site considering all of the extras we have added to the forms. By comparison our new site loads roughly twice as fast as the older Hertz site.

It's not only raw speed that helps the end user experience but also the ease of use of the site. We rose to the challenge and set about making the site a breeze to use for users. Our new car selection page actually combines two processes in one. On the old site the end user was required to go through to two separate pages for booking a car and picking the accessories that they might want. On our site this is all done on the same page. We have also included a very nice clean way for the user to upgrade their car choice without forcing them to go back a page and forward again. Steps like these all help speed up the booking process for end users and provide a much smoother experience.

It's in the admin tools that we've really gone to town with features. There are loads of snazzy extras we've built into this system. With the old site that Hertz had there were no stats for bookings or facilities to update offers on their site. Our brand new admin tools let Hertz quickly and easily add/update/delete/order any offer for any country and/or language.

There is also a brand new email marketing tool built for this site that allows admins to send and track emails sent to customers. The emails sent can be stored and stats like number of opens, click throughs or completed bookings from an email message are all store in our system. Customers can opt out of the email marketing at any time and there is even an option for them to easily opt back in if they decide to change their mind later on.

Finally, we have provided Hertz with enough stats to keep them busy for years to come! Everything from 'how many child seats were bought?' to 'whats our most popular destination?' is available to the site admins.

We're hoping that this new web system will help drive more sales for Hertz and that end users find the site a joy to use. I'd love to hear what you think about the site so let me know in the comments below.

This is a nice feature to add to your forms. One of the main reasons you might want to hide a submit button and display a message to the user is to stop them from clicking the button again which, depending on your code, could duplicate a request on the server. This isn't something you want to happen - especially if you're taking payments!

Show or hiding items using jQuery is a breeze but there are a few things you need to watch out for when it comes to showing or hiding submit buttons.

• First thing to watch out for is that if you hide the button then you must make sure to show it again if the page reloads or if the user doesn't go onwards due to any form validation you might be using. This is very important! If you overlook this rule then if someone forgets to fill in a textbox and you prompt them to fill it in, they will not have a button on screen to let them go forward as you hid it when they clicked on it.
• You should always display some sort of message to the user so that they are aware why the button just disappeared. This sounds obvious but if you don't display a message a user might think the form was broken and reload the page after clicking on the button.
• Finally, you should always make sure that your form is usable with JavaScript turned off. So, although this is a nice way to prevent double clicks from a user, if JavaScript is disabled you should ensure that your code behind handles any extra calls correctly.
  

So enough of all the doom saying, let's see how to do this! I am doing this example from the point of view of a asp.net developer who uses asp.net form elements. To keep this example simple I am also just posting the details back using a regular asp.net post back. You should be able to expand on this example to include it into your code when handling jQuery AJAX call backs.

Step 1: Setup your HTML

    

        
        

		    Name
		    
	    
	    

		    Email
		    
	    
	    

		    
		     Sending your details. Please Wait.
	    
    

Step 2: Setup your jQuery

$().ready(function() {
        //make sure the submit button is visible on page load
        $('#SubmitButton').show();

        //hide the submit button after click and show our loading message
        $('[id$=SubmitButton]').click(function() {
            $('#PostBackMsg').show();
            $('#SubmitButton').hide(); 
        });
});

Step 3: Test it out

To see this in action click here. I have the page setup to sleep for 3 seconds on post back to give you time to see the effect in action. A simple message is then displayed in the FormMessage label.

Points to note:

If you are using a MasterPage then you will notice that .net form elements will be given dynamically generated names based on the MasterPage container name and the element name. You should use something like $('[id$=SubmitButton]') to help jQuery 'find' your element within the page. This is slower than finding the element by ID or Class but it's a much neater way than putting in the full generated submit button name and will also work with standard forms!

So that's it. Hopefully you didn't find that too hard to setup and it gives your forms a really nice look on postback and will help you stop users pressing the submit button again and again if your server is a little slow.

I am working on a project at the moment that requires checkboxes to do animations using jquery. It's all working fine unless I return to the page using the back button. As a work around I decided it would be best to just clear out any checkbox that were already selected. It's not ideal, but it saves me having to fire off an animation on page load which looks very slow as everything else on the page is loading in.

To uncheck all of the checkboxes on your page using jquery all you need to do is use this code:

$().ready(function() {
    //on page load uncheck any ticked checkboxes
    $("input:checkbox:checked").attr("checked", "");
});