tags:

views:

677

answers:

4
Q: 

Why isn't this script running from the masterpage?

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.

A: 

" 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.

J.W.  2009-03-25 15:30:11
If I put alert("hello"); in the showhide(master,detail) function, it works fine.
Xaisoft  2009-03-25 15:40:16
Then your originals statement " Looks like it is not even calling showhide when I click on an item." is not correct.Jquery select statement may not select the right object. Check the return value of select object before proceed.
J.W.  2009-03-25 15:43:14
How can I debug the javascript, I can't put a break point. I am working in VS 2008
Xaisoft  2009-03-25 15:45:13
Hope this will help.http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspxThis is from famous "ScottGu" bible :-)
J.W.  2009-03-25 15:53:10
Debugging javascript in Visual Studio is a pain in my opinion. You can debug javascript easily if you have firefox with the firebug extension. Its definitely the way to go for javascript debugging unless your encountering an IE only bug...
Guichard  2009-03-25 16:50:16
A: 

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.

eKek0  2009-03-25 15:48:17
The code works when I tested on a page without a master page, but not if I put it in the master page. The path is correct. Can I place the script directly in the page itself, instead of the master.
Xaisoft  2009-03-25 16:43:12
+1  A: 

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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;&lt;/script&gt;
    <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>
Adam  2009-03-25 17:28:53
How come I don't get this error when I don't use a master page. As soon as I put the script in the head section of the master page, showhide function does not fire and when I set breakpoints in firebug, it says undefined for everything
Xaisoft  2009-03-25 17:31:55
Is it also possible the JQuery has an endsWidth function.
Xaisoft  2009-03-25 17:32:31
@xaisoft, not sure why you didnt get it. throws it in ff3 for me "src.endsWith is not a function" Line: 17
Adam  2009-03-25 17:33:21
I'm using firefox also, but like I said, it is working when I test it on a page that does not have a masterpage associated with it, but when I put it on a page with the masterpage, it does not work. Am I putting the scripts in the correct location in the masterpage?
Xaisoft  2009-03-25 17:35:52
@xaisoft, not sure why its not working for you. see if the example i added works. other than a missing </tr> i dont see any reason it shouldn't work.
Adam  2009-03-25 17:50:47
A: 

just a thought, if you right click view source on the browser, do you see the jquery path correctly? my experience tells me you need to resolve javascript urls on master pages (it works fine for css, but not js files)

<script src="<%= ResolveUrl("~") %>jquery-1.3.2.min.js" type="text/javascript"></script>
Ayyash  2009-06-03 06:30:43

related questions

Displaying Flash content in a C# WinForms application
How to get the value of built, encoded ViewState?
Unhandled Exception Handler in .NET 1.1
How do I connect to a database and loop over a recordset in C#?
How do I most elegantly express left join with aggregate SQL as LINQ query
Get a new object instance from a Type in C#
.NET Testing Framework Advice
Automatically update version number
What is the difference between an int and an Integer in Java/C#?
How to write to Web.Config in Medium Trust ?
WinForms ComboBox data binding gotcha
How do you sort a C# dictionary by value?
Adding Scripting functionality to .NET applications
Floating Point Number parsing: Is there a Catch All algorithm?
How do I print an HTML document from a web service?
Decoding T-SQL CAST in C#/VB.net
Anatomy of a "Memory Leak"
How do I get a distinct, ordered list of names from a DataTable using Linq
Reliable Timer in a Console Application
How do I fill a DataSet or a DataTable from a LINQ query resultset ?
What's the difference between Math.Floor() and Math.Truncate() in .NET?
How do I calculate relative time?
How do I calculate someone's age in C#?
Are there any conversion tools for porting Visual J# code to C#?
When setting a form's opacity should I use a decimal or double?