Question

所以我目前有一个由ajax和json文件生成的表。该表有3个段，一个名称，一个ID，第三列是一个链接，用于了解每个结果的更多细节。

我的表格看起来如何

PATO:0001243    light blue    Details
PATO:0001246    light brown   Details
PATO:0001247    light cyan    Details

我必须生成表的当前代码是：

    $.each(data.matches, function(i, item){
    var this_row_id = 'result_row_' + next_row_num++;
    $('<tr/>', {"id":this_row_id}).appendTo('tbody');
    $('<td/>', {"text":item.label}).appendTo('#'+this_row_id);
    $('<td/>', {"text":item.value}).appendTo('#'+this_row_id);
    $('<a href="./test.cgi">'+ 'Details' +'</a>').appendTo('#'+this_row_id);
});

理想情况下，我希望能够点击“详细信息”，它会将ID值传递给另一个ajax调用，然后创建一个对话框/模态以显示该ajax调用的结果。

EXAMPLE

从上面的列表中，单击第一个条目中的“Details”将把值“PATO：0001234”传递给我的“test.cgi”脚本，该脚本将使用该值处理并为我返回一个JSON。在对话框中显示。

我不是要求别人为我编写代码，只是关于如何处理这个问题的方向。

我认为从<a href>直接链接到我的cgi脚本可能是错误的。但我不知道如何将其链接到文本链接的ajax调用。

Answer 1

您可以在生成表时附加click事件处理程序：

 $('<a href="./test.cgi">'+ 'Details' +'</a>').appendTo('#'+this_row_id).click(function()
 {
      $.getJSON("./test.cgi", {label: item.label}, function(data) 
      { 
          //Do something with received data
      });

      return false;
 });

Answer 2

<强>更新
页面加载时间过长; @floatless用链接发布了一种更清洁的方法，没有想到这一点。

您可以将最后几行更改为类似下面的内容。我们的想法是在创建时为每个链接附加一个处理程序，它将使用相应的项标签调用loadDetail函数。在loadDetail中，这是一个简单的问题，即以标签作为参数发出ajax请求。

请注意，您无需使用./test.cgi - test.cgi即可。

...
    $('<a href="#" id="detail_' + this_row_id +'">'+ 'Details' +'</a>').appendTo('#'+this_row_id);

    $('#detail_' + this_row_id).click(loadDetail(item.label));
}


function loadDetail(label){
    $.get('test.cgi', {label: label}, function(data){
        //create your dialog to display the response data
    });
}

预加载搜索查询以从表链接并将其传递给ajax

2 个答案: