Node.js

Exlir

Backbone.js

Jquery 2 - part 2

$(document).ready(function() {
  $('#tour').on('click', 'button', function() {
    $.ajax('/photos.html', {
      success: function(response) {
        $('.photos').html(response).fadeIn();
      }
    });
  });
});

$(document).ready(function() {
  $('#tour').on('click', 'button', function() {
    $.get('/photos.html', function(response) {
        $('.photos').html(response).fadeIn();
    });
  });

});

-----------------------------------------------------------------------------------------------------------

data-location="london">

$(document).ready(function() {
  var el = $("#tour")
  el.on("click", "button", function() {
    $.ajax('/photos.html', {
      data: {location: el.data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
      }

$(document).ready(function() {
  $("#tour").on("click", "button", function() {
    $.ajax('/photos.html', {
      data:{location: $("#tour").data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
       
      }
    });
  });
});

$(document).ready(function() {
  var el = $("#tour");
  el.on("click", "button", function() {
    $.ajax('/photos.html', {
      data: {location: el.data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
      },
      error:function(request,errorType,errorMessage){
      $('.photos').html('
 You lost connection 
');
      }
    });
  });
});

$(document).ready(function() {
  $("#tour").on("click", "button", function() {
    $.ajax('/photos.html', {
      success: function(response) {
        $('.photos').html(response).fadeIn();
      },
      error: function() {
        $('.photos').html('
There was a problem fetching the latest photos. Please try again.
');
      },
      timeout: 3000,
      beforeSend: function(){
           $('#tour').addClass('is-fetching');
       },
      complete:function(){
         $('#tour').removeClass('is-fetching');
      } 
    });
  });
});

$(document).ready(function() {
  function showPhotos() {
    $(this).find('span').slideToggle();
  }
  $('.photos li').on('mouseenter', showPhotos)
                 .on('mouseleave', showPhotos);


  var el = $("#tour");
  el.on("click", "button", function() {
    $.ajax('/photos.html', {
      data: {location: el.data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
      },
      error: function() {
        $('.photos').html('
There was a problem fetching the latest photos. Please try again.
');
      },
      timeout: 3000,
      beforeSend: function() {
        $('#tour').addClass('is-fetching');
      },
      complete: function() {
        $('#tour').removeClass('is-fetching');
      }
    });
  });
});

function Tour(el) {
  var tour = this;
  this.el = el;
  this.fetchPhotos = function() { 
    $.ajax('/photos.html', {
      context: tour,
      data: {location: el.data('location')},
      success: function(response) {
        this.el.find('.photos').html(response).fadeIn();
      },
      error: function() {
        this.el.find('.photos').html('
 problem fetching Please.
');
      },
      timeout: 3000,
      beforeSend: function() {
        this.el.addClass('is-fetching');
      },
      complete: function() {
        this.el.removeClass('is-fetching');
      }
    });
  }
  this.el.on('click', 'button', this.fetchPhotos);
}$(document).ready(function() { 
  var paris = new Tour($('#paris'));
});

CHAPTER 2

JavaScript and jQuery

JavaScript Objects

1.  2.2 JavaScript Objects
2.  2.3 Refactor To Objects
3.  2.4 Event Handler Refactor

JavaScript Functions

1.  2.5 JavaScript Functions
2.  2.6 Creating a Function
3.  2.7 Functionality in Functions
4.  2.8 Function Refactor
5.  2.9 Function Setup
6.  2.10 fetchPhotos Refactor
7.  2.11 Instances of a Function

var tour = {
  init: function() {
    $("#tour").on("click", "button", function() { 
      $.ajax('/photos.html', {
        data: {location: $("#tour").data('location')},
        success: function(response) {
          $('.photos').html(response).fadeIn();
        },
        error: function() {
          $('.photos').html('

There was a problem fetching the latest photos. Please try again.

');
        },
        timeout: 3000,
        beforeSend: function() {
          $('#tour').addClass('is-fetching');
        },
        complete: function() {
          $('#tour').removeClass('is-fetching');
        }
      });
    });
  }
}
$(document).ready(function() { 
  tour.init();
});

 WITH FORMS

function Tour(el) {
  var tour = this;
  this.el = el;
  this.fetchPhotos = function() { 
    $.ajax('/photos.html', {
      data: {location: tour.el.data('location')},
      context: tour,
      success: function(response) {
        this.el.find('.photos').html(response).fadeIn();
      },
      error: function() {
        this.el.find('.photos').html('

There was a problem fetching the latest photos. Please try again.

');
      },
      timeout: 3000,
      beforeSend: function() {
        this.el.addClass('is-fetching');
      },
      complete: function() {
        this.el.removeClass('is-fetching');
      }
    });
  }
  this.el.on('click', 'button', this.fetchPhotos);
}
$(document).ready(function() { 
  var paris = new Tour($('#paris'));
  var london = new Tour($('#london'));
});

----------------------------------------------------------------------------------------------------------------------

CHAPTER 3

Ajax With Forms

Ajax With Forms

1.  3.2 Ajax With Forms
2.  3.3 Form Submit Event
3.  3.4 $.ajax with POST
4.  3.5 Success Callback

$(document).ready(function() {
  $('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax('/book', {
      type: 'POST',
      data: $('form').serialize(),
      success:function(response){
        $('.tour').html(response)
      }
    });
  });
});

Ajax With JSON

1.  3.6 Ajax With JSON
2.  3.7 The JSON Switch
3.  3.8 Don't Repeat Yourself

$(document).ready(function() {
  $('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax($('form').attr('action'), {
      type: $('form').attr('method'),
      data: $('form').serialize(),
      dataType: 'json',
      success: function(response) {
        $('.tour').html('
')
                  .find('p')
                  .append('Trip to ' + response.description)
                  .append(' at $' + response.price)
                  .append(' for ' + response.nights + ' nights')
                  .append('. Confirmation: ' +  response.confirmation);
      }
    });
  });
});

$('.update-available-flights').on('click', function() {
  $.getJSON('/flights/late', function(result) {
    var flightElements = $.map(result, function(flightItem, index){
      var flightEl = $('
'
+flightItem.flightNumber+'-'+flightItem.time+'

');
return flightEl;
});
$('.flight-times').detach()
.html(flightElements)
.appendTo($('.flights'))
});
});

$('button').on('click', function() {
  $.ajax('/cities/deals', {
    type: 'get',
    success: function(result) {
      $.each(result, function(index, dealItem) {
        var dealElement = $('.deal-' + index);
        dealElement.find('.name').html(dealItem.name);
        dealElement.find('.price').html(dealItem.price);
      });
    }
  });
});

CODE REFACTOR

$('button').on('click', function() {
  $.getJSON('/cities/deals',  function(result) {
      $.each(result, function(index, dealItem) {
        var dealElement = $('.deal-' + index);
        dealElement.find('.name').html(dealItem.name);
        dealElement.find('.price').html(dealItem.price);
      });
    }
  );

});

$('.update-available-flights').on('click', function() {
  $.getJSON('/flights/late', function(result) {
    $.map(result,function(dealItem,index){
            console.log(dealItem);
    });

  });
});

 

 

$('.update-available-flights').on('click', function() {
  $.getJSON('/flights/late', function(result) {
    var flightElements = $.map(result, function(flightItem, index){
      return $('
'
+flightItem.flightNumber+'-'+flightItem.time+'

');
});
$('.flight-times').html(flightElements);
});
});

CHAPTER 5

jQuery Plugins

Advanced Events

1.  5.2 Events for Plugins
2.  5.3 Removing Event Handlers
3.  5.4 Namespacing Event Handlers
4.  5.5 Trigger
5.  5.6 Custom Events

jQuery Plugins

1.  5.7 jQuery Plugins
2.  5.8 Declaring a jQuery plugin
3.  5.9 Iteration with each
4.  5.10 Plugin Event
5.  5.11 Using $.extend()
6.  5.12 External Triggers
7.  5.13 Internal Triggers

Level Points

$(document).ready(function(){
  // Get Weather
  $('button').on('click.weather', function() {
    var results = $(this).closest('li').find('.results');
    results.append('Weather: 74°
');
    $(this).off('click.weather');
  });
  
   // Show Photos
  $('button').on('click.photos', function() {
    var tour = $(this).closest('li');
    var results = tour.find('.results');
    results.append('
');
    $(this).off('click.photos');
  });
});

custom events 

$(document).ready(function(){
  // Get Weather
  $('button').on('show.weather', function() {
    var results = $(this).closest('li').find('.results');
    results.append('Weather: 74°
');
    $(this).off('show.weather');
  });

  // Show Photos
  $('button').on('click.photos', function() {
    var tour = $(this).closest('li');
    var results = tour.find('.results');
    results.append('
');
    $(this).off('click.photos');
    $(this).trigger('show.weather');
  });

});
-------------------------------------------------------------------------------------------------------------------------








































-------------------------------------------------------------------------------------------------------------------------

CHAPTER 6

Promises

Promises

1.  6.2 Promises
2.  6.3 Reusable AJAX
3.  6.4 Using the Vacation
4.  6.5 Simplifying the result
5.  6.6 The Simple Result
6.  6.7 Promising Errors
7.  6.8 Fail()
8.  6.9 When() and Then()

For using ajax call on multiple pages 

var Vacation = {
  
 getPrice :function(location){
   
    var promise =  $.ajax('/vacation/prices', {
      data: {q: location},
      success: function(result){
        promise.resolve(result.price);
      }
    
    } );
    return promise;
  }
};
------------------------------------------------------------------

var Vacation = {
  getPrice: function(location){
    var promise = $.Deferred();
    $.ajax('/vacation/prices', {
      data: {q: location},
      success: function(result){
       promise.resolve(result.price)
      }
    });
    return promise;
  }

}
$(document).ready(function() {
  $('button').on('click', function(){
    var location = $('.location').text();
    Vacation.getPrice(location).done(function(result){
      $('.price').text(result);
    }).fail(function(result){
       console.log(result);
    })
  });
});

------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------

$(document).ready(function() {
  $('button').on('click', function(){
    var tour = $(this).parent();
    var location = tour.data('location');
    var resultDiv = tour.find('.results').empty();
    Vacation.getPrice(location).done(function(priceResult){
      $('$'+priceResult+'
').appendTo(resultDiv);
    });

    Photo.getPhoto(location).done(function(photoResult){
      $('').attr('src', photoResult).appendTo(resultDiv);
    });
  });
});


$(document).ready(function() {
  $('button').on('click', function(){
    var location = $(this).parent().data('location');
    var resultDiv = $(this).parent().find('.results').empty();

    $.when(
      Vacation.getPrice(location),
      Photo.getPhoto(location)
    ).then(function(priceResult, photoResult) {
      $('$'+priceResult+'
').appendTo(resultDiv);
      $('').attr('src', photoResult).appendTo(resultDiv);
    });
  });
});

------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------

$.fn.photofy = function() {
  this.each(function() {
    var tour = $(this);
    var show = function(e) {
       e.preventDefault();
       tour.addClass('is-showing-photofy');
     }

     tour.on('click.photofy', '.see-photos', show);
  });
}

$(document).ready(function() {
  $('.tour').photofy();
});

$.fn.photofy = function(options) {
  this.each(function() {
    var show = function(e) {
       e.preventDefault();
       settings.tour
               .addClass('is-showing-photofy')
               .find('.photos')
               .find('li:gt('+(settings.count-1)+')').hide();
     }
     var settings = $.extend({
       count: 3,
       tour: $(this)
     }, options);
     settings.tour.on('click.photofy', '.see-photos', show);
  });
}

$(document).ready(function() {
  $('.tour').photofy(

$.fn.photofy = function(options) {
  this.each(function() {
    var show = function(e) {
      e.preventDefault();
      settings.tour
              .addClass('is-showing-photofy')
              .find('.photos')
              .find('li:gt('+(settings.photos-1)+')')
              .hide();
    };
    var settings = $.extend({
      count: 3,
      tour: $(this)
    }, options);
    settings.tour.on('click.photofy', '.see-photos', show);
    settings.tour.on('show.photofy', show);
  });
}

$(document).ready(function() {
  $('.tour').photofy({ count: 1});

  $('.show-photos').on('click', function(e) {
    e.preventDefault();
    $('.tour').trigger('show.photofy');
  });

});{ count: 1});
});

--------------------------------------------------------------------------------------------------------------------------