Javascript Update mysql Row on Bootstrap modal open

Posted 2023-02-24

【中文标题】Javascript Update mysql Row on Bootstrap modal open

【英文标题】：

【发布时间】：2018-07-24 07:13:38

【问题描述】：

我认为我已经在主题标题中阐述了我的问题。

我在网格视图中有产品的电子商务商店。对于每个项目，我都有带有产品信息等的独特模式。

产品存储在 mysql 数据库中。并获得了浏览量（计数，有多少用户浏览了该产品）

我想在 Modal 打开时更新 MySQL 行。

但此时我遇到了两个问题： 1.即使没有打开模式，它也会更新值。（页面只是加载） 2.它会更新所有产品的浏览量。（我认为是因为1.问题）

对于每个产品，我都有唯一的 ID 和类别（将仅复制起始代码，因为所有模式都很大）

<div class="modal fade shop_item_<?php echo $item['id'];?>" id="shop_item_<?php echo $item['id'];?>" tabindex="-1" role="dialog" aria-hidden="true" style="width:100%">

这就是我尝试更新视图的方式（此代码位于模态之后）：

<script>
    $('#shop_item_<?php echo $item['id'];?>"').on('shown.bs.modal', function() 
      <?php
      $id = $item['id'];

      $stmt = $this->conn->prepare("SELECT views FROM shop_items WHERE id='$id'");
      $stmt->execute();
      $result = $stmt->fetchAll();
      foreach ($result as $views)
        $newviews = $views['views'] +1;
        $stmt = $this->conn->prepare("UPDATE shop_items SET views = '$newviews' WHERE id='$id'");
        $stmt->execute();
      
     ?>
</script>

【问题讨论】：

为所有模态输入通用类名，并为您打开模态的按钮或墨迹放置通用类名。为该 comman 类名称定义一个单击事件，如果唯一的 ID 字段不常见，则获取属性。这样您就可以根据 ID 跟踪激活了哪个模式。永远不要为同一组组件放置唯一的类名。因为我们可以根据类为这些组件组定义操作，并根据 ID 唯一标识它们。当您可以按预期方式同时使用类和 ID 时，您的问题将得到解决

@webDev 我不明白这如何解决所有产品视图更新的问题？

好的，所以当你点击一个元素来打开模态框时......你需要获得模态框的 id = .....attr('id') ，该模态框将具有 id的记录。触发 ajax 调用并根据存储在模式的 ID 属性上的 id 更新记录。首先告诉我你是如何打开模态的，你在循环中有按钮或链接吗？

@webDev 我发现问题出在此处 "$('.shop_item22_"').on('shown.bs.modal ', function() " 因为 shop_item22 甚至不存在，但更新功能仍然有效

是的，这就是为什么我说对 JS 的操作使用类名而不是 ID。因为重复没有太大区别的JS代码和方法不是一个好主意。只需 tract 当前 item_id 点击。看我的例子

【参考方案1】：

根据您的评论，您可以做的只是简单地输入项目 ID 和 html 属性 ID

查看我放置的所有 ID 和类。对于一组相同的模态，您只需要一个 javascript 方法。

<!-- Inside a loop -->
<button type="button" class="btn btn-info btn-lg open_modal" id="<?php echo $item['id']; ?>" data-toggle="modal" data-target="#<?php echo $item['id']; ?>">Open Modal</button>

<div class="modal fade" id="<?php echo $item['id']; ?>" tabindex="-1" role="dialog" aria-hidden="true" style="width:100%">
    .......
    .......
    .......
</div>
<!------------------>

一种基于打开的模式更新记录的单一JS方法

<script>
    $('.open_modal').click(function () 
        var item_id = $(this).attr("id");
        //get all other data based on this ID and also get updated one from modal
        //make a ajax call to update the record base on this item_id
    )

</script>

假设：我假设您通过循环创建了许多模态，并且您希望根据要打开的模态记录来更新每个模态记录。