Why isn't this script running from the masterpage?

By : Xaisoft
Source: Stackoverflow.com
Question!

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.

By : Xaisoft


Answers

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>
By : Adam


You may check if jquery's path is correct in your page (that which uses this master page).

To be sure if its calling showhide() you can use Firebug in Firefox with a breakpoint in the function.

Also, it will give you more clues to debug and guess what is going wrong.

The code seems to be ok to me, too.

By : eKek0


" Looks like it is not even calling showhide when I click on an item." If you simplify the function with just an alert() function, does it work.

The code looks fine to me. Maybe there is some id mismatch.

By : J.W.


This video can help you solving your question :)
By: admin