Hi all-
I'm fairly new to SilverStripe (using 2.3.6), and I've been implementing a new site and running into all kinds of problems related to JavaScript. I've packed all 3 issues in this one topic, as I wonder if they are all related.
I have a contact page that contains a Google map and a form. The Google map does not render, and the form does not validate or send an email. Note that I have tried MANY things, including (but not limited to) setting jQuery.noConflict(); creating a custom JS validator; including my own jquery Requirement; etc. (This page was originally written in HTML/JS with a perl script to validate/submit the form, and both the map and the form worked well.)
Issue I'm seeing wrt Google maps:
- As shown in the Page.ss code below, I've issued alerts in the JS code before and after the call to Google's LatLng class. The class is not found, so the JS dies and my map never renders.
Issue wrt form:
- When I omit the required form fields and click the submit button, the page redirects back to itself, but no error message is shown. I can't figure out how to set the sessionMessage myself (as I did when the page submits successfully).
- When the required form fields are filled out, the page redirects back to itself with the Thank-you text replacing the form (see if-then control in ContactForm.ss), but no email is sent (yes, email did previously work when written in perl)
All relevant code below.
Cheers!
-becca
First, the PHP code:
<?php
class ContactPage extends Page {
static $db = array(
);
static $has_one = array(
);
}
class ContactPage_Controller extends Page_Controller {
public function init() {
parent::init();
// Contact page styles
Requirements::themedCSS("contact");
}
function RequestConsultationForm() {
return new ContactForm($this, "RequestConsultationForm");
}
function doRequestConsultation($data, $form) {
// replaced email address w/ 'foo@bar.com'
$email = new Email('foo@bar.com', 'foo@bar.com', 'Request a Consultation', 'Test message');
$email->send();
$form->sessionMessage('We have received your request and a member of our staff will get in touch as soon as possible.', 'good');
Director::redirectBack();
}
}
class ContactForm extends Form {
function __construct($controller, $name) {
$fields = new FieldSet(
new TextField('Name'),
new EmailField('Email'),
new TextField('Telephone'),
new TextareaField('Reason', 'Reason for consultation', 5, 18)
);
$actions = new FieldSet(
new ImageFormAction('doRequestConsultation', 'Submit', 'themes/foo/images/contact/contactsubmit.jpg')
);
$validator = new RequiredFields('Name', 'Email', 'Telephone', 'Reason');
parent::__construct($controller, $name, $fields, $actions, $validator);
}
function forTemplate() {
return $this->renderWith(array($this->class, 'Form'));
}
}
?>
And the templates:
Page.ss:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<% base_tag %>
$MetaTags
<link rel="stylesheet" type="text/css" href="hirsch/css/layout.css" />
<link rel="stylesheet" type="text/css" href="hirsch/css/typography.css" />
<link rel="stylesheet" type="text/css" href="hirsch/css/form.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function gMapInit() {
alert('foo1'); // this alert shows up
var latlng = new google.maps.LatLng(42.390787,-71.155239);
alert('foo2'); // this alert does NOT show up
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("Map_canvas"), myOptions);
}
</script>
</head>
<body onload="gMapInit()">
// ... and so on
Layout/ContactPage.ss:
<div id="Content" class="typography">
<div id="Contact_lcol">
<div id="Map_canvas" class="gmap"></div>
</div>
<div id="Contact_rcol">
<div class="formcontent">
$RequestConsultationForm
</div>
</div>
</div>
Includes/ContactForm.ss:
<form $FormAttributes>
<% if Message %>
<% if MessageType = good %>
<div id="Contact_thankyou">
<img src="/themes/foo/images/contact/contactthankyou.gif" alt="Thank You!" />
<p id="{$FormName}_msg" class="message $MessageType">$Message</p>
</div>
<% else %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% end_if %>
<% else %>
<fieldset>
<div id="Content_lcol">
<div id="Name" class="form_row field text">
<img src="/themes/foo/images/contact/contactname.gif" alt="Name" height="13" width="73" />
$dataFieldByName(Name)
</div>
<div class="form_row">
<img src="/themes/foo/images/contact/contactemail.gif" alt="E-mail" height="13" width="73" />
$dataFieldByName(Email)
</div>
<div class="form_row">
<img src="/themes/foo/images/contact/contacttelephone.gif" alt="Telephone" height="13" width="73" />
$dataFieldByName(Telephone)
</div>
</div>
<div id="Content_rcol">
<div id="Reason_label"><img src="/themes/foo/images/contact/contactreason.gif" alt="Reason for consultation" height="13" width="173" /></div>
<div class="form_row">
$dataFieldByName(Reason)
</div>
<% if Actions %>
<div id="submit">
<% control Actions %>$Field<% end_control %>
</div>
<% end_if %>
</div>
$dataFieldByName(SecurityID)
</fieldset>
<% end_if %>
</form>
