<!DOCTYPE html>
<html>
<head>
<title>The Boot Closet - Phase 1</title>
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/bootcloset.css">
</head>
<body>
<div id="banner"></div>
<h1>Choose your boots</h1>
<div>
<div id="selections-pane">
<label for="boot-chooser-control">Boot style:</label>
<select id="boot-chooser-control" name="model"></select>
</div>
<div id="product-detail-pane"></div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$('#boot-chooser-control')
.load('actions/fetch-boot-style-options.php')
.change(function(event) {
$('#product-detail-pane').load(
'actions/fetch-product-details.php',
{
model: $(event.target).val()
},
function() {
$('[value=""]', event.target).remove();
}
);
});
</script>
</body>
</html>The load() method is tremendously useful when you want to grab a fragment of HTML to stuff into the content of an element (or set of elements). But there may be times when you either want more control over how the Ajax request gets made or need to do something more complex with the returned data in the response body.
Let’s continue our investigation of what jQuery has to offer for these more complex situations.
Leave a Reply