id undefined when details are passed to a modal

Question

I have a table of recipes created by a particular user, and when the pencil mark on each row of the table is clicked, a modal is displayed, showing the details of this particular recipe and it should allow the user to edit the recipe and save the updated version to the database. However, although the details are correctly being passed to the modal, the recipe id doesn't seem to be passed to the modal, since I have tried to output the recipe id into the console and it says the recipe id is undefined. I have tried to debug this error but to no avail. Can anyone provide any insight into why this might be?

 //Recipe.js    

     $('.editThis').on('click', function() {
             var recipe_id = $(this).attr('data-id');
              var request = $.ajax({
                  url: "ajax/displayRecipe.php",
                  type: "post",
                  dataType: 'json',
                  data: {recipe_id : recipe_id}
            });

            request.done(function (response, textStatus, jqXHR){
              console.log("response " + JSON.stringify(response));
              $('#name').val(response.name);
              $('#date').val(response.date);
                });

        });


    $('#editRecipe').click(function() {
      var recipe_id = $(this).attr('data-id');
        var name_input = $('#name').val();
        var date_input = $('#date').val();

        var request = $.ajax({
            url: "ajax/updateRecipe.php",
            type: "post",
            data: {name : name_input, date : date_input, recipe_id : recipe_id},
            dataType: 'json'
        });

     request.done(function (response, textStatus, jqXHR){
         console.log(response);

        });
    });

   //Recipe.php

    <?php

      $recipeObject = new recipeList($database); //Lets pass through our DB connection
      $recipe = $recipeObject->getUserRecipes($_SESSION['userData']['user_id']); 

      foreach ($recipe as $key => $recipes) { 
           echo '<tr><td>'. $value['name'].'</td><td>'. $value['date'].'</td><td>'.'<a data-id = '.$value['recip_id'].' data-toggle="modal" class="edit editThis" data-target="#editRecipe"><i class="fa fa-pencil"></i></a>'.'</td></tr>';
      }
    ?>

    // editRecipe Modal

    <div id="recipe" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header recipe">
                    <h1 class="modal-title">Edit Recipe</h4>
                </div>
                <div class="modal-body">
                    <form method="post" id="updateRecipeForm">

                   <?php
                       require_once('classes/recipes.classes.php');
                       $recipeObject = new recipeList($database);
                       $recipe = $recipeObject->getRecipeDetails(recipe_id); 
                       if(isset($_POST['submit'])) {
                          $updateRecipe = $recipeObject ->updateRecipe($_POST['name'], $_POST['date'], $_POST['recipe_id']);
                          if($updateRecipe) {
                            echo ("Your recipe has been updated!";
                          }
                       }  
                   ?>

                   <div class="form-group">
                      <input type="text" class="control-form" id="name" value = "<?php echo $recipe['name']; ?>">
                   </div> 
                   <div class="form-group">
                      <input type="date" class="control-form" id="date" value = "<?php echo $recipe['date']; ?>">
                   </div>
                   </div>
                      <div class="form-group">
                         <input type="hidden" class="form-control" data-id=".$recipe['recipe_id']." id="recipe_id" name="recipe_id" value = "<?php echo $recipe['recipe_id']; ?>">
                      </div>
                  <button type="submit" class="btn recipe" id="editRecipe" data-dismiss="modal">Save</button>
               </form>
              </div>
           </div>
        </div>
    </div>


//ajax - updateRecipe.php



     <?php
        require_once('../includes/database.php');
        require_once('../classes/recipes.classes.php');

        if($_POST['name'] && $_POST['date'] && $_POST['trans_id']){
            $recipeObject = new recipeList($database);
            echo $recipeObject->updateRecipe($_POST['name'], $_POST['date'], $_POST['recipe_id']);
        }
    ?>

//recipes.classes.php
    ...

    public function getRecipeDetails($recipeid){
             $query = "SELECT * FROM recipe WHERE recipe_id = :recipe_id";
                $pdo = $this->db->prepare($query);
                $pdo->bindParam(':recipe_id', $recipeid);
                $pdo->execute();
                return $pdo->fetch(PDO::FETCH_ASSOC);
    }

    public function updateRecipe($name, $date, $recipe_id){
            $query = "UPDATE recipe SET name = :name, date = :date WHERE recipe_id = :recipe_id";
            $pdo = $this->db->prepare($query);
            $pdo->bindParam(':name', $name);
            $pdo->bindParam(':date', $date);
            $pdo->bindParam(':recipe_id', $recipe_id);
            $pdo->execute();
        }

Siva Ganesh · Answer 1 · 2018-05-08T08:00:58.223

1

Try this onclik function

Some time you cant get the apt value from this So Try this method. we can use id but in your case you foreach the a tag so we cant repeat id. Hope Its Works

   <a data-toggle="modal" class="recipe_<?php echo $value['recipe_id']; ?> edit editThis" onclick="editRecipe('<?php echo $value['recipe_id']; ?>')" ><i class="fa fa-pencil"></i></a>



function editRecipe(txt) {
      var recipe_id = $('.recipe_'+txt).val();
        var name_input = $('#name').val();
        var date_input = $('#date').val();

        var request = $.ajax({
            url: "ajax/updateRecipe.php",
            type: "post",
            data: {name : name_input, date : date_input, recipe_id : recipe_id},
            dataType: 'json'
        });

     request.done(function (response, textStatus, jqXHR){
         console.log(response);

        });
    };

edited May 08 '18 at 08:00

answered May 08 '18 at 07:14

Siva Ganesh

1,415
2
16
28

should it be recipe_id instead of recip_id? – unistudent1995 May 08 '18 at 07:35
Whats your DB value whether its recipe_id or recip_id? – Siva Ganesh May 08 '18 at 07:36
the value is recipe_id – unistudent1995 May 08 '18 at 07:37
Yeah i updated my answer, hope it works, If you have any issue, Please post a comment – Siva Ganesh May 08 '18 at 07:37
syntax error, unexpected 'recipe_id' (T_STRING), expecting ',' or ';' onclick="editRecipe('')" – unistudent1995 May 08 '18 at 07:50
How does that overcome the syntax error out of curiosity? – unistudent1995 May 08 '18 at 07:56
I changed the a tag now check it – Siva Ganesh May 08 '18 at 08:01
Please check it now, Replace the tag like this – Siva Ganesh May 08 '18 at 08:05
Its working or not?? If its working then approve my answer – Siva Ganesh May 08 '18 at 08:19

score 1 · Answer 2 · answered May 08 '18 at 07:21

1

Try the following:

$(document).on('click', '.editThis',function() {...});
$(document).on('click','#editRecipe',function() {...});

answered May 08 '18 at 07:21

themca

323
3
15

id undefined when details are passed to a modal

2 Answers2