點擊鏈接標籤並顯示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'); 
    }); 
});