Jump to:

5542 Posts in 1739 Topics by 1225 members

Customising the CMS

SilverStripe Forums » Customising the CMS » custom javascript function call only fire on page reload

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 4644 Views
  • Ben_W
    Avatar
    Community Member
    80 Posts

    custom javascript function call only fire on page reload Link to this post

    Hi,

    I have a EventPage class extends the Page. when user creates or edit the event page, there is a google map on the right panel, user may fill in the Google Map Location, then click button 'Locate On Google Map' to set a marker on the google map, then they may adjust this marker's position accordingly, by doing so it will update the corresponding form field, 'Google Map Latitude', 'Google Map Longitude', which eventually will be store in the database. (please see attached image)

    function getCMSFields() {

          $fields = parent::getCMSFields();
          Requirements::javascript("http://maps.google.com/maps?file=api&v=2&key=".GOOGLE_MAP_API_KEY);
          Requirements::javascript("mysite/javascript/google_map.js");
          
          if($this->GoogleMapLatitude != '' && $this->GoogleMapLongitude != ''){
             $tmp_zoom = '15';
             $tmp_lat = $this->GoogleMapLatitude;
             $tmp_lng = $this->GoogleMapLongitude;
          } else {
             $tmp_zoom = '3';
             $tmp_lat = '-23.725011735951796';
             $tmp_lng = '135.3515625';
          }
          
          Requirements::customScript(<<<JS
       //alert('hello world');   
          
       if(map === undefined)
          var map = null;

       if(geocoder === undefined)
          var geocoder = null;

       if(marker === undefined)
          var marker = null;
                            
       var currentZoomLevel = $tmp_zoom ;
       var currentLatitude = $tmp_lat;
    var currentLongitude = $tmp_lng;

       initializeGoogleMap(currentZoomLevel, currentLatitude, currentLongitude);
    JS
    );
          
          $fields->addFieldToTab('Root.Content.Main', new TextField('GoogleMapLocation', 'Google Map Location', '', 255), 'Content');
          $fields->addFieldToTab('Root.Content.Main', new LiteralField ("literalfield", '<input name="locate" id="locate" type="button" value=" Locate On Google Map " onclick="locateBusiness();" /><br><div id="google_map" style="width: 500px; height: 285px"></div><noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript><br>'), 'Content');
          
          $fields->addFieldToTab('Root.Content.Main', new TextField('GoogleMapLatitude', 'Google Map Latitude', '', 255), 'Content');
          $fields->addFieldToTab('Root.Content.Main', new TextField('GoogleMapLongitude', 'Google Map Longitude', '', 255), 'Content');

    ...
    return $fields;
       }

    'mysite/javascript/google_map.js' contains two function:
    function initializeGoogleMap(zoom_level, lat, lng)
    function locateBusiness(), tied to the custom button

    if I am on a event page, and refresh the page, then the google map gets initialized and every other function works fine, however, if I click on another event page through left nav bar, the page loads without the google map. so I put in a alert('hello world'); in my custom js, this works on page reload, yet again by clicking on other event page, this alert box does not show, which is every strange, as if it does not exist.

    I need this initializeGoogleMap() fire every time user click on the event page, yet it seems that click on the nav on the left handside, the event form is loaded by ajax, would this have something to do with my custom js not loading? if I inspect the code using firebug, the script is there on the page, just not firing. I don't want to tied this function to any click event, it should fire on loading the page.

    I have spent solid two days on this, tried to add my custom js in number of ways, none of them solve the problem. the closest forum post I came cross is this: http://www.silverstripe.org/customising-the-cms/show/256687#post256687
    It seems that he has the same problem as I do, unfortunately no answer.

    Could someone please help!

    Attached Files
  • CodeGuerrilla
    Avatar
    Community Member
    105 Posts

    Re: custom javascript function call only fire on page reload Link to this post

    Have a look at jQuery especially its Event functions you can bind to an elements 'load' event and they have a 'live' function that will 'bind' to any future elements when the DOM changes

  • nicolant
    Avatar
    Community Member
    6 Posts

    Re: custom javascript function call only fire on page reload Link to this post

    I have tried to bind an action to the form's load event:

          function getCMSFields() {
          

          Requirements::customScript("
             jQuery('#Form_EditForm').bind('load', function() {
                 alert('Form reloaded');
                });
             ");
    .
    .
    .

    with no success. Which 'future elements' did you mean?

  • Hamish
    Avatar
    Community Member
    712 Posts
    4644 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.