ASPX templates
Version 6.x > ASPX templates > JavaScript error on design tab for ASPX + Portal page View modes: 
User avatar
Member
Member
jeff.magill-fleishman - 7/23/2012 9:50:21 PM
   
JavaScript error on design tab for ASPX + Portal page
I am trying to create an ASPX + Portal page per the documentation. I have it set up and I can navigate to the Design tab in the CMSDesk, but when I get there, the styles for the web parts are gone and none of the menu commands work. If I look into the browsers console, I see the error:

ReferenceError: InitializePage is not defined

InitializePage();

Who-We-Are.aspx (line 1422)


And here is what it looks like:
User image

What am I missing? How do I get rid of this JS error and get Kentico working normally again? Here is my ASPX template:


<%@ Page Title="" Language="C#" MasterPageFile="~/CMSMasterPages/ASC/Skeleton.Master" AutoEventWireup="true" CodeBehind="Landing-50-50.aspx.cs"
Inherits="CMSApp.CMSTemplates.ASC.Landing_50_50" %>

<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">

<form runat="server">
<cms:CMSPortalManager ID="CMSPortalManager1" runat="server" />
<ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" ScriptMode="Release" />

<div role="main">
<div id="launch-content" class="sub" role="main">
<div id="left-column">
<div>
<cms:CMSPagePlaceholder ID="PreZone" runat="server">
<LayoutTemplate>
<cms:CMSWebPartZone ID="PreContent" runat="server" ZoneTitle="Pre-content" />
</LayoutTemplate>
</cms:CMSPagePlaceholder>
</div>
<div>
<h2><cms:CMSEditableRegion ID="HeaderText" runat="server" RegionType="TextArea" /></h2>
<cms:CMSPagePlaceholder ID="BodyZone" runat="server">
<LayoutTemplate>
<cms:CMSWebPartZone ID="BodyContent" runat="server" />
</LayoutTemplate>
</cms:CMSPagePlaceholder>
</div>
</div>
</div>

</div>
</form>
</asp:Content>


User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 7/25/2012 2:55:36 AM
   
RE:JavaScript error on design tab for ASPX + Portal page
Hello,


the <form> tag should be only on the master page (there can be only one <form> on a page), and not on the template. Please see the example in ~/CMSTemplates/CorporateSite/HomeMixed.aspx and Root.master. Also please move the manager controls to the master page. Does it help to avoid the error? Unless it helps. please paste also your master page code. Thank you.


Best regards,
Helena Grulichova

User avatar
Member
Member
jeff.magill-fleishman - 7/25/2012 12:47:24 PM
   
RE:JavaScript error on design tab for ASPX + Portal page
Unfortunately, no. That did not appear to help.

Here is my master, Skeleton.master (with the form and managers moved over)
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Skeleton.master.cs" Inherits="CMSApp.CMSMasterPages.ASC.Skeleton" %>

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title id="Title1" runat="server">My Site</title>
<asp:literal runat="server" id="ltlTags" enableviewstate="false" />
<link rel="stylesheet" href="/_css/style.css">
<script src="/_js/libs/modernizr-2.5.3.min.js"></script>
<script src="/_js/libs/raphael-2.1.0.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/kzj2lya.js"></script>
<script type="text/javascript"> try { Typekit.load(); } catch (e) { }</script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<form runat="server">
<cms:CMSPortalManager ID="CMSPortalManager1" runat="server" />
<ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" ScriptMode="Release" />

<asp:ContentPlaceHolder ID="BodyContent" runat="server" />

<asc:MainNavigation runat="server" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));

</script>

<asp:ContentPlaceHolder ID="BottomContent" runat="server" />
</body>
</html>


Skeleton.master.cs
using System;
using CMS.UIControls;

namespace CMSApp.CMSMasterPages.ASC
{
public partial class Skeleton : TemplateMasterPage
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);

this.ltlTags.Text = this.HeaderTags;
}
}
}


And my template, Landing-50-50.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/CMSMasterPages/ASC/Skeleton.Master" AutoEventWireup="true" CodeBehind="Landing-50-50.aspx.cs"
Inherits="CMSApp.CMSTemplates.ASC.Landing_50_50" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">


<div role="main">

<div id="launch-content" class="sub" role="main">
<div id="left-column">
<div>
<cms:CMSPagePlaceholder ID="PreZone" runat="server">
<LayoutTemplate>
<cms:CMSWebPartZone ID="PreContent" runat="server" ZoneTitle="Pre-content" />
</LayoutTemplate>
</cms:CMSPagePlaceholder>
</div>
<div>
<h2><cms:CMSEditableRegion ID="HeaderText" runat="server" RegionType="TextArea" /></h2>
<cms:CMSPagePlaceholder ID="BodyZone" runat="server">
<LayoutTemplate>
<cms:CMSWebPartZone ID="BodyContent" runat="server" />
</LayoutTemplate>
</cms:CMSPagePlaceholder>
</div>
</div>
<div id="right-column">

<cms:CMSPagePlaceholder ID="SideZone" runat="server">
<LayoutTemplate>
<cms:CMSWebPartZone ID="SideContent" runat="server" />
</LayoutTemplate>
</cms:CMSPagePlaceholder>


<cms:CMSRepeater ID="SideNavRepeater" runat="server" Path="./%" SelectOnlyPublished="false" TransformationName="CMS.MenuItem.PopUpPromo">
<HeaderTemplate>
<div class="ourbeliefs" style="padding:1em;border:1px solid #fcc">
</HeaderTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</cms:CMSRepeater>

</div>
</div>

</div>
</form>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="BottomContent" runat="server">
</asp:Content>


And Landing-50-50.aspx.cs is empty.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 7/28/2012 3:42:14 AM
   
RE:JavaScript error on design tab for ASPX + Portal page
Hello,


I have tested these templates without the custom JavaScripts and 3rd party controls and it works fine with no js error. It seems that the custom components throw it. Can you test it in the same way?


Best regards,
Helena Grulichova

User avatar
Member
Member
jeff.magill-fleishman - 7/30/2012 3:13:42 PM
   
RE:JavaScript error on design tab for ASPX + Portal page
Hi Helena. I figured this out. My <head> tag did not have a runat="server" in it. I added it in and the styles were added again.

I went through the documentation a few times and it never stated this was a requirement. If that could be added in the next round, it might help people like me that are trying to build their masters and templates from scratch.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 7/31/2012 3:26:59 AM
   
RE:JavaScript error on design tab for ASPX + Portal page
Hi,


In fact, I added this property as well to make your templates work (as the solution stated in the error message). It is a general ASP.NET issue which does not relate to Kentico, for example: http://stackoverflow.com/questions/2783545/using-themed-css-files-requires-a-header-control-on-the-page-e-g-head-runat. We have this property in our sample code: Using the master pages.


Best regards,
Helena Grulichova