Illustrate form input validation

'' (the parent). * ''jQuery("a[href~='swansea.ac.uk']")'' returns all '''' (anchor or link) elements whose ''href'' attribute contains the string ''swan.ac.uk''. ===== Filters ===== * Filtering by equivalent of CSS pseudo classes * See this example on [[http://jsfiddle.net/cpjobling/45Uw6/3/|jsFiddle]]


jQuery("p:first"); // first match
jQuery("p:last"); // last match
jQuery("p:even"); // even numbered array index (zero base)
jQuery("p:contains('interesting')");
jQuery("p:hidden");

---- These can be combined with any of the other selectors, for example


jQuery("p.description:first"); 
jQuery("p.description:contains('interesting')");

===== Attributes ===== Most commonly used:


jQuery('a').attr('href'); // getter
jQuery('a').attr('href','http://www.swan.ac.uk'); // setter
// Setting multiple attributes
jQuery('a').attr({href: "http://www.swan.ac.uk", title: "Home page"});
jQuery('p').html();
jQuery('p').html("Some content");
jQuery('#someInput').val();
jQuery('#someInput').val('new value');

Illustrated in this [[http://jsfiddle.net/cpjobling/JMgMj/1/|jsFiddle]] See [[http://api.jquery.com/category/attributes/|jQuery Attributes]] for more examples and details. ---- All functions can be used in a //getter// (no params) or //setter// mode. Some setters can take a variety of arguments, such as ''(name, value)'' or objects ''{par1: val1, par2, val2}'' used to set multiple values at once. ===== Traversing the DOM ===== Functions that help you move around the selection set:


jQuery('p').append('A Span');
var children = jQuery('p').children();
jQuery('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});
jQuery('p').previous();
jQuery('p').next();

See [[http://jsfiddle.net/cpjobling/YhmFU/2/|jsFiddle]] for a demonstration of these functions. See [[http://api.jquery.com/category/traversing/|jQuery Traversing]] for more examples and details. ===== DOM Manipulation ===== Functions that help you change the currently selected elements. An example((There are many more possibilities))


jQuery('p').hide().css({'border', '3px solid red'}).fadeIn(2000);

To play with this example see this [[http://jsfiddle.net/cpjobling/Ms6L4/7/|jsFiddle]] See [[http://api.jquery.com/category/manipulation/|jQuery Manipulation]] for more DOM manipulation functions and examples. ---- The code example includes an example of CSS manipulation and animation. It will select all paragraphs in the document, initially hide them, apply the equivalent css style


p { 
  border: 3px solid red;
}

then make each paragraph fade in to the document over a period of 2000 ms (2 seconds). The function ''jQuery'' is aliased to ''$'' so you will often see the jQuery function written ''$('

')'' as opposed to ''jQuery('

')''. So the example would be simplified to $('

').hide().css({'border', '3px solid red'}).fadeIn(2000); ===== CSS ===== Functions to add and remove classes from elements, change the CSS directly (equivalent to applying a local style setting to the selected elements), and some special functions for obtaining positional information from elements. jQuery('p').addClass("highlight"); jQuery('p').css("border","3px solid red"); var position = jQuery("#specialDiv").position(); console.log("left = " + position.left + "; top = " + position.top); See this example in [[http://jsfiddle.net/cpjobling/uVbS2/2/|jsFiddle]] See [[http://api.jquery.com/category/css/|jQuery CSS]] for more ideas. ===== Events ===== * In browsers events are either handled the DOM level 2 way (see [[eg-259:lecture9|JavaScript and HTML Part 2]]) or the "Internet Explorer Way" * jQuery Event APIs provide a cross-browser way to register event handlers as well as * A cross-browser valid definition of the event object * They are used to register behaviors that take effect when the user interacts with the browser, and to further manipulate those registered behaviors. To play with events, try this [[http://jsfiddle.net/cpjobling/VZxfs/10/|jsFiddle]] For a full list of events and event properties see [[http://api.jquery.com/category/events/|jQuery Events]] ===== Binding Events to Elements ===== Use the ''on'' function: jQuery('[type="radio"]').on("click", function() { alert("Button " + $(this).val() + " clicked"}); }); ===== Simplified Event Registration Functions ===== jQuery('#target').click(function() { alert("Target clicked"); }); jQuery("#other").click(function() { $("#target").click(); }); ---- Functions exist for most of the common events, mouse events and key events. The names are the same as for the HTML attributes: e.g. ''//on//blur'' has jQuery binding function ''blur''. ===== The jQuery Event Object ====== * All event functions can take an [optional] event object as an argument. * This provides a browser-agnostic way of getting and setting useful event properties in a browser independent way event.type // type of event event.target // original target of the event event.currentTarget // target of the event during bubbling event.pageX // mouse coordinates of event event.pageY event.preventDefault() // stop the default action (e.g. submit) event.stopPropagation() // stop bubbling ===== Animation Effects ===== Various ways to change the display jQuery('p').hide(); jQuery('p').hide('slow'); jQuery('p').fadeIn(); jQuery('p').slideDown(4000); jQuery('p').animate({opacity: 0.25, left: '+=50', height: 'toggle'}, 5000, function() { alert('Animation complete') }); Play with animation using this [[http://jsfiddle.net/cpjobling/gBgW8/7/|jsFiddle]] For more information and examples see [[http://api.jquery.com/category/effects/|jQuery Effects]] ===== AJAX ===== Will be discussed in the session on AJAX ===== The $ Shortcut ===== It has become a convention to alias the ''jQuery'' function to the one-letter variable ''$''. Thus you will see $('p').addClass('highlight'); rather than jQuery('p').addClass('highlight'); but both are equivalent. ---- In fact there is a definition in the jQuery code: window.jQuery = window.$ = jQuery; Recall that and JavaScript variable or function that is added to the ''window'' object is global to the web app. ===== Loading jQuery Scripts ===== $(document).ready(function() { // your code here }); Runs the code (e.g. to add classes, event handlers etc) when the DOM is fully loaded. ---- This is often shortened to this: $(function() { // your code here }); **Notes**: - the ''$("document").ready()'' function will only be called when the DOM is fully loaded and available for processing by JavaScript. - You can also have multiple calls to ''$(document).ready()'' and they will be executed in the order encountered. This allows you to modularize your code: for example to separate form validation from animation. - By declaring the code to be executed by jQuery as the body of an anonymous function you ensure that all the variables declared in the code block will be not visible to the rest of JavaScript. This prevents name clashes when using libraries and scripts from different sources. ===== Putting it All Together ===== The [[eg-259:ch14?&#events|jQuery Events]] example from this document re-implemented as a stand-alone script. * [[http://localhost:4567/eg-259/examples/lecture10/jquery_events.html|jquery_events.html]] ---- The Markup: Illustrate form input validation


         Illustrating jQuery

        
              jQuery Events 

            
                
                    Types of Plane
                    
                        
                            Model 152
                        
                            Model 172 (Skyhawk)
                        
                            Model 182 (Skylane)
                        
                            Model 210 (Centurian)
                    
                
            
        
        
             Simplified Event Regsitration

            
                Add an event listener to button labelled "Target" that shows an alert
                    when it is clicked
                Add an event listener to button labelled "Other" that clicks the "Target"
                    button.
                
                    
                    
                
            
        
        
             The jQuery event object

            
                The event will bubble out from the button in the inner div. It should
                    stop bubbling before it reaches the outer div and the form should not submit.

The JavaScript:


$(document).ready(function() {
    // The event handler for a radio button collection

    var planeChoice = function (plane) {

        // Produce an alert message about the chosen airplane

        switch (plane) {
            case "152":
                alert("A small two-place airplane for flight training");
                break;
            case "172":
                alert("The smaller of two four-place airplanes");
                break;
            case "182":
                alert("The larger of two four-place airplanes");
                break;
            case "210":
                alert("A six-place high-performance airplane");
                break;
            default:
                alert("Error in JavaScript function planeChoice");
                break;
        }
    };

    var describeEvent = function(event, source) {
        console.log("Handler caught " + event.type + " event from " + source);
        console.log("Original target")
        console.log(event.target);
        console.log("Current target");
        console.log(event.currentTarget);
        console.log("Mouse coordinates: [" + event.pageX + ", " + event.pageY + "]");
    };

    // Register event handlers for radio buttons
    $('[name="planeButton"]').on("click", function(event) {
        console.log(describeEvent(event,"planeButton"));
        plane = $(this).val();
        console.log("Button " + plane + " clicked");
        planeChoice(plane);
    });

    // Simplified event registration
    $('#target').click(function(event) {
        console.log(describeEvent(event,"Target Button"));
        alert("Target button clicked");
    });

    $('#other').click(function(event) {
        console.log(describeEvent(event,"Other Button"));
        alert("Other button clicked ... now clicking 'target'");
        $('#target').click();
    });


    // The jQuery event object - allows us to explore bubbling
    jQuery('button[type="submit"]').on("click", function(event) {
        describeEvent(event, "'Search' button");
        // stop form being submitted
        event.preventDefault();
    });

    jQuery('#inner').on("click", function(event) {
        describeEvent(event, "'#inner' div");
        // stop bubbling here
        event.stopPropagation();
    });

    jQuery('#outer').on("click", function(event) {
        // should never fire!
        describeEvent(event, "'#outer' div");
    });

});

===== The Form Validator Again ===== * Re-implemented using jQuery event handling [[http://localhost:4567/eg-259/examples/lecture10/validator.html|validator.html]] ---- The HTML is unchanged!


// Form validator re-implemented in jQuery

$(document).ready(function() {

  // The event handler function for the name text box

  var chkName = function(event) {
    var myName = event.target;

    // Test the format of the input name
    //  Allow the spaces after the commas to be optional
    //  Allow the period after the initial to be optional
    var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/);

    if (pos != 0) {
      alert("The name you entered (" + myName.value + ") is not in the correct form. \n" + 
            "The correct form is: " + "Last name, First name, Middle initial \n" + 
            "Please go back and fix your name");
      myName.focus();
      myName.select();
      return false;
    } else
      return true;
  };

  // The event handler function for the phone number text box

  var chkPhone = function(event) {
    var myPhone = event.target;

    // Test the format of the input phone number
    var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);

    if (pos != 0) {
      alert("The phone number you entered (" + myPhone.value + ") is not in the correct form. \n" + 
            "The correct form is: ddd-ddd-dddd \n" + 
            "Please go back and fix your phone number");
      myPhone.focus();
      myPhone.select();
      return false;
    } else
      return true;
  };

  var validate_form = function(event) {
    if (! chkName(event) || ! chkPhone(event)) {
      event.preventDefault();
    }
  };


  // Register event handlers
  $("#custName").change(chkName);
  $("#phone")   .change(chkPhone);
  $("#submit")  .click(validate_form);

});

===== jQuery UI Components ===== * A large library of interactions, widgets, utilities and effects. * Too many to describe here. * See [[http://jqueryui.com/home|jQuery UI]] ===== jQuery Mobile ===== > "Query Mobile is a touch-optimized HTML5 UI framework designed to make sites and apps that are accessible on all popular smartphone, tablet and desktop devices." -- [[http://jquerymobile.com/|jQuery Mobile]] * A set of widgets * Events optimised for touch interfaces provided by tablets and mobile phones * Designed for responsive web design * Built on HTML5 See the [[http://jquerymobile.com/|demos on the home page]]. ===== Using CDN ===== * Instead of hosting your own copy of jQuery or jQuery-UI, use a Content Distribution Network * E.g. using the Google API Code CDN