This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

Javascript popup window with user-editable content

Page 11
(current)
2
3
Next 10 entries

20 Posts 19996 Views

ewilliams

Community Member, 12 Posts

9 February 2010 at 8:23am

Hello! I want to make an onclick popup window for our homepage, with this general idea (a la javascript):

function openpop() { 
   OpenWindow=window.open("", "newwin", "height=250, width=250"); 
   OpenWindow.document.write("<html><head><title>Meet Our Staff</title></head>"); 
   OpenWindow.document.write("<BODY>Content here.</BODY></html>");
   OpenWindow.document.close();
   self.name="main";
 } 

<a href="#" onclick="openpop();">Meet our staff</a>

We want the popup content to be user-editable -- thus it somehow needs to be on the CMS side of things. The client wants to change this popup window's content frequently.

Any way to do this? I sort of know what I'm doing in Javascript but I'm a newbie at SilverStripe.

Thanks in advance!

MateuszU

Community Member, 89 Posts

9 February 2010 at 8:57am

Hmm the easiest way in this case would be to add this js code directly to the template, and then put $PopupContent variable (you can name it however you like) into it:

function openpop() { 
OpenWindow=window.open("", "newwin", "height=250, width=250"); 
OpenWindow.document.write("<html><head><title>Meet Our Staff</title></head>"); 
OpenWindow.document.write("<BODY>$PopupContent</BODY></html>"); 
OpenWindow.document.close(); 
self.name="main"; 
}

<a href="#" onclick="openpop();">Meet our staff</a>

Then you define new page type and add a field 'PopupContent'=>'HTMLText' to its database model. Run dev/build and then you should be able to create new page of that type, put some html into the 'PopupContent' box, and get it to appear in the proper place. Have a look through tutorials, look for $db variable and getCMSFields function.

ewilliams

Community Member, 12 Posts

9 February 2010 at 9:05am

Edited: 09/02/2010 9:10am

That sounds reasonable, and I know how to do the steps involved! Woo!

However, in my trial and error phase, the CMS changed <a href="#" onclick="openpop();"> to <a href="#"> -- is there a better way to link?

Or did it do that just because it couldn't find the function openpop (since I was trying to put the javascript into the text field), and when I do it right it will leave my link alone?

MateuszU

Community Member, 89 Posts

9 February 2010 at 9:21am

Did you enter that <a> tag in the tinymce editor? Then yes, tinymce strips some content from entered html. On the other hand if you put that into *.ss template, then the framework will not touch it. Sometimes invalid fields are not visible in the firebug (if you use it), so always check in the page source itself too.

ewilliams

Community Member, 12 Posts

9 February 2010 at 9:42am

Ok, we're getting there. Code for HomePage.ss:

<script type="text/javascript">
//<![CDATA[
function openpop() {
OpenWindow=window.open("", "newwin", "height=250, width=250");
OpenWindow.document.write("<html><head><title>Meet Our Staff</title></head>");
OpenWindow.document.write("<BODY>$PopupContent</BODY></html>");
OpenWindow.document.close();
self.name="main";
}
//]]>
</script>

<a href="#" onclick="openpop();">Click here</a>

Page source (IP address redacted):

<script type="text/javascript">
//<![CDATA[
function openpop() {
OpenWindow=window.open("", "newwin", "height=250, width=250");
OpenWindow.document.write("<html><!-- template silverstripe/themes/bt2/templates/Layout/HomePage.ss --><head><title>Meet Our Staff</title><link rel="stylesheet" type="text/css" href="/silverstripe/themes/bt2/css/layout.css?m=1264199304" />
<link rel="stylesheet" type="text/css" href="/silverstripe/themes/bt2/css/typography.css?m=1264445247" />
<link rel="stylesheet" type="text/css" href="/silverstripe/themes/bt2/css/form.css?m=1264007581" />
<link rel="stylesheet" type="text/css" href="/silverstripe/themes/bt2/css/layout.css?m=1264199304" />
<link rel="stylesheet" type="text/css" href="/silverstripe/themes/bt2/css/typography.css?m=1264445247" />
<link rel="stylesheet" type="text/css" href="/silverstripe/themes/bt2/css/form.css?m=1264007581" />
</head>");
OpenWindow.document.write("<BODY>Meet Patti here!  <BR><br> come back soon to read all about Patti.</BODY></html><!-- end template D:\silverstripe/themes/bt2/templates/Layout/HomePage.ss -->");
OpenWindow.document.close();
self.name="main";
}
//]]>

</script>

<a href="/silverstripe/#" onclick="openpop();">Click here</a></td></tr>

So, it's getting the variable content correctly. But when I click, no popup opens. I get "openpop is not defined"

Any way to stop the style sheets, etc, from appearing?

Thanks for your help so far!

MateuszU

Community Member, 89 Posts

9 February 2010 at 9:46am

This is weird. Show the page type definition? (the php file).

ewilliams

Community Member, 12 Posts

9 February 2010 at 9:48am

This one is mysite/code/HomePage.php

<?php
/**
 * Defines the HomePage page type
 */
 
class HomePage extends Page {
   static $db = array(
    'PopupContent' => 'HTMLText',
   );
   static $has_one = array(
   );
 
 function getCMSFields() {
	   $fields = parent::getCMSFields();
	    $fields->addFieldToTab('Root.Content.Main', new TextField('PopupContent'), 'Content');	   
	   return $fields;
	}
}
 
class HomePage_Controller extends Page_Controller {
}

?>

MateuszU

Community Member, 89 Posts

9 February 2010 at 9:57am

Edited: 09/02/2010 9:58am

Wow. You killed the template engine :D I think the template engine looks for first <body> element to insert its custom head tags, and it finds your javascript code. This is happening because your template is not valid HTML. Add the missing tags, something in that direction:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>

<script type="text/javascript"> 
//<![CDATA[ 
function openpop() { 
OpenWindow=window.open("", "newwin", "height=250, width=250"); 
OpenWindow.document.write("<html><head><title>Meet Our Staff</title></head>"); 
OpenWindow.document.write("<BODY>$PopupContent</BODY></html>"); 
OpenWindow.document.close(); 
self.name="main"; 
} 
//]]> 
</script>

<a href="#" onclick="openpop();">Click here</a>
</body>
</html>

Also you might need to escape the double quotes if you intend to inject PopupContent like that, otherwise the javascript's " will fight with the ones inside the variable.

Page 11
(current)
2
3
Next 10 entries

Return to top