时间戳

首页 > 解决方案 > PHP/AJAX 为什么我的 getAttribute 只针对 foreach 代码中的第一行

php - PHP/AJAX 为什么我的 getAttribute 只针对 foreach 代码中的第一行

问题描述

所以我在这里要做的是显示一个用户列表。在此列表中，每个用户都有一个按钮，该按钮将两个 ID 发送到我的数据库，这对于数组中的每个用户都是不同的。我通过 ajax 调用发送这些数据，您可以在下面看到。

问题是，该代码仅适用于列表中的第一个用户，而不适用于其他用户。我的猜测是它无法正常工作，因为每个列表项都具有相同的 id 名称，因此它仅针对具有 .getelementbyid 选择器的第一项。

所以我的问题是，是否有任何其他方法可以让按钮分别为每个用户发送 id。

我曾尝试使用 .sibling 选择器，但我不确定如何正确实现它。

<div class="content">
<div class="container-fluid">
    </div>
    <div class="row">
    <ul>
        <?php foreach ($module as $row) :?>
            <div class="col-md-8">
                <div class="toggleHolder">
                    <span class="toggler"><span>▾&lt;/span>Show More</span>
                    <span class="toggler" style="display:none;"><span>▴&lt;/span> Show Less</span>
                </div>
                <li><p id="post" data-id="<?php echo $row['id'] ?>"><?php echo $row['naam'] ?></p></li>

                <div class="showpanel" style="display: none;">
                    <li><p><?php echo $row['beschrijving'] ?></p></li>

                                <?php foreach ($patient as $row2): ?>
                                <div class="col-md-10">
                                        <div class='lists'>
                                            <li class="flex-item">
                                                <p class="text-left border-bottom post2" id="post2" data-id="<?php echo $row2['id'] ?>"><?php echo $row2['voornaam'].' '.$row2['achternaam'];?></p>
                                                <input id="btnSubmit" type="submit" value="Module toewijzen"/>
                                            </li>

                                    </div>
                                </div>
                                <?php endforeach; ?>
                </div>

            </div>
        <?php endforeach; ?>

    </ul>
    </div>
</div>


$(document).ready(function () {
    $("#btnSubmit").on("click", function (e) {
        console.log("clicked");

        // tekst vak uitlezen
        var module_id = document.getElementById("post").getAttribute("data-id");
        var user_id = document.getElementById("post2").getAttribute("data-id");
        // via AJAX update naar databank sturen
        $.ajax({
            method: "POST",
            url: "AJAX/clientmodule.php",
            data: {user_id: user_id,module_id: module_id} //update: is de naam en update is de waarde (value)

        })

            .done(function (response) {

                // code + message
                if (response.code == 200) {

                }
            });

        e.preventDefault();
    });
});

标签： phpjqueryarraysajax

解决方案

问题是因为您在id循环的 HTML 输出中复制了相同的内容。那是无效的。

改为使用类对元素进行分组。然后，您可以使用 DOM 遍历来查找与单击的按钮相关的元素，并在发送 AJAX 请求之前检索它们的值。

另请注意，如果您使用 then 的success属性，$.ajax则无需检查响应代码是否200与保证相同。它也更加健壮，因为 a204也是一个有效的响应，但从技术上讲不会被您的原始逻辑所捕获。

最后，您混合使用了 jQuery 和本机方法，最好只使用其中一种。要获取data-id元素的属性，您可以使用data().

说了这么多，试试这个：

$(function() {
  $(".btnSubmit").on("click", function(e) {
    e.preventDefault();

    var $container = $(this).closest('.col-md-8');
    var module_id = $container.find(".post").data('id');
    var user_id = $container.find(".post2").data('id');

    $.ajax({
      method: "POST",
      url: "AJAX/clientmodule.php",
      data: {
        user_id: user_id,
        module_id: module_id
      },
      success: function() {
        // callback logic here...
      }
    });
  });
});

<div class="container-fluid">
</div>
<div class="row">
  <ul>
    <?php foreach ($module as $row) :?>
      <div class="col-md-8">
        <div class="toggleHolder">
          <span class="toggler"><span>▾&lt;/span>Show More</span>
          <span class="toggler" style="display:none;"><span>▴&lt;/span> Show Less</span>
        </div>
        <li>
          <p class="post" data-id="<?php echo $row['id'] ?>">
            <?php echo $row['naam'] ?>
          </p>
        </li>
        <div class="showpanel" style="display: none;">
          <li>
            <p>
              <?php echo $row['beschrijving'] ?>
            </p>
          </li>
          <?php foreach ($patient as $row2): ?>
            <div class="col-md-10">
              <div class='lists'>
                <li class="flex-item">
                  <p class="text-left border-bottom post2" data-id="<?php echo $row2['id'] ?>">
                    <?php echo $row2['voornaam'].' '.$row2['achternaam'];?>
                  </p>
                  <input class="btnSubmit" type="submit" value="Module toewijzen" />
                </li>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endforeach; ?>
  </ul>
</div>

推荐阅读