jQuery

  • How to fix the DataTables.net Internet Explorer error: "Unable to get value of the property 'style': object is null or undefined"

    On one of my latest management projects I had to test and ensure that the project would work as expected in Internet Explorer. With the exception of a few style issues, which are to be expected when IE testing, I noticed that my DataTables.net code was returning the following error: Unable to get value of the property 'style': object is null or undefined. This was only happening in Internet Explorer 7 and below.

  • How to get the id of a textbox that is using jQuery UI AutoComplete

    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.

  • Fix for CKEditor with MVC3 when using multiple submit buttons

    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.

  • How to fix the jQuery live event not firing for submit buttons in IE

    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.

  • How to add one day to the calendar date selected using jquery ui

    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

  • Use jquery to scroll to a specific section on your page from a link or a button.

    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.

  • How to know if a checkbox has been selected when submitting a form using jquery

    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.

        
        
        
    

    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.

  • RichardReddy.ie goes live showcasing the lastest work by Richard Reddy

    Richard Reddy Cork Web Developer

    <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>

  • How to use a JQuery UI modal box with asp.net

    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

    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.";
            }
    

  • ← Older Posts

Updates

Follow me online at TwitterFacebook or Flickr. If you want to get in touch with me try emailing me.

Latest Tweets