Sunday, February 25, 2018

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

      Badge-06

      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});
});
      --------------------------------------------------------------------------------------------------------------------------











      at
      Labels:

      No comments:

      Post a Comment

      Subscribe to: Post Comments (Atom)