Skip to content

Instantly share code, notes, and snippets.

@duggiemitchell
Created February 16, 2016 05:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save duggiemitchell/2c4c1c30c36445a4afd1 to your computer and use it in GitHub Desktop.
Save duggiemitchell/2c4c1c30c36445a4afd1 to your computer and use it in GitHub Desktop.
Use Ajax to create interactive user experiences!
//Simple AJAX call using `$.get` shorthand method instead of `$.ajax`
$(document).ready(function() {
$('#tour').on('click', 'button', function() {
$.get('/photos.html',function(response) {
$('.photos').html(response).fadeIn();
});
});
});
// data option of ajax function
$(document).ready(function() {
$("#tour").on("click", "button", function() {
$.ajax('/photos.html', {
success: function(response) {
$('.photos').html(response).fadeIn();
},
data: { 'location': $('#tour').data('location') }
});
});
});
//Ajax with errors:
$(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) {
errorMessage = 'you done fucked up';
$('.photos').html('<li>Error:' +errorType+ ' with message: ' + errorMessage+'</li>');
}
});
});
});
//Adding styling CSS class to account for server request has been sent:
$(document).ready(function() {
$("#tour").on("click", "button", function() {
$.ajax('/photos.html', {
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');
}
});
});
});
// Event Delegation. The mouseover event is defined when the DOM loads, rater we should use event delegation to ensure they';; work when loaded via Ajax:
$(document).ready(function() {
function showPhotos() {
$(this).find('span').slideToggle();
}
$('.photos').on('mouseenter' 'li', showPhotos)
.on('mouseleave' 'li', 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('<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');
}
});
});
});
//Refactor to Objects to prevent overly nested function and overall difficult-to-read code. wrap ajax call into 'init' methof and insert into document.ready funtion:
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('<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');
}
});
});
}
}
$(document).ready(function() {
tour.init();
});
// AJAX request on form element:
$(document).ready(function() {
$('form').on('submit', function(event) {
event.preventDefault();
$.ajax('/book', {
type: 'POST',
data: $('form').serialize(),
success: function(result) {
$('.tour').html(result).fadeIn();
}
});
});
});
// Rendering HTML when AJAZ response is in JSON rather than HTML:
$(document).ready(function() {
$('form').on('submit', function(event) {
event.preventDefault();
$.ajax('/book', {
type: 'POST',
data: $('form').serialize(),
dataType: 'json',
success: function(response) {
$('form').remove();
$('.tour').hide().html('<p></p>')
.find('p')
.append('Trip to '+response.descrition+ 'for ' +response.nights+ ' nights, for a total of ' +response.price+ '. Your confirmation number is: ' +response.confirmation);
}
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment