3212 Posts in 847 Topics by 809 members
| Go to End | Next > | |
| Author | Topic: | 6740 Views |
-
Javascript popup window with user-editable content
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!
-
Re: Javascript popup window with user-editable content
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.
-
Re: Javascript popup window with user-editable content
9 February 2010 at 9:05am Last edited: 9 February 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?
-
Re: Javascript popup window with user-editable content
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.
-
Re: Javascript popup window with user-editable content
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!
-
Re: Javascript popup window with user-editable content
9 February 2010 at 9:46am
This is weird. Show the page type definition? (the php file).
-
Re: Javascript popup window with user-editable content
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 {
}?>
-
Re: Javascript popup window with user-editable content
9 February 2010 at 9:57am Last edited: 9 February 2010 9:58am
Wow. You killed the template engine
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.
| 6740 Views | ||
| Go to Top | Next > |
