Recently I had a need for getting the id value of a textbox that was using the jQuery UI AutoComplete plugin. I wanted to pass this id value as a parameter and use it in my Ajax call to my database. To add some extra complexity, my project was using the AutoComplete plugin on numerous textboxes. I didn't want to make a function for each textbox that would be using the AutoComplete so I had to set it up in a slightly generic way.

I had an issue this weekend while updating some code from WebForms to MVC3 when using the brilliant CKEditor. Many of our forms display 2 submit buttons - one for publishing and one to save as a draft. When using WebForms there was never any issue with this. I'd just make 2 <asp:Buttons>, add some On_Click handlers and everything was great. With MVC3 I noticed that when using the CKEditor on my forms that I was having to click on the submit buttons twice before the page would submit.

If you use asp.net RadioButtons you might have an issue when trying to find out which radio button is selected when it comes to jQuery. There are a lot of examples out there for people who use RadioButtonLists but for most people it might not be practical to display radio buttons like this.

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');
        });
});

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>