jQuery

  • Web Developer Monthly - Starting June 2017

    Web Developer Monthly launching June 2017

    Over the last 3 years I've been working as a senior .net contractor which has meant that I haven't been blogging as much as I'd have liked. To try and fix this and to encourage myself to blog more I'm going to try something a little different and create a monthly blog series that will highlight some of the of the best web design and web development news that has caught my eye over the last 30 days or so.

    There are already tons of great daily and weekly web tech feeds out there but sometimes it can feel a bit like information overload. To set myself apart from these feeds I'm not going to list every single news item from the last month. Instead I'm going to pick the 'best bits' from the last few weeks and highlight what I feel are the big hitters. This could include news about asp.net, some JS framework news, TypeScript updates, GIT hints and tips, CodePen.io links or even just some funky UX techniques I've stumbled upon.

    Hopefully you'll find it useful. The first issue will drop next month so keep an eye out on Twitter for #WebDevMonthly. If you've spotted anything interesting recently be sure to reach out to me on Twitter to let me know: @RichardReddy

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

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

    });

    });

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

    // 
    

    $(document).ready(function() {

    $(function () {

    $("#MsgBox").dialog({

    autoOpen: false,

    modal: true,

    buttons: {

    "Continue": function () {

    $(this).dialog("close");

    eval($("#<%= MsgBoxContinue.ClientID %>").val());

    },

    "Cancel": function () {

    $(this).dialog("close");

    }

    }

    });

    });

    });

    function showjQueryDialog() {

    //check to see how many checkboxes there are and how many of those are checked.

    //if any of the checkboxes are not selected then show dialog box.

    var TotalNumCheckboxes = $("#ContentContainer input:checkbox").length;

    var TotalNumCheckboxesChecked = $("#ContentContainer input:checkbox:checked").length;

    if (TotalNumCheckboxes == TotalNumCheckboxesChecked)

    {

    eval($("#<%= MsgBoxContinue.ClientID %>").val());

    }

    else

    {

    $("#MsgBox").dialog("open");

    }

    }

    // ]]>

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

    }

  • jQuery UI date picker - how to set the start date of your second calendar

    set the mindate of a second calendar using jquery ui

    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.

  • ← Older Posts

Get In Touch

Follow me online at TwitterFacebook or Flickr.

Latest Tweets