61152

How to use javascript in Silverstripe CMS?

Question:

I'm using SilverStripe 3.0 CMS, and I need to include a Google Map into the CMS.

I'm following <a href="http://www.silverstripe.org/general-questions/show/14596#post294608" rel="nofollow">this steps</a>, and besides it's a little bit old, the <a href="http://doc.silverstripe.org/framework/en/topics/javascript" rel="nofollow">official documentation</a> uses the same methods in the current version of SilverStripe (At least it seems to be the current version documentation).

The issue is in this part of the code:

Behaviour.register({ "#Form_EditForm" : { initialize : function() { this.observeMethod("PageLoaded", this.adminPageHandler); this.adminPageHandler(); }, adminPageHandler : function() { initialize(); } } });

First of all, Behaviour was not defined. I needed to include manually the behaviour.js file that comes within the framework. But now, I get a Type Error:

this.observeMethod is not a function

Can someone give me a hint of what can I do in order to call a javascript function when a page editor is opened in the SilverStripe CMS?

Answer1:

the 'Behaviour.register' call you mention is definitly deprecated and no longer available in the core code, so the docs need an update here.

unfortunately, i couldn't find a documented way to replace this behaviour, but for now the following should work for you, based on the approach in the forum post you mentioned first hand:

find the 'initGoogleMaps.js' script added here:

function getCMSFields() { Requirements::javascript('mysite/javascript/initGoogleMaps.js'); ...

inside this script, remove the Behaviour.register... block, and move the initialize function <em>outside</em> document.ready (or simply remove the document.ready part), so initialize is globally available (you might consider renaming it).

then, add the following inside getCMSFields:

$fields->addFieldToTab('Root.Content', new LiteralField('js', '<script>initialize();</script>'));

this will ensure the initialize function is called every time a page's 'edit view' is rendered inside the cms.

hth

Answer2:

As mentioned by ben,

LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')

is more reliable than 'include-it when needed'. Why? Because Silverstripe uses Ajax, it is better to load any javascript or css on the first load, so that they are ready when you go to different model admin areas within the CMS in ajax-powered environment. Not loading at the start causes inconsistency and your js, css files will not be loaded when you don't hard-load that admin area.

From documentation: <a href="http://doc.silverstripe.org/framework/en/reference/requirements" rel="nofollow">http://doc.silverstripe.org/framework/en/reference/requirements</a> and <a href="http://api.silverstripe.org/3.0/class-LeftAndMain.html" rel="nofollow">http://api.silverstripe.org/3.0/class-LeftAndMain.html</a>

<blockquote>

The whole "include it when you need it" thing shows some weaknesses in areas such as the CMS, where Ajax is used to load in large pieces of the application, which potentially require more CSS and JavaScript to be included. <strong>At this stage, the only workaround is to ensure that everything you might need is included on the first page-load.</strong>

One idea is to mention the CSS and JavaScript which should be included in the header of the Ajax response, so that the client can load up those scripts and stylesheets upon completion of the Ajax request. This could be coded quite cleanly, but for best results we'd want to extend prototype.js with our own changes to their Ajax system, so that every script had consistent support for this.

</blockquote>

By the way, the ideal place for this line is _config.php in your custom module or in mysite, depending on your needs.

Answer3:

LeftAndMain::require_javascript('mysite/javascript/initGoogleMaps.js')

would work much better

Recommend

  • Simple Yahoo Weather Api Not Working
  • PyTorch: Relation between Dynamic Computational Graphs - Padding - DataLoader
  • Using Google Api: Speech To Text on PC Version
  • Chef recipe for RoR Heroku
  • unmanaged win32 dll not loading in .net MVC app on IIS 8.5, Win Server 2012 R2, Azure virtual machin
  • Parse an XML fragment stored in a string into nodes in XSLT with SAXON for Java
  • mysql select inside limit
  • Check all values in string[] for length?
  • Fail:(TESTMODE) Transactions of this market type cannot be processed on this system
  • SAXReader not re-ecape characters
  • Create DicomImage from scratch using Dcmtk
  • Custom Tabgroup Appcelerator
  • iOS: Detect app start via notification press
  • Use of this Javascript
  • Checking free space on FTP server
  • C++ Partial template specialization - design simplification
  • How to do unit test for HttpContext.Current.Server.MapPath
  • Initializer list vs. initialization method
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • Do create extension work in single-user mode in postgres?
  • How to get next/previous record number?
  • R: gsub and capture
  • AT Commands to Send SMS not working in Windows 8.1
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • retrieve vertices with no linked edge in arangodb
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Python: how to group similar lists together in a list of lists?
  • Free memory of cv::Mat loaded using FileStorage API
  • Understanding cpu registers
  • Memory offsets in inline assembly
  • Turn off referential integrity in Derby? is it possible?
  • How does Linux kernel interrupt the application?
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Add sale price programmatically to product variations
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?