PHP Ajax 仅加载第一行

Question

我正在尝试使用 Ajax 在 php 上编写运行脚本，但只有第一行得到更新。

我看到了一些关于类的堆栈溢出帖子，我已经完成了，但仍然对我不起作用。

我在 foreach 中有 php table 运行ning 从 sqlite

加载数据

我在 table

中遇到问题的表格

       foreach ($result as $row) {
                extract($row);
                
                
              echo '<!-- Modal -->
<div class="modal fade" id="company_id-'.$row['company_id']  .'" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="company_id-'.$row['company_id']  .'" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Company ID: '.$row['company_id']  .'</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    <div class="mb-3">
    <ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#notes">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#other">Other</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active show" id="notes">

<div class="d-grid gap-2">
<button type="button" class="btn btn-secondary" disabled>Notes</button>
</div>
<form method="POST">
                <div class="form-group">
                    <label>company_id</label>
                    <input type="text" class="company_id" id="company_id[]"/>
                </div>
                <div class="form-group">
                    <label>notes</label>
                    <input type="text" class="notes" id="notes[]"/>
                </div>
                <center><button type="button" class="save" id="save[]" >Insert</button></center>
            </form>
        </div>

</div>
<div class="tab-pane fade" id="other">
<br>
<div class="d-grid gap-2">
...
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>';
             
            //creating new table row per record
            echo "<tr>";
                echo '<td><span class="badge ' . $exmpl_status_icon .'">' . $exmp_status . '</span></td>';
                echo '<td><button type="button" data-bs-toggle="modal" data-bs-target="#company_id-'.$row['company_id']  .'" class="btn btn-warning"><i class="fa-solid fa-eye"></i> </button></td>';
                echo "</tr></tbody>";

                }

和我正在使用的 JavaScript

$(document).ready(function(){
displayData();
$('.save').on('click', function(){
    var notes = $('.notes').val();
    var company_id = $('.company_id').val();

    if($('.notes').val() == "" || $('.company_id').val() == ""){
        alert("Please complete the required field");
    }else{
        $.ajax({
            type: 'POST',
            url: 'addcomment.php',
            data: {
                notes: notes,
                company_id: company_id,
            },
            success: function(data){
                $('.notes').val('');
                $('.company_id').val('');
                alert(data);
                displayData();
            }
        })
    }
});

function displayData(){
    $.ajax({
        type: 'POST',
        url: 'data.php',
        data: {res: 1},
        success: function(data){
            $('.data').html(data)
        }
    });
}
});

我从 ID 更改为 Class，但在 table 循环期间我仍然遗漏了一些东西，只有第一行在工作，第二行似乎数据被忽略，因为报告了空字符串。

如果有人知道我做错了什么或对此有解决方案，那就太好了，因为经过数小时的研究和尝试不同的代码，但运气不佳。不喜欢 ajax 但在这种情况下需要。

Answer 1

我设法修复了它。

我围绕表单创建了元素。

    var $el = $(this).closest('ty'); //Find parent tr element 
    var notes = $el.find(".notes").val();
    var company_id = $el.find(".company_id").val();

示例

 <ty>
 <form>
 </form>
</ty>

并搜索到最近的 ty 元素。现在我明白了这个逻辑。

PHP Ajax 仅加载第一行

PHP Ajax Only loads in first row

php

ajax

loops

ajaxform