Skip to main content

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











      Labels:

      Comments

      Post a Comment

      Popular posts from this blog

      Microservices Design patterns

      What are microservices? Microservices - also known as the microservice architecture - is an architectural style that structures an application as a collection of services that are Highly maintainable and testable Loosely coupled Independently deployable Organized around business capabilities Owned by a small team The microservice architecture enables the rapid, frequent and reliable delivery of large, complex applications. It also enables an organization to evolve its technology stack. You are developing a server-side enterprise application. It must support a variety of different clients including desktop browsers, mobile browsers and native mobile applications. The application might also expose an API for 3rd parties to consume. It might also integrate with other applications via either web services or a message broker. The application handles requests (HTTP requests and messages) by executing business logic; accessing a database; exchanging messages with other systems; and returni...
      Post a Comment
      Read more

      GraphQL

      What is GraphQL  API Standard invented & open-sourced by Facebook Alternative to  REST API  enables declarative data fetching  exposes single endpoint & responds to queries How it works?  Why Graphql? Improvises performance by reducing the data that is to be transferred over the internet Variety of different frontend frameworks and platforms on client-side Fast development speed & expectation for rapid feature development Why Graphql is better than REST? Flexibility & efficient  No more over /under fetching of data Over fetching : Under fetching: Insightful analytics  Schema serves as contract between client and server CORE CONCEPTS : SDL :SCHEMA DEFINITION LANGUAGE Writing Data with mutations 3 kinds of mutations creating new data updating existing data deleting existing data
      Post a Comment
      Read more

      Jackson

      <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-core </artifactId> <version>2.9.6</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-annotations </artifactId> <version>2.9.6</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> jackson-databind </artifactId> <version>2.9.6</version> </dependency> CBOR encoded data with Jackson <dependency> <groupId>com.fasterxml.jackson.dataformat</groupId> <artifactId>jackson-dataformat-cbor</artifactId> <version>2.9.6</version> </dependency> In order to read and write MessagePack encoded data <dependency> <groupId>org.msgpack</groupId> <artifactId>jackson-dataformat-msgp...
      Post a Comment
      Read more