Task 1: AJAX
We need the
href for the AJAX request.
$(document).ready(function(){
$("[rel=js-controls]").on("click","> [rel^=js]",function(evt){
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
// wrap it with $() to add jQuery methods (attr("href")
var url = $(evt.target).attr("href");
// specify dataType: "text": to preveny parsing
$.ajax(url,{ dataType: "text" })
.then(function(contents){
$modal.html(contents).show();
});
});
});
AJAX is very easy with jQuery. We still need to declare
$modal (line#13)
var $modal = $("[rel=js-modal]");
Insert it around (above) line#2. He prefixes all variables pointing to jQuery elements with
$. - What about using
$(this) inside click handler? Instead of evt.target?It's not as reliable as you would expect. Because of event bubbling,
this might not always point to what you want. jQuery makes sure, that evt.target always points to the element that got clicked on. More reliable. The
.then in the AJAX is part of the jQuery API. It's not a promise. It's jQuery's thenable. Then explains callbacks - the function passed to
.on().This example shows mostly everything you will do with jQuery programming.
handlers, chaining, ajax, update html, show element.
The JavaScript in this code is very simple. Most complexity is about jQuery.
Again, he tries to avoid DOM, or HTML specific hooks in his code (i.e. tag names like
a).