terrancebryant/jsbin.aNIbeyA.html

## jsbin.aNIbeyA.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ajax Request" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="tour" data-location="london">
    <button>Button 1</button>
    <ul class="photos">
    </ul>
  </div>

  <div id="tour2" data-location="london">
    <button>Button 2</button>
    <ul class="photos2">
    </ul>
  </div>

  <div id="tour3" data-location="london">
    <button>Button 3</button>
    <ul class="photos3">
    </ul>
  </div>

  <div id="tour4" data-location="london">
    <button>Button 4</button>
    <ul class="photos4">
    </ul>
  </div>
</body>
</html>

## jsbin.aNIbeyA.js
$(document).ready(function() {

  /* First Ajax Call */
  $("#tour").on("click", "button", function() {
    $.ajax('http://jsbin.com/AsipayA/1', {
      success: function(response) {
         $('.photos').html(response).fadeIn();
      }
    });
  });

  /* Second Ajax Call */
  $("#tour2").on("click", "button", function(){
    $.get('http://jsbin.com/AsipayA/1', function(response) {
      $('.photos2').html(response).fadeIn();
    });
  });

  /* Third Ajax Call */
  var el = $("#tour3");
  el.on("click", "button", function() {
    $.ajax('http://jsbin.com/AsipayA/1', {
      data: {location: el.data('location')},
      success: function(response) {
        $('.photos3').html(response).fadeIn();
      }
    });
  });

  var el4 = $("#tour4");
  el4.on("click", "button", function() {
    $.ajax('http://www.worldstarhiphop.com/videos/video.php?v=wshhm9e2Y23YwgkWpijq', {
      data: {location: el4.data('location')},
      success: function(response) {
        $('.photos4').html(response).fadeIn();
      },
      error: function() {
        $('.photos4').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
      },
      timeout: 3000,
      beforeSend: function() {
        $('#tour').addClass('is-fetching');
      },
      complete: function() {
        $('#tour').removeClass('is-fetching');
      }
    });
  });


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

  var el5 = $("#tour");
  el5.on("click", "button", function() {
    $.ajax('/photos.html', {
      data: {location: el5.data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
      },
      error: function() {
        $('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
      },
      timeout: 3000,
      beforeSend: function() {
        $('#tour').addClass('is-fetching');
      },
      complete: function() {
        $('#tour').removeClass('is-fetching');
      }
    });
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Ajax Request" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="tour" data-location="london">
	<button>Button 1</button>
	<ul class="photos">
	</ul>
	</div>

	<div id="tour2" data-location="london">
	<button>Button 2</button>
	<ul class="photos2">
	</ul>
	</div>

	<div id="tour3" data-location="london">
	<button>Button 3</button>
	<ul class="photos3">
	</ul>
	</div>

	<div id="tour4" data-location="london">
	<button>Button 4</button>
	<ul class="photos4">
	</ul>
	</div>
	</body>
	</html>
	$(document).ready(function() {

	/* First Ajax Call */
	$("#tour").on("click", "button", function() {
	$.ajax('http://jsbin.com/AsipayA/1', {
	success: function(response) {
	$('.photos').html(response).fadeIn();
	}
	});
	});

	/* Second Ajax Call */
	$("#tour2").on("click", "button", function(){
	$.get('http://jsbin.com/AsipayA/1', function(response) {
	$('.photos2').html(response).fadeIn();
	});
	});

	/* Third Ajax Call */
	var el = $("#tour3");
	el.on("click", "button", function() {
	$.ajax('http://jsbin.com/AsipayA/1', {
	data: {location: el.data('location')},
	success: function(response) {
	$('.photos3').html(response).fadeIn();
	}
	});
	});

	var el4 = $("#tour4");
	el4.on("click", "button", function() {
	$.ajax('http://www.worldstarhiphop.com/videos/video.php?v=wshhm9e2Y23YwgkWpijq', {
	data: {location: el4.data('location')},
	success: function(response) {
	$('.photos4').html(response).fadeIn();
	},
	error: function() {
	$('.photos4').html('<li>There was a problem fetching the latest photos. Please try again.</li>');
	},
	timeout: 3000,
	beforeSend: function() {
	$('#tour').addClass('is-fetching');
	},
	complete: function() {
	$('#tour').removeClass('is-fetching');
	}
	});
	});


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

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