更新AJAX請求變量，點擊PHP生成的表格行ID

我很可能忽略了一些非常明顯的事情，但在這一點上，我放棄了並且需要幫助。更新AJAX請求變量，點擊PHP生成的表格行ID

這是我的情況。當我的頁面加載時，在一段時間循環中，PHP生成一個表格，其中包含來自服務器的數據。每個表格行都有一個名稱列，電話等。其中一列是一個圖標，點擊後可讓用戶查看帶有關於該特定領導的註釋的彈出窗口。簡單的東西。

每行中的圖標都有相同的類名，並且它們的ID是唯一的。

我有一個AJAX請求，應該從服務器拉動筆記數據，並在用戶單擊相關圖標時在彈出窗口中顯示它。我試圖使用$（'。class'）。click（this）.attr（'id'）;用我需要提交給我的PHP腳本的id在我的AJAX請求中設置一個變量。

問題：AJAX請求和返回似乎工作正常，但無論我點擊哪個行圖標，只顯示屬於第一行的數據，或者第一個實例的類名爲homelead。例如：我點擊第1行圖標，我得到一行第1行的註釋，太棒了！我點擊任何其他行，它只顯示第一行的數據，:(我已經證實，通過簡單的點擊（this）。（id），並且提醒屬於該行圖標。所有是正確的，只是似乎無法得到JS變量與正確的ID進行更新。

林困惑這是爲什麼。任何幫助，將不勝感激。這是我當前的代碼。

HTML：

<td> 
     <img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>" 
      onclick="ajax_unitnotes();" src="images/list-view.png"> 
    </td> 
    <?php echo "</tr>"; } ?>

AJAX請求：

function ajax_unitnotes(){ 

    var hr = new XMLHttpRequest(); 
    var url = "PHP/getnotes.php"; 

    // this variable should update with clicked rows id before  submitting to PHP script 
    var unitidnotes = $('.homelead').click(this).attr('id');  

    var vars = "unitidnotes="+unitidnotes; 
    hr.open("POST", url, true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var return_data = hr.responseText; 
      document.getElementById("unitnotes").innerHTML = return_data; 
     } 
    } 
    hr.send(vars); 
    document.getElementById("unitnotes").innerHTML = "processing..."; 
}

來源

2015-05-16 Andrew Brown

正如你在標籤本身使用onclick觸發器 - 當使用jQuery時這通常不常見。在你的函數

function ajax_unitnotes(e){ 

    var unitidnotes = e.attr('id'); 
}

您當前的代碼

var unitidnotes = $('.homelead').click(this).attr('id');

<img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>" 
      onclick="ajax_unitnotes($(this));" src="images/list-view.png">

與實際不知道它的this對象，您試圖訪問：你可以做到這一點。

更重要的是，你可以使用jQuery的事件，從img標籤取下的onclick並有一個這樣的事件：

$('.homelead').click(function(){ 
    id = $(this).attr('id'); 
});

來源

2015-05-16 19:36:51 Lupin

感謝您的快速回復。我更新了我的代碼，現在它完美地工作。在標籤中使用onclick有什麼優點或缺點？ –

我不認爲存在性能問題，但是當您使用jQuery事件時，由於事件在視圖之外（HTML），因此更容易維護，並且如果您有許多具有相同類和該類的jQuery事件的元素你不需要這麼多的onclick屬性 – Lupin

你可以點擊的對象this傳遞給由「onclick」事件觸發的功能：

onclick="ajax_unitnotes(this);"

這將使您在JS函數內部單擊的DOM對象可用。

您需要相應地改變函數簽名：

function ajax_unitnotes(clickedElement){

，然後你可以改變這個

var unitidnotes = $('.homelead').click(this).attr('id');

到

var unitidnotes = clickedElement.id;

這會給你的$leadsfetch['unit_id']值= img id。

來源

2015-05-16 19:36:54

更新AJAX請求變量，點擊PHP生成的表格行ID

回答

相關問題