PHP / AJAX Почему мой getAttribute ориентирован только на первую строку в коде foreach

Question

Итак, что я пытаюсь сделать, это показать список пользователей.В этом списке у каждого пользователя есть кнопка, которая отправляет два идентификатора в мою базу данных, которые отличаются для каждого пользователя в массиве.Я отправляю эти данные с помощью вызова ajax, который вы можете увидеть ниже.

Проблема в том, что код работает только для первого пользователя в списке, а не для остальных.Я предполагаю, что он не работает должным образом, потому что каждый элемент списка имеет одинаковое имя идентификатора, поэтому он предназначен только для первого элемента с селектором .getelementbyid.

Поэтому мой вопрос заключается в том, есть ли какой-либо другой способ сделатькнопки посылают идентификаторы для каждого пользователя индивидуально.

Я пытался использовать селектор .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>▾</span>Show More</span>
                    <span class="toggler" style="display:none;"><span>▴</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();
    });
});

Answer 1

Спасибо, что определенно помогли мне в правильном направлении.с вашим кодом все кнопки начали работать, но у меня все еще была проблема с тем, что он отправлял идентификаторы только из первой строки.

, вот как я в итоге решил:

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

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

        console.log("module : "+module_id);
        console.log("user : "+user_id);

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

Answer 2

Проблема в том, что вы дублируете один и тот же id в выводе HTML с помощью цикла.Это неверно.

Вместо этого используйте классы для группировки элементов.Затем вы можете использовать обход DOM, чтобы найти элементы, связанные с нажатой кнопкой, и получить их значения перед отправкой запроса AJAX.

Также обратите внимание, что если вы используете success свойство $.ajax, вам не нужно проверять, что код ответа 200, поскольку это гарантировано.Он также более надежен, так как 204 также является действительным ответом, но технически не будет отражен в вашей исходной логике.

Наконец, вы использовали сочетание 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>▾</span>Show More</span>
          <span class="toggler" style="display:none;"><span>▴</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>