Created
May 12, 2016 00:54
-
-
Save philosoralphter/131ae90610a29d7b2c7ba4a5d4965e3f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// when the update button for a recipe is clicked | |
function handleRecipeEditClick(e) { | |
e.preventDefault(); | |
var $recipeRow = $(this).closest('.recipe'); | |
var recipeId = $recipeRow.data('recipe-id'); | |
console.log('edit recipes', recipeId); | |
$recipeRow.find('.save-recipe').toggleClass('hidden'); | |
$recipeRow.find('.edit-recipe').toggleClass('hidden'); | |
// get the recipe name and replace its field with an input element | |
var recipeName = $recipeRow.find('span.recipe-name').text(); | |
$recipeRow.find('span.recipe-name').html('<input type="text" value="' + recipeName + '"></input>'); | |
var ingredients = $recipeRow.find('span.ingredients-list').text(); | |
$recipeRow.find('span.ingredients-list').html('<input type="text" value="' + ingredients + '"></input>'); | |
var directions = $recipeRow.find('span.directions-list').text(); | |
$recipeRow.find('span.directions-list').html('<input type="text" value="' + directions + '"></input>'); | |
var madeBy = $recipeRow.find('span.madeBy-name').text(); | |
$recipeRow.find('span.madeBy-name').html('<input type="text" value="' + madeBy + '"></input>'); | |
var comments = $recipeRow.find('span.recipe-comments').text(); | |
$recipeRow.find('span.recipe-comments').html('<input type="text" value="' + comments + '"></input>'); | |
} | |
function handleSaveChangesClick(e) { | |
var recipeId = $(this).parents('.recipe').data('recipe-id'); | |
var $recipeRow = $('[data-recipe-id=' + recipeId + ']'); | |
var data = { | |
recipeName: $recipeRow.find('.edit-recipe-name').val(), | |
ingredients: $recipeRow.find('.edit-ingredients-list').val(), | |
directions: $recipeRow.find('.edit-directions-list').val(), | |
madeBy: $recipeRow.find('.edit-madeBy-name').val(), | |
comments: $recipeRow.find('.edit-recipe-comments').val() | |
}; | |
console.log('PUTing data for recipe', recipeId, 'with data', data); | |
$.ajax({ | |
method: 'PUT', | |
url: '/api/recipe/' + recipeId, | |
data: data, | |
success: handleRecipeUpdatedResponse | |
}); | |
} | |
function handleRecipeUpdatedResponse(data) { | |
console.log('response to update', data); | |
var recipeId = data._id; | |
// scratch this recipe from the page | |
$('[data-recipe-id=' + recipeId + ']').remove(); | |
// and then re-draw it with the updates | |
renderRecipe(data); | |
} | |
/////////////end update////////////// | |
controller.js:: | |
function update(req, res) { | |
console.log('updating with data', req.body); | |
db.Recipe.findById(req.params.RecipeId, function(err, foundRecipe) { | |
if(err) { console.log('recipeController.update error', err); } | |
foundRecipe.recipeName = req.body.recipeName; | |
foundRecipe.ingredients = req.body.ingredients; | |
foundRecipe.directions = req.body.directions; | |
foundRecipe.madeBy = req.body.madeBy; | |
foundRecipe.save(function(err, savedRecipe) { | |
if(err) { console.log('saving altered recipe failed'); } | |
res.json(savedRecipe); | |
}); | |
}); | |
} | |
((index.html::)) | |
<!-- recipe! --> | |
<div id='recipes'> | |
<script id="recipeTemplate" type="text/x-handlebars-template"> | |
<!-- one recipe --> | |
<div class="row recipe"> | |
<div class="row recipe" data-recipe-id="{{_id}}"> | |
<div class="col-md-10 col-md-offset-1"> | |
<!-- <div class="panel panel-default"> --> | |
<div class="panel-body"> | |
<!-- begin recipe internal row --> | |
<div class='row'> | |
<!-- why is this row empty? --> | |
</div> | |
<div class="col-md-9 col-xs-12" id="recipeBox"> | |
<ul class="list-group"> | |
<li class="list-group-item"> | |
<h4 class='inline-header'>Recipe Name:</h4> | |
<span class='recipe-name'>{{recipeName}}</span> | |
</li> | |
<li class="list-group-item"> | |
<h4 class='inline-header'>Ingredients:</h4> | |
<span class='ingredients-list'><div>{{ingredients}}</div></span> | |
</li> | |
<li class="list-group-item"> | |
<h4 class='inline-header'>Directions:</h4> | |
<span class='directions-list'><div>{{directions}}</div></span> | |
</li> | |
<li class="list-group-item"> | |
<h4 class='inline-header'>Made By:</h4> | |
<span class='madeBy-name'>{{madeBy}}</span> | |
</li> | |
<li class="list-group-item comment-section"> | |
<h4 class='inline-header'>Comments:</h4> | |
<!-- {{#each comments}} --> | |
<div class="text-left"> | |
<span class='userName'>{{userName}}</span> | |
<div> | |
<p class='comments'>{{comment}}</p> | |
<span class='date'>posted on "{{date}}"</span></div> | |
</div> | |
<!-- {{/each}} --> | |
</li> | |
</ul> | |
</div> | |
<button class='btn btn-primary edit-recipe'>Update Recipe</button> | |
<button class='btn btn-danger delete-recipe'>Delete Recipe</button> | |
<!-- <button class='btn btn-success edit-recipe hidden'>Save Recipe</button> --> | |
<button type="button" class="btn btn-default hidden">Close</button> | |
<button type="button" class='btn btn-success edit-recipe hidden'>Save Recipe</button> | |
</div> | |
<!-- end of recipe internal row --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment