无法使用JQuery在Gridview中找到动态asp：Control

Question

In an ASP.Net Application I have an aspx file inside which I have an Update Panel with a Gridview Inside it. Inside the Gridview there is a table which also contains some panels. There are some controls inside those panels.

ASPX

<asp:Gridview ID="GridView1" runat = "server"...>
 <Columns>
  <asp:TemplateField ShowHeader="False">
   <ItemTemplate>
     <table>
         <asp:Panel ID="pnlVisualAst" runat="server" Visible="false">
              <tr>
                <td style="text-indent: 50px; width: 25%">
                  <asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label>
                </td>
                <td colspan="3">
                  <asp:Button ID="btnVisAst" class="button"  runat="server" Text="View"/>
                  <asp:Image ID="popImg" ImageUrl='<%# GetImage(Eval("VA_Img"))%>' runat="server" Visible="false" />
                </td>
              </tr>
        </asp:Panel>
     </table>
   </ItemTemplate>
  </asp:TemplateField >
 </Columns>
</asp:Gridview>

Now, I am writing a JQuery function to capture the click event for the button inside the Gridview and show the image field in a pop up window.

JQuery

<script type="text/javascript">

    $(document).on('ready', function ()
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function ()
        {
            $('#<%=GridView1.ClientID%>').find($('#<%= btnVisAst.ClientID %>')).click(function ()
            {
                $('#<%=popImg.ClientID%>').dialog
                  ({
                      title: "my jquery popup",
                      width: 430,
                      height: 200,
                      modal: true,
                      button:
                          {
                              Close:
                              function ()
                              {
                                  $(this).dialog('Close');
                              }
                          }
                  });
                $(this).prop('checked', true);

            });
        });

    });

The Problem with the above code is it cannot find the the dynamic controls inside that Gridview. It shows the 'btnVisAst' and 'popImg' does not exist in the current context.

Is there any way to solve this problem? Thanks.

Answer 1

I agree with ConnorsFan. Use classes instead. If you apply a class to your visit button, say "classVisAst", then you could do something like this:

$('.classVisAst').click(function ()
        {
            var newDialog = $(this).siblings("img").dialog
              ({
                  title: "my jquery popup",
                  width: 430,
                  height: 200,
                  modal: true,
                  button:
                      {
                          Close:
                          function ()
                          {
                              $(this).dialog('Close');
                          }
                      }
              });
            $(newDialog).dialog('open');

            $(this).prop('checked', true);

        });

Then you're not worrying about IDs at all because everything is relative.

Answer 2

Instead of searching button assign a function to it.

<asp:Gridview ID="GridView1" runat = "server"...>
 <Columns>
  <asp:TemplateField ShowHeader="False">
   <ItemTemplate>
         <asp:Panel ID="pnlVisualAst" runat="server" Visible="false">
     <table><%--put table inside panel else you will have empty table element --%>
              <tr>
                <td style="text-indent: 50px; width: 25%">
                  <asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label>
                </td>
                <td colspan="3">
                  <asp:Button ID="btnVisAst" OnClientClick="return doSomething(this)" class="button"  runat="server" Text="View"/>
                  <asp:Image ID="popImg" ImageUrl='<%# GetImage(Eval("VA_Img"))%>' runat="server" Visible="false" />
                </td>
              </tr>
     </table>
        </asp:Panel>
   </ItemTemplate>
  </asp:TemplateField >
 </Columns>
</asp:Gridview>

javascript:

function doSomething(elem){//elem == input[type=submit]
    $('#'+ elem.id.replace('btnVisAst','popImg')).dialog
      ({
          title: "my jquery popup",
          width: 430,
          height: 200,
          modal: true,
          button:
              {
                  Close:
                  function ()
                  {
                      $(this).dialog('Close');
                  }
              }
      });
    $(elem).prop('checked', true);
    return false;
}