点击链接标签并显示ID中的信息时，加载Jquery弹出框？

Question

我已经在链接标记的datalist中列出了数据库中的一些东西。在头版看起来像这样。

ID = 21的东西点击我

   <HeaderTemplate> 
        <p class="overskrift_bestil">Ekstra varer</p> 
       </HeaderTemplate> 

       <ItemTemplate> 

         <td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td> 
         <td><p><%#Eval("deli_navn") %></p></td> 
        <td> 
         <a href="#contactFormContainer" id="showdialog2">Show the Dialog</a> 


        </td> 

       </ItemTemplate> 
      </asp:DataList> 

当我点击点击链接我我想要的弹出框，以显示对ID = 21的产品的所有信息。我知道我点击html链接时必须加载一些查询字符串，但我被卡住了。这是我现在有：

$（文件）。就绪（函数（）{

  $('#contactFormContainer').hide(); 

      $('#showdialog2').click(function() { 
       $("#contactFormContainer").load("bekraeft.aspx?deli_id=deli_id"); 
       $("#contactFormContainer").fadeToggle('slow'); 
      }); 
     }); 

    </script> 

希望有人能够帮助我

/蒂娜

Answer 1

你需要做的。Ajax调用

<script> 

$(document).ready(function() { 
     $('#contactFormContainer').hide(); 
     $('#showdialog2').click(function() { 
      var deli_id = $('#deli_id').text(); //get deli_id from some container 
      $.ajax({ 
       url: "bekraeft.aspx?deli_id=" + deli_id, //send id to aspx page 
       cache: false 
      }) 
      .done(function(html) { //retrive html from aspx page once ajax call is completed 
       $("#contactFormContainer").html(html); //load html into container 
       $("#contactFormContainer").fadeIn('slow'); //fade container in 
      }); 

     }); 
    }); 
</script> 

Answer 2

您需要更改痘痘位代码：

• 变化showDialog2 ID为一类（所以你要重视点击收听到与该类别的所有元素）
• 添加数据属性的链接，存储deli_id

ASPX：

<HeaderTemplate> 
    <p class="overskrift_bestil">Ekstra varer</p> 
</HeaderTemplate> 
<ItemTemplate> 
    <td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td> 
    <td><p><%#Eval("deli_navn") %></p></td> 
    <td> 
     <a href="#" class="showdialog2" data-id='<%#Eval("deli_navn") %>'>Show the Dialog</a> 
    </td> 
</ItemTemplate> 

JS：

$(function() { 
    var clickedLink = $(this); 
    $('#contactFormContainer').hide(); 
    $('.showdialog2').click(function() { 
     $("#contactFormContainer").load("bekraeft.aspx?deli_id=" + clickedLink.attr("data-id")); 
     $("#contactFormContainer").fadeToggle('slow'); 
    }); 
});