Commit 110ed0f2 authored by O'Reilly Media, Inc's avatar O'Reilly Media, Inc
Browse files

Initial commit

parents

JavaScript Templating - Working Files/Chapter 2/app.js

0 → 100755
+107 −0
Changes for JavaScript Templating - Working Files/Chapter 2/app.js: 107 added lines, 0 removed lines.
Original line number Diff line number Diff line 
var $results;

var $minprice;

var $maxprice;

var $model;

var $trim;

var $color;



$(document).ready(function() {

	

	//cache the results div

	$results = $("#results");



	$minprice = $("#minprice");

	$maxprice = $("#maxprice");

	

	models = carSearchModule.getModels();

	trims = carSearchModule.getTrims();

	colors = carSearchModule.getColors();

    features = carSearchModule.getFeatures();

    

    //render model filter

    var modelForm = '<label for="model">Model</label><select class="form-control" id="model">';

    //add a blank field

    modelForm += "<option></option>";

    for(var i=0, len=models.length; i<len; i++) {

        modelForm += '<option value="'+models[i]+'">'+models[i]+'</option>';

    }

    modelForm += "</select>";

    $("#modelFilter").html(modelForm);

    $model = $("#model");

    

    //render trim filter

    var trimForm = '<label for="trim">Trim</label><select class="form-control" id="trim">';

    //add a blank field

    trimForm += "<option></option>";

    for(var i=0, len=trims.length; i<len; i++) {

        trimForm += '<option value="'+trims[i]+'">'+trims[i]+'</option>';

    }

    trimForm += "</select>";

    $("#trimFilter").html(trimForm);

    $trim = $("#trim");



    //render color filter

    var colorForm = '<label for="trim">Color</label><select class="form-control" id="color">';

    //add a blank field

    colorForm += "<option></option>";

    for(var i=0, len=colors.length; i<len; i++) {

        colorForm += '<option value="'+colors[i]+'">'+colors[i]+'</option>';

    }

    colorForm += "</select>";

    $("#colorFilter").html(colorForm);

    $color = $("#color");

    

    //render feature filter

    var featureForm = '<strong>Features</strong><br/>';

    for(var i=0, len=features.length; i<len; i++) {

        featureForm += '<label><input type="checkbox" class="feature" value="'+features[i]+'"> '+features[i]+'</label><br/>';

    }

    $("#featureFilter").html(featureForm);

    

	//default msg

	$results.html("<i>Use the form to the left to begin your search!</i>");

	

	//search handler	

	$("#searchForm").on("submit", doSearch);

});



function doSearch(e) {

	e.preventDefault();



	console.log("search");

	var filters = {};

	

	if($minprice.val()) filters.minprice = $minprice.val();

	if($maxprice.val()) filters.maxprice = $maxprice.val();

    if($model.val()) filters.model = $model.val();

    if($trim.val()) filters.trim = $trim.val();

    if($color.val()) filters.color = $color.val();

    

    //Credit: http://stackoverflow.com/a/19766067/52160

    var features = $("input.feature:checked").map(function() {

        return this.value;

    }).get();

    if(features.length) filters.features = features;

    

	searcher = carSearchModule.search(filters);

	

	searcher.then(function(results) {

		var totalResult = "<h4>Total Results: "+results.length + "</h4>";

		results.forEach(function(car) {

			var result = "<div class='panel panel-warning'><div class='panel-heading'>";

			result += "<h3 class='panel-title'>" + car.model + " " + car.trim + "</h3></div>";

			result += "<div class='panel-body'>";

            result += "<p class='pull-right'><img class='img-thumbnail' src='"+car.imgUrl+"'></p>";

			result += "<p>The " + car.model + " " + car.trim + " is " + car.color + ". It has the following features:<ul>";

			for(var x=0; x<car.features.length;x++) {

				result += "<li>"+car.features[x]+"</li>";	

			}

			result += "</ul></p></div>";

			result += "<div class='panel-footer'>List Price: $" + car.price + "</div>";

			result += "</div>";

			totalResult += result;

		});

		$results.html(totalResult);

	});

	

}
 
 No newline at end of file

JavaScript Templating - Working Files/Chapter 2/carsearch.js

0 → 100755
+3586 −0

File added.

Preview size limit exceeded, changes collapsed.

JavaScript Templating - Working Files/Chapter 2/index.html

0 → 100755
+71 −0
Changes for JavaScript Templating - Working Files/Chapter 2/index.html: 71 added lines, 0 removed lines.
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>Car Search</title>

		<meta name="description" content="">

		<meta name="viewport" content="width=device-width">

		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

		<script src="carsearch.js"></script>

		<script src="app.js"></script>

	</head>

	<style>

		body { margin-top:20px; }

	</style>

	<body>



		<div class="container">

		

			<!-- filters -->

			<div class="col-md-4">

				<div class="panel panel-success">

					<div class="panel-heading">

						<h3 class="panel-title">Filters</h3>

					</div>

					<div class="panel-body">

						

						<form role="form" id="searchForm">

                            <div class="row">

                                <div class="col-md-6">

                                    <div class="form-group">

                                        <label for="minprice">Min Price</label>

                                        <div class="input-group">

                                            <div class="input-group-addon">$</div>

                                            <input type="number" class="form-control" id="minprice">

                                        </div>

                                    </div>

                                </div>

                                <div class="col-md-6">

                                    <div class="form-group">

                                        <label for="maxprice">Max Price</label>

                                        <div class="input-group">

                                            <div class="input-group-addon">$</div>

                                            <input type="number" class="form-control" id="maxprice">

                                        </div>

                                    </div>

                                </div>

                            </div>



                            <div class="form-group" id="modelFilter"></div>

                            <div class="form-group" id="trimFilter"></div>

                            <div class="form-group" id="colorFilter"></div>

                            <div class="checkbox" id="featureFilter"></div>



                            <button class="btn btn-primary btn-block" id="searchButton">Search</button>

						</form>

						

					</div>

				</div>

			</div>

			

			<!-- Results -->

			<div class="col-md-8">

				<h3>Car Inventory Search</h3>

				<div id="results"></div>

			</div>



		</div>

		

	</body>

</html>

JavaScript Templating - Working Files/Chapter 3/car_demo/app.js

0 → 100755
+97 −0
Changes for JavaScript Templating - Working Files/Chapter 3/car_demo/app.js: 97 added lines, 0 removed lines.
Original line number Diff line number Diff line 
var $results;

var $minprice;

var $maxprice;

var $model;

var $trim;

var $color;



var resultTemplate, resultsTemplate;



$(document).ready(function() {

	

	//cache the results div

	$results = $("#results");



	$minprice = $("#minprice");

	$maxprice = $("#maxprice");

	

	var models = carSearchModule.getModels();

	var trims = carSearchModule.getTrims();

	var colors = carSearchModule.getColors();

    var features = carSearchModule.getFeatures();

    

	var rendered;

	

    //render model filter

	var modelTemplate = $("#modelTemplate").html();

	rendered = new EJS({text:modelTemplate}).render({models:models});

    $("#modelFilter").html(rendered);



    $model = $("#model");

    

    //render trim filter

	var trimTemplate = $("#trimTemplate").html();

	rendered = new EJS({text:trimTemplate}).render({trims:trims});

    $("#trimFilter").html(rendered);

	

    $trim = $("#trim");



    //render color filter

	var colorTemplate = $("#colorTemplate").html();

	rendered = new EJS({text:colorTemplate}).render({colors:colors});

    $("#colorFilter").html(rendered);



	$color = $("#color");

    

    //render feature filter

	var featureTemplate = $("#featureTemplate").html();

	rendered = new EJS({text:featureTemplate}).render({features:features});

	$("#featureFilter").html(rendered);

    

	//get our result and results templates

	resultTemplate = $("#resultTemplate").html();

	resultsTemplate = $("#resultsTemplate").html();

	

	//default msg

	$results.html("<i>Use the form to the left to begin your search!</i>");

	

	//search handler	

	$("#searchForm").on("submit", doSearch);

});



function doSearch(e) {

	e.preventDefault();



	console.log("search");

	var filters = {};

	

	if($minprice.val()) filters.minprice = $minprice.val();

	if($maxprice.val()) filters.maxprice = $maxprice.val();

    if($model.val()) filters.model = $model.val();

    if($trim.val()) filters.trim = $trim.val();

    if($color.val()) filters.color = $color.val();

    

    //Credit: http://stackoverflow.com/a/19766067/52160

    var features = $("input.feature:checked").map(function() {

        return this.value;

    }).get();

    if(features.length) filters.features = features;

    

	searcher = carSearchModule.search(filters);

	

	searcher.then(function(cars) {

		var results = [];

		cars.forEach(function(car) {

			var rendered = new EJS({text:resultTemplate}).render({car:car});

			results.push(rendered);

		});

		

		var rendered = new EJS({text:resultsTemplate}).render({

			totalResults:cars.length,

			results:results});

		

		$results.html(rendered);

		

	});

	

}
 
 No newline at end of file

JavaScript Templating - Working Files/Chapter 3/car_demo/carsearch.js

0 → 100755
+3586 −0

File added.

Preview size limit exceeded, changes collapsed.

© 2026 O’Reilly Media, Inc. All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. Terms of Service • Privacy Policy • Editorial Independence