21475 Posts in 5781 Topics by 2620 members
General Questions
SilverStripe Forums » General Questions » [solved] JavaScript problems :: Google Maps and Form validation and submit
General questions about getting started with SilverStripe that don't fit in any of the categories above.
Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, swaiba, simon_w
|
Page:
1
|
Go to End | |
| Author | Topic: | 2049 Views |
-
[solved] JavaScript problems :: Google Maps and Form validation and submit
7 March 2010 at 6:52am Last edited: 10 March 2010 3:31am
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!
-beccaFirst, the PHP code:
<?phpclass 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 onLayout/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> -
Re: [solved] JavaScript problems :: Google Maps and Form validation and submit
9 March 2010 at 5:29am
So I have figured out the problem!
I had originally started using SilverStripe v. 2.3.3, and the template that came with this version included the following xml line at the top of Page.ss:
<?xml version="1.0" encoding="UTF-8"?>When I upgraded to 2.3.6, I simply copied my templates into the theme. Apparently this line is interfering with my javascript. Once I removed this line, my Google map rendered, and my form submitted.
I looked (albeit briefly) through the upgrading docs, but didn't see anything related to this problem.
| 2049 Views | ||
|
Page:
1
|
Go to Top |
