将详细信息传递给模态时 id 未定义

Posted 2023-02-24

【中文标题】将详细信息传递给模态时 id 未定义

【英文标题】：id undefined when details are passed to a modal

【发布时间】：2018-10-18 01:16:42

【问题描述】：

我有一个由特定用户创建的食谱表，当点击表格每一行上的铅笔标记时，会显示一个模式，显示这个特定食谱的详细信息，它应该允许用户编辑配方并将更新的版本保存到数据库中。但是，尽管详细信息已正确传递给模态，但配方 ID 似乎并未传递给模态，因为我试图将配方 ID 输出到控制台并且它说配方 ID 未定义。我试图调试此错误但无济于事。任何人都可以提供任何关于为什么会这样的见解吗？

 //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();
        

【参考方案1】：

尝试以下方法：

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

【参考方案2】：

试试这个 onclik 功能

有时您无法从 this 获取 apt 值，因此请尝试此方法。 我们可以使用 id，但在您的情况下，您会使用 a 标签，因此我们不能重复 id。希望它的作品

   <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);

        );
    ;

【讨论】：

应该是 recipe_id 而不是 recip_id？

你的 DB 值是多少？是 recipe_id 还是 recip_id？

值为recipe_id

是的，我更新了我的答案，希望它有效，如果您有任何问题，请发表评论

语法错误，意外的 'recipe_id' (T_STRING)，需要 ',' 或 ';' onclick="editRecipe('')"