Home/ Questions/Q 153831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T09:52:15+00:00

I have a Page that is associated with a master page. In the master

  • 0

I have a Page that is associated with a master page. In the master page, I put the css links in the head section and I put the jquery script tag and the script that contains the function to toggle the grid, but when it is not working. Looks like it is not even calling showhide when I click on an item.

Here is a snippet of the master page:

<head runat='server'> <title></title> <link href='MainLayout.css' rel='stylesheet' type='text/css' /> <link href='ajaxtab.css' rel='stylesheet' type='text/css' /> <link href='dialog.css' rel='stylesheet' type='text/css' /> <link href='grid.css' rel='stylesheet' type='text/css' /> <link href='pager.css' rel='stylesheet' type='text/css' /> <link href='subgrid.css' rel='stylesheet' type='text/css' /> <script src='jquery-1.3.2.min.js' type='text/javascript'></script>  <script type='text/javascript'>       //master: id of div element that contains the information about master data       //details: id of div element wrapping the details grid       function showhide(master, detail) {           //First child of master div is the image           var src = $(master).children()[0].src;           //Switch image from (+) to (-) or vice versa.           if (src.endsWith('plus.png'))               src = src.replace('plus.png', 'minus.png');           else               src = src.replace('minus.png', 'plus.png');            //Set new image           $(master).children()[0].src = src;            //Toggle expand/collapse                              $(detail).slideToggle('normal');       } </script> <asp:ContentPlaceHolder ID='head' runat='server'>  </asp:ContentPlaceHolder> </head>

Here is the div that contains the showhide function in the onclick event in the aspx page:

<div class='searchgroup'  id='<%#String.Format('master{0}',Container.DataItemIndex)%>' onclick='showhide(<%#String.Format('\'#master{0}\'',Container.DataItemIndex)%> , <%#String.Format('\'#detail{0}\'',Container.DataItemIndex) %>)'> <asp:Image ID='imgCollapsible'             CssClass='first'             ImageUrl='plus.png'             Style='margin-right: 5px;'            runat='server' />  <span class='searchheader'><%#Eval('Business')%></span> </div>

Here is html it generates for the master and detail div:

//master div <div class='searchgroup'         id='master0'                                                           onclick='showhide('#master0','#detail0')'>  <img id='ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible'       class='first' src='plus.png'       style='border-width:0px;margin-right: 5px;' />      <span class='searchheader'>ABC</span> </div>  //details div <div id='detail0' class='searchdetail'> <div> <table class='searchgrid'        id='ctl00_ContentPanel_gvMaster_ctl02_gvDtails'> <tr> <th>Status</th> <tr class='searchrow'> <td>2</td> </tr> </table> </div> </div>

I could not get the JQuery working and I was running out of time, so for now I decided to use the collapsible panel externder from the ajax control toolkit. When I get time, I will investigate the JQuery Issue, Thanks for all your suggestions so far. If anyone has any more, please let me know.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Your javascript is throwing an error at src.endsWith(‘plus.png’) because there is no built in endsWith function in js. replace that with src.substr(-8) == ‘plus.png’ instead and it works:

    <script type='text/javascript'>       //master: id of div element that contains the information about master data       //details: id of div element wrapping the details grid       function showhide(master, detail) {           //First child of master div is the image           var src = $(master).children()[0].src;           //Switch image from (+) to (-) or vice versa.           if (src.substr(-8) == 'plus.png')               src = src.replace('plus.png', 'minus.png');           else               src = src.replace('minus.png', 'plus.png');            //Set new image           $(master).children()[0].src = src;            //Toggle expand/collapse                              $(detail).slideToggle('normal');       } </script>

    EDIT – Working example:

    MasterPage.master

    <%@ Master Language='C#' AutoEventWireup='true' %>  <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>  <html xmlns='http://www.w3.org/1999/xhtml'> <head runat='server'>     <title>Untitled Page</title>     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>     <script type='text/javascript'>           //master: id of div element that contains the information about master data           //details: id of div element wrapping the details grid           function showhide(master, detail) {               //First child of master div is the image               var src = $(master).children()[0].src;               //Switch image from (+) to (-) or vice versa.               if (src.substr(-8) == 'plus.png')                   src = src.replace('plus.png', 'minus.png');               else                   src = src.replace('minus.png', 'plus.png');                //Set new image               $(master).children()[0].src = src;                //Toggle expand/collapse                                  $(detail).slideToggle('normal');           }     </script>      <asp:ContentPlaceHolder id='head' runat='server'>     </asp:ContentPlaceHolder> </head> <body>     <form id='form1' runat='server'>     <div>         <asp:ContentPlaceHolder id='ContentPlaceHolder1' runat='server'>          </asp:ContentPlaceHolder>     </div>     </form> </body> </html>

    Default2.aspx

    <%@ Page Language='C#' MasterPageFile='~/MasterPage.master' AutoEventWireup='true' Title='Untitled Page' %>  <asp:Content ID='Content1' ContentPlaceHolderID='head' Runat='Server'> </asp:Content> <asp:Content ID='Content2' ContentPlaceHolderID='ContentPlaceHolder1' Runat='Server'>     <div class='searchgroup' id='master0' onclick='showhide('#master0','#detail0')'>      <img id='ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible' class='first' src='plus.png' style='border-width:0px;margin-right: 5px;' />      <span class='searchheader'>ABC</span>     </div>      <div id='detail0' class='searchdetail'>         <div>             <table class='searchgrid'                id='ctl00_ContentPanel_gvMaster_ctl02_gvDtails'>                 <tr>                     <th>Status</th>                 </tr>                 <tr class='searchrow'>                     <td>2</td>                 </tr>             </table>         </div>     </div> </asp:Content>
    • 0