PHPAjax僅在第一行加載

我正在嘗試使用 Ajax 在 php 上運行腳本，但只有第一行得到更新。

我看到了一些關于我完成但仍然對我不起作用的類的堆疊溢位帖子。

我在 foreach 中運行 php 表，它從 sqlite 加載資料

我在表格中遇到問題的表格

       foreach ($result as $row) {
                extract($row);
                
                
              echo '<!-- Modal -->
<div  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 >
    <div >
      <div >
        <h5  id="exampleModalLabel">Company ID: '.$row['company_id']  .'</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
    <div >
    <ul >
<li >
<a  data-bs-toggle="tab" href="#notes">Notes</a>
</li>
<li >
<a  data-bs-toggle="tab" href="#other">Other</a>
</li>
</ul>
<div id="myTabContent" >
<div  id="notes">

<div >
<button type="button"  disabled>Notes</button>
</div>
<form method="POST">
                <div >
                    <label>company_id</label>
                    <input type="text"  id="company_id[]"/>
                </div>
                <div >
                    <label>notes</label>
                    <input type="text"  id="notes[]"/>
                </div>
                <center><button type="button"  id="save[]" >Insert</button></center>
            </form>
        </div>

</div>
<div  id="other">
<br>
<div >
...
</div>

</div>
<div >
<button type="button"  data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>';
             
            //creating new table row per record
            echo "<tr>";
                echo '<td><span hljs-variable">$exmpl_status_icon .'">' . $exmp_status . '</span></td>';
                echo '<td><button type="button" data-bs-toggle="modal" data-bs-target="#company_id-'.$row['company_id']  .'" ><i ></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，但在表回圈期間我仍然遺漏了一些東西，只有第一行正在作業，第二行似乎資料被忽略，因為報告了空字串。

如果有人知道我做錯了什么或對此有解決方案，那就太好了，因為經過數小時的研究和嘗試不同的代碼沒有運氣。不是 ajax 的粉絲，但在這種情況下需要。

uj5u.com熱心網友回復：

我設法修復它。

我在表單周圍創建了 <ty> 元素。

    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 阿贾克斯 循环 ajaxform

上一篇：如何使用ajax打開將資料發送到的檔案？

下一篇：用DOM中的另一個文本替換元素文本