Hi David, As Jan says the problem is that this Javascript requires jQuery for it to run. Did you follow the tutorial from .NET magazine?
In the textpage.html example file is common markup that should be in the master template that all these templates inherit from and contains the reference to the jQuery library.
Jan/Warren, I did try to follow the walk through and there are some references to the jquery (towards the end of the template) in the Master template (which was copied from textpage.html), but perhaps not in the right place?
<umbraco:Macro runat="server" language="cshtml"> @{ //Select the homepage node & then find the child locations node var homeNode = Model.AncestorOrSelf("Home"); var locationsNode = homeNode.DescendantsOrSelf("Locations").First();
//For each child pages of the locations node foreach (var page in locationsNode.Children) { <option value="@page.Id">@page.Name</option> } } </umbraco:Macro>
Hello David, Yes as you described you can move that to the top of the page and that will work fine as well.
But I think you may have missed a small detail in the tutorial of the magazine.
We need to create one more content place holder inside our Master template. Place the cursor after the jQuery reference towards the end of the markup and create another content place holder called ‘scripts’.
So in the master template at the bottom of the page where the JavaScript was orginally you would have something that would look like this:
And the asp:ContentPlaceHolder with the ID of Scripts allows you to insert javascript references after the main jQuery library has loaded.
So in the estate template you would have a section like this:
<asp:Content ContentPlaceHolderId="scripts" runat="server"> <!-- Google Maps API --> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script> //Only when the DOM is ready can we load the Map in... $(document).ready(function () { //As our property address stores the value as CSV as lat,lon,zoom we can just pass it to our function loadGoogleMap loadGoogleMap( <umbraco:Item field="address" runat="server"/> ); }); </script> </asp:Content>
This will allow us to insert the Google Map JS reference and our snippet to our loadGoogleMap function passing in the longtitude and latitude to the function from the property 'address' which is our Google Map property.
Thanks for that. I guess what I'm unclear about is why some of the JS file references go in to the "scripts" container in master, but the googleapi goes outside the "scripts" container in master. Why does it need to be this.
The idea for masterpages is that you have a master or top level template that contains common HTML markup for all templates so you dont have to repeat the same markup over and over again.
So we have the estate template that inherits from the master template. In doing so we can insert only part of the HTML we need into the top level master template. So for the estate template we insert the Google Maps API JS file and along with our call to our custom function loadGoogleMap() this will inser the two files after the jQuery references in our top level master.
As the <asp:content> tag in our estate template uses ContentPlaceHolderID that matches the ID of the <asp:contentplaceholder> tag
Map no showing?
I've set the location on Estate content, but the map doesn't show?
<h3>Map</h3>
<!-- Google Maps API Map-->
<div id="estateMap"></div>
<!-- Copy me into 'PageContent' End -->
<!-- Copy me into 'scripts' Start -->
<!-- Google Maps API -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
//Only when the DOM is ready can we load the Map in...
$(document).ready(function () {
loadGoogleMap(
<umbraco:Item field="address" runat="server" /> );
});
</script>
Hi David
Have you checked the console in firebug (if you're using Firefox for browsing) to see if you get a javascript error?
/Jan
installed firebug, here is what it says:
$ is not defined
http://localhost:12755/locations/london/11-downer-road.aspx
Line 159
Hi David
Are you calling the script before or after the jquery library has been initiated? (I asume you have remembered to reference it already, right? :)).
/Jan
Hi David,
As Jan says the problem is that this Javascript requires jQuery for it to run.
Did you follow the tutorial from .NET magazine?
In the textpage.html example file is common markup that should be in the master template that all these templates inherit from and contains the reference to the jQuery library.
I hope this helps.
Warren
Jan/Warren, I did try to follow the walk through and there are some references to the jquery (towards the end of the template) in the Master template (which was copied from textpage.html), but perhaps not in the right place?
------ My Master -----
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" 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">
<title>My Estate Agent - An Umbraco Website built for .NET Magazine</title>
<meta name="description" content="<umbraco:Item field="metaDescription" recursive="true" runat="server" />">
<meta name="keywords" content="<umbraco:Item field="metaKeywords" recursive="true" runat="server" />">
<meta name="author" content="Admin User">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/styles.css">
<!-- jQuery UI Slider CSS -->
<link rel="stylesheet" href="/css/custom-umbraco-theme/jquery-ui-1.8.16.custom.css">
<!-- Flex Slider -->
<link rel="stylesheet" href="/css/flexslider-1.4.css">
<!-- Modernizr -->
<script src="/scripts/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
<header>
<h1><a href="/"><umbraco:Item field="estateAgentName" recursive="true" runat="server" /></a></h1>
<h2<umbraco:Item field="telephoneNumber" recursive="true" runat="server" /></h2>
</header>
<div id="main" role="main" class="group">
<aside>
<nav>
<umbraco:Macro runat="server" language="cshtml">
<ul>
@{ var homeNode = Model.AncestorOrSelf("Home"); }
<li><a href="@homeNode.Url" class="@Library.If(homeNode.Id == Model.Id, "selected", "")">@homeNode.Name</a></li>
@foreach (var page in homeNode.Children.Where("Visible"))
{
<li>
<a href="@page.Url" class="@Library.If(page.Id == Model.Id, "selected", "")">@page.Name</a>
<!-- If the page has child nodes (2nd level) -->
@if (page.Children.Where("Visible").Count() > 0)
{
<ul>
@foreach (var childPage in page.Children.Where("Visible"))
{
var isSelected = false;
if (Model.Id == childPage.Id || (Model.Parent != null && Model.Parent.Id == childPage.Id)) {
isSelected = true;
}
<li><a href="@childPage.Url" class="@Library.If(isSelected, "selected", "")">@childPage.Name</a></li>
}
</ul>
}
</li>
}
</ul>
</umbraco:Macro>
</nav>
<form id="search" action="/search" method="post">
<h3>Search</h3>
<label for="location">Location</label>
<select id="location" name="location">
<option value="-1">Any</option>
<umbraco:Macro runat="server" language="cshtml">
@{
//Select the homepage node & then find the child locations node
var homeNode = Model.AncestorOrSelf("Home");
var locationsNode = homeNode.DescendantsOrSelf("Locations").First();
//For each child pages of the locations node
foreach (var page in locationsNode.Children)
{
<option value="@page.Id">@page.Name</option>
}
}
</umbraco:Macro>
</select>
<label for="price">Price</label>
<div id="priceSlider" class="slider"></div>
<input type="text" placeholder="£100,000" id="price" name="price" />
<label for="noRooms">Minimum Bedrooms</label>
<div id="roomSlider" class="slider"></div>
<input type="number" min="1" max="10" id="noRooms" name="noRooms" />
<label for="noBathrooms">Minimum Bathrooms</label>
<div id="bathroomSlider" class="slider"></div>
<input type="number" min="1" max="10" id="noBathrooms" name="noBathrooms" />
<input type="submit" value="Search" />
</form>
</aside>
<article id="pageContent">
<asp:ContentPlaceHolder Id="pageContent" runat="server">
<!-- Insert default "pageContent" markup here -->
</asp:ContentPlaceHolder>
</article>
</div>
<footer>
<p>A simple demo of <a href="http://umbraco.com/" target="_blank">Umbraco<img src="/img/umbraco-logo.png" alt="Umbraco CMS Logo"/></a> for .NET Magazine</p>
</footer>
</div><!--! end of #container -->
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/scripts/libs/jquery-1.6.2.min.js"><\/script>')</script>
<asp:ContentPlaceHolder Id="scripts" runat="server">
<!-- Insert default "scripts" markup here -->
</asp:ContentPlaceHolder>
<!-- Our JS Files -->
<script src="/scripts/libs/jquery-ui-1.8.16.custom.slider.min.js"></script>
<script src="/scripts/libs/jquery.flexslider-min-1.4.js"></script>
<script src="/scripts/site.js"></script>
<!-- Google Analytics -->
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));
</script>
</body>
</html>
</asp:Content>
Ah, I added these into the <head> of master, now shows map:
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/scripts/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="/scripts/libs/jquery-ui-1.8.16.custom.slider.min.js"></script>
<script src="/scripts/libs/jquery.flexslider-min-1.4.js"></script>
<script src="/scripts/site.js"></script>
Hello David,
Yes as you described you can move that to the top of the page and that will work fine as well.
But I think you may have missed a small detail in the tutorial of the magazine.
We need to create one more content place holder inside our Master template. Place the cursor after the jQuery reference towards the end of the markup and create another content place holder called ‘scripts’.
So in the master template at the bottom of the page where the JavaScript was orginally you would have something that would look like this:
And the asp:ContentPlaceHolder with the ID of Scripts allows you to insert javascript references after the main jQuery library has loaded.
So in the estate template you would have a section like this:
This will allow us to insert the Google Map JS reference and our snippet to our loadGoogleMap function passing in the longtitude and latitude to the function from the property 'address' which is our Google Map property.
I hope this make sense and is alot clearer.
Warren :)
Thanks for that. I guess what I'm unclear about is why some of the JS file references go in to the "scripts" container in master, but the googleapi goes outside the "scripts" container in master. Why does it need to be this.
Hi David,
A V4 template uses ASP.NET Masterpages - http://www.asp.net/web-forms/tutorials/master-pages
The idea for masterpages is that you have a master or top level template that contains common HTML markup for all templates so you dont have to repeat the same markup over and over again.
So we have the estate template that inherits from the master template. In doing so we can insert only part of the HTML we need into the top level master template.
So for the estate template we insert the Google Maps API JS file and along with our call to our custom function loadGoogleMap() this will inser the two files after the jQuery references in our top level master.
As the <asp:content> tag in our estate template uses ContentPlaceHolderID that matches the ID of the <asp:contentplaceholder> tag
Hoperfully this makes more sens to you now.
Warren
is working on a reply...