如何使用JQuery模態窗口

我想請點擊此鏈接中的GridView檢索在同一行的TR數據：Link to Example 如何使用JQuery模態窗口

，我有以下的GridView在SP可視Web部件：

<asp:GridView ID="BookingResults" runat="server" EnableModelValidation="True" AutoGenerateColumns="False" AllowSorting="true" ForeColor="Black"> 
    <Columns> 
     <asp:TemplateField> 
      <HeaderTemplate> 
       <asp:Label runat="server" ID="commHdr" Text="Show Guideline" /> 
      </HeaderTemplate> 
      <ItemTemplate> 
       <asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" PostBackUrl="javascript:void(0);" OnClientClick="javascript:test();return false;"></asp:LinkButton> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-VerticalAlign="Top" /> 
     <asp:BoundField DataField="Topic" HeaderText="Topic" ItemStyle-VerticalAlign="Top" /> 
     <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-VerticalAlign="Top" /> 
     <asp:BoundField DataField="Specialty" HeaderText="Specialty" ItemStyle-VerticalAlign="Top" /> 
     <asp:TemplateField HeaderText="Provider Name"> 
      <ItemTemplate> 
        <div style="width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> 
         <asp:Label ID="lblEllipsis" runat="server" Text='<%#Eval("Provider") %>' ToolTip='<%#Eval("Provider") %>'></asp:Label> 
        </div> 
       </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Summary" ItemStyle-VerticalAlign="Top"> 
      <EditItemTemplate> 
       <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Summary") %>' CssClass="sumM"></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Label ID="Label1" runat="server" Text='<%# Bind("Summary") %>'></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:BoundField DataField="Guideline" HeaderText="Guideline" ItemStyle-CssClass="gLine" HeaderStyle-CssClass="gLine" /> 
    </Columns> 
</asp:GridView>

生成的代碼之後，它看起來像這樣的網頁：

enter image description here

每一行都有自己的數據和examp生成的HTML文件：

<tr> 
    <td> 
     <a onclick="javascript:test();return false;" id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_btnShow3" class="btnSearch3" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl33$g_36ed1b14_1f08_43fb_8099_eb3423a33ed9$BookingResults$ctl05$btnShow3&quot;, &quot;&quot;, true, &quot;&quot;, &quot;javascript:void(0);&quot;, false, true))">VIEW</a> 
    </td> 
    <td valign="top"> 
     After Hours 
    </td> 
    <td valign="top"> 
     Pediatrics; 
    </td> 
    <td> 
     <div style="width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> 
      <span id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_lblEllipsis" title="All Providers;"> 
       All Providers; 
      </span> 
     </div> 
    </td> 
    <td class="sumM" valign="top"> 
     <span id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_Label1"> 
      <html> 
       <p> 
        <span style="FONT-SIZE&#58;11pt;">Callback Number 
         <span id="ms-rterangepaste-end"></span> 
        </span> 
       </p> 
      </html> 
     </span> 
    </td> 
    <td class="gLine" valign="top"> <!-- HIDDEN FROM USER BUT IN SOURCE CODE --> 
     <html> 
      <p> 
       THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW. 
      </p> 
     </html> 
    </td> 
</tr>

CSS來從視圖中隱藏列，但仍從後臺代碼執行：

.gLine { 
    display: none; 
}

使用以下顯示模式窗口：

<div id="dialog" style="display: none"> 
    <b>Id:</b> <span id="infoShow"></span> 
</div>

我試圖在Guideline標題下顯示相應的鏈接數據，通過JQuery中的以下方法點擊鏈接：

function test() { 
    alert("test"); 
    $("#infoShow").html($(".gLine", $(this).closest("tr")).html()); 
    $("#dialog").dialog({ 
     title: "View Guideline", 
     buttons: { 
      Ok: function() { 
       $(this).dialog('close'); 
      } 
     }, 
     modal: true 
    }); 
}

在上面的例子中，當我點擊查看鏈接，模態窗口應該顯示：

<HTML> 
    <p> 
    THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW. 
    </p> 
</HTML>

，但它顯示的是什麼。

如何修改我的jQuery代碼，顯示TD中的文本與類gLine

我想下面的很好，但我不斷收到undefined第二警報：

function test() { 
    alert("test"); 
    $("#infoShow").html($(".gLine", $(this).closest("tr")).html()); 

    var tableData = $(this).children("td").map(function() { 
     return $(this).text(); 
    }).get(); 
    alert(tableData[5]); 
    $("#dialog").dialog({ 
     title: "View Guideline", 
     buttons: { 
      Ok: function() { 
       $(this).dialog('close'); 
      } 
     }, 
     modal: true 
    }); 
}

來源

2014-09-23 SearchForKnowledge

你不應該有''標籤內的主''該標籤包裝的一切任何地方。 – Mottie 2014-09-23 20:57:26

他們都輸入數據，所以我會解碼它，然後顯示在顯示窗口。 – SearchForKnowledge 2014-09-23 20:57:55

這不是有效的HTML，瀏覽器和/或jQuery可能無法正確解釋它。 – Mottie 2014-09-23 20:59:39

這裏你如何使你的演示工作：

首先，從你的標記中刪除<html>標籤。

其次從你的鏈接

刪除 onclick="javascript:test();return false;"

最後，你的代碼改成這樣（demo）：

$(function() { 

    $('table a').click(function() { 

     $("#infoShow").html($(".gLine", $(this).closest("tr")).html()); 
     $("#dialog").dialog({ 
      title: "View Guideline", 
      buttons: { 
       Ok: function() { 
        $(this).dialog('close'); 
       } 
      }, 
      modal: true 
     }); 
    }); 

});

請注意，當你使用jQuery UI，包括jQuery的相應版本。

編輯：之所以在這個問題不能正常工作的代碼是因爲onclick呼籲test()沒有任何參考的元素。如果是這樣的：

onclick="javascript:test(this);return false;"

然後測試功能可以這樣做：

function test(element) { 
    // ... 
    $("#infoShow").html($(".gLine", $(element).closest("tr")).html()); 
    // ... 
}

來源

2014-09-23 21:13:27 Mottie

我可以使用以後的查詢嗎？它會工作嗎？ – SearchForKnowledge 2014-09-23 21:54:00

後來jQuery？試一下，看看它是否有效;它在該演示中起作用。 – Mottie 2014-09-23 21:55:31

我的意思是代碼中有元素？ – SearchForKnowledge 2014-09-23 22:05:03

如何使用JQuery模態窗口

回答

相關問題