Question

Here I have created a website in c#.net and I want the page which will be open after clicking the gridview field in the fancybox.
But I am facing one problem that it opens the page in fancybox for the first row only I don’t know why..?

Here is my code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css"
    media="screen" />
<script type="text/javascript" language="javascript">
    $(document).ready(function() {

            $('#deal_VCU').fancybox({
                'width': '85%',
                'height': '85%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe',
                'titleShow': false
            });
        });
 </script>

<asp:GridView ID="GrdDeals" runat="server" AllowPaging="True" AllowSorting="True"
    AutoGenerateColumns="False" CellPadding="1" DataKeyNames="OFID" DataSourceID="SqlDataSource3"
    ForeColor="#333333" GridLines="None" PageSize="100" 
    onrowdatabound="GrdDeals_RowDataBound" onrowcommand="GrdDeals_RowCommand">
    <Columns>
        <asp:BoundField DataField="OFID" HeaderText="Offer ID" SortExpression="OFID" />
        <asp:BoundField DataField="Text_Message" HeaderText="Offer Text" SortExpression="Text_Message" />

        <asp:TemplateField HeaderText="Deal for VCU" SortExpression="Counter1">
            <ItemTemplate>
                <a id="deal_VCU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                    <%#Eval("Counter2")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Deal for SCSU" SortExpression="Counter2">
            <ItemTemplate>
                <a id="deal_SCSU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                    <%#Eval("Counter2")%></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Deal for Trinity" SortExpression="Counter3">
            <ItemTemplate>
                <a id="deal_Trinity" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter3">
                    <%#Eval("Counter3")%></a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <RowStyle BackColor="#EFF3FB" Height="4" />
    <EditRowStyle BackColor="#2461BF" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Right" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

Here I am facing one problem that the fancybox is getting open for the first row only.

Answer 1

This is because since there are multiple hyperlink controls are there with the same ID. Please assign a css class (say deal_VCUCSS )

 <a id="deal_VCU" class="deal_VCUCSS" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2">
                                <%#Eval("Counter2")%></a>

and use the below

 $('.deal_VCUCSS').fancybox({