Friday, April 20, 2012

Solution to Chapter 6 Exercises of Learning jQuery 3rd Edition


My solutions to Learning jQuery 3rd Edition Chapter 6 exercises:


1. When the page loads, pull the body content of exercises-content.html into the content area of the page.

jQuery(document).ready(function ($) {
    $('#dictionary').load('exercises-content.html');
});


2. Rather than displaying that whole document at once, create "tooltips" for the letters in the left column by loading just the appropriate letter's content from exercises-content.html when the user's mouse is over the letter.

jQuery(document).ready(function ($) {
    $('div[id^="letter-"] a').hover(function () {
        var id = $(this).closest('div').attr('id');
        //alert(id);
        $('#dictionary').load('exercises-content.html #' + id);
    }, function () {
        $('#dictionary').html('');
    });

});


3. Add error handling for this page load, displaying the error message in the content area. Test this error handling code by changing the script to request does-not-exist.html rather than exercises-content.html.

jQuery(document).ready(function ($) {
    $.get('does-not-exist.html', function (data) {
        $('#dictionary').append(data);
    }).error(function (jqxhr) {
        $('#dictionary').html('<h2>an error occured: ' + jqxhr.status + '</h2>').append(jqxhr.responsetext);
    });

});


4. Challenge: When the page loads, send a JSONP request to Twitter and retrieve a user's last five messages. Insert the messages into the content area of the page. The URL to retrieve the last five messages of user kswedberg is: http://twitter.com/statuses/user_timeline/kswedberg.json?count=5.

jQuery(document).ready(function ($) {
    // with help from http://wpcanyon.com/tipsandtricks/2-different-ways-for-getting-twitter-status-php-and-jquery/
    var url = 'http://twitter.com/statuses/user_timeline/jeremiahflaga.json';
   
    $.getJSON(url + '?count=5&callback=?', function (data) {
        var html = '';
        $.each(data, function (entryIndex, entry) {
            html += '<h3 class="entry">' + entry.text + '</h3>';
        });
        $('#dictionary').html(html);
    });

});


 



  
Free Lessons for Chruch Pianists:
Free lessons, tips and downloads for church pianists

DVD Courses (Reharmonization, Play by Ear!, Arranging, Accompanying, Theory for Church Pianists, etc.):
Over 30 hours of DVD instruction for church pianists
 


Visit Vitabase for Quality Health Supplements


2 comments:

  1. What is new for the Guild Wars 2 fans recently is the Lost Shores. What is the biggest challenge for you now must be the Karka, which is the updated monsters in the game. To protect the shores, you need to take it down. But you should never underrestimate it as it is really a strong enemy. You need strong gw2 weapons(you may need to buy some guild wars 2 gold in the store to exchange for some), you need good team members to fight with you. There will also be rich rewards for you there.

    ReplyDelete
  2. RE: Question #2
    Hey Jeremiah, it took me a while before I gave up and came here to check your solution. Very lean, cool implementation!

    At first, I was attempting to actually change the title attribute of each 'a' tag to match its corresponding 'div' in the other HTML file; that was my interpretation of the directions. After studying and testing your solution, I wondered how I might go about doing what I originally wanted to do, and I came around to the solution below:

    $(document).ready(function(){
    // Question 2
    var myData = '';
    $.ajax({
    url: 'exercises-content.html',
    success: function(data){
    myData = data;
    }
    });
    $('div[id^="letter-"] a').each(function(){
    var id = $(this).closest('div').attr('id');
    var myTitle = $(myData).filter('div#'+id).text();
    $(this).attr('title',myTitle.trim());
    });
    });

    ReplyDelete