gistfile1.txt

// 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 -->