Jump to:

23376 Posts in 18290 Topics by 2867 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, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 2479 Views
  • becca
    Avatar
    Community Member
    5 Posts

    [solved] JavaScript problems :: Google Maps and Form validation and submit Link to this post

    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>

  • becca
    Avatar
    Community Member
    5 Posts

    Re: [solved] JavaScript problems :: Google Maps and Form validation and submit Link to this post

    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.

    2479 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.