Chapter 11

ISE1988 · October 7th, 2010, 03:41 PM

Hi,

I have been doing all the exercises building the Wrox website. I followed the directions in this "Try It Out" on page 370 and when I open the JQuery demo in the browser, I do not see any change in the background color of the MainContent div and nothing seems to happen when I click the Button. Also, I tried changing the theme, and apparently something is wrong because the theme does not change.

This is the code for the JQuery Demo:

Code:

<%@ Page Title="jQuery Demo" Language="C#" MasterPageFile="~/MasterPages/Frontend.master"
    AutoEventWireup="true" CodeFile="jQuery.aspx.cs" Inherits="Demos_jQuery" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat="Server">
    Este espacio es el main content area.
    <input id="Button1" type="button" value="button" />
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $('#MainContent').css('background-color', 'green')

            $('#Button1').click(function ()
            {
                $('#MainContent').css('background-color', 'red')
                .animate({ width: '100px', height: '800px' })
            });
        });
    </script>
</asp:Content>

And this is the code I added to the Frontend.master:

Code:

<form id="form1" runat="server" enableviewstate="True">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
        </Scripts>
    </asp:ScriptManager>
    <div id="PageWrapper">

I compared very carefully with the final code you provide in the Chapter 11 Resources.

Thank you.

Imar · October 8th, 2010, 03:28 AM

Hi there,

It works fine for me when I copy and paste your code in my sample application, so it must be caused by something you're not showing here. Two things I can think off:

1. jquery-1.4.1.min.js is not located in the Scripts folder.

2. Your Master Page may be different from mine. Maybe you used different capitalization on MainContent? E.g. maybe you have Maincontent or an entirely different name? If you can't figure it out, can you post the full code for the master page?

Cheers,

Imar

ISE1988 · October 10th, 2010, 09:14 PM

Hi again and thank you for your reply. I do have the jquery-1.4.1.min.js file in the Scripts folder, so I am including the code for the master page. I find it strange that changing theme does work for the other pages in the website, but not for the jquery demo.

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!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></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server" enableviewstate="True">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
        </Scripts>
    </asp:ScriptManager>
    <div id="PageWrapper">
        <div id="Header">
            <a href="~/" runat="server"></a>
        </div>
        <div id="MenuWrapper">
            <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
                Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
            </asp:Menu>
            <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowExpandCollapse="False">
                <LevelStyles>
                    <asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />
                </LevelStyles>
            </asp:TreeView>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        </div>
        <div id="Main Content">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server">
            </asp:SiteMapPath>
            <br />
            <br />
            <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="Sidebar">
            Select a Theme
            <br />
            <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
                <asp:ListItem>Monochrome</asp:ListItem>
                <asp:ListItem>DarkGrey</asp:ListItem>
            </asp:DropDownList>
            <br />
            <br />
            <br />
            <Wrox:Banner ID="Banner1" runat="server" DisplayDirection="Vertical" />
        </div>
        <div id="Footer">
            Footer Goes Here</div>
    </div>
    </form>
</body>
</html>

Thank you, again.

Imar · October 11th, 2010, 07:33 AM

Quote:

find it strange that changing theme does work for the other pages in the website, but not for the jquery demo.

Right. I thought this was about the jQuery code not working. The fact that the theme switcher doesn't work is most likely caused by the fact your page doesn't inherit BasePage. Check the Code Behind and see if the page inherits BasePage instead of System.Web.UI.Page.

Quote:

Maybe you used different capitalization on MainContent? E.g. maybe you have Maincontent or an entirely different name?

<div id="Main Content">

See that space between Main and Content? That's why the jQuery doesn't work....

Imar

ISE1988 · October 11th, 2010, 03:12 PM

You are sooo right! ... and I am so embarrassed. Thank you very much!