Jump to:

3434 Posts in 1026 Topics by 866 members

Template Questions

SilverStripe Forums » Template Questions » Javascript popup window with user-editable content

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

Page: 1 2 3
Go to End
Author Topic: 10537 Views
  • ewilliams
    Avatar
    Community Member
    12 Posts

    Javascript popup window with user-editable content Link to this post

    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
    Avatar
    Community Member
    89 Posts

    Re: Javascript popup window with user-editable content Link to this post

    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
    Avatar
    Community Member
    12 Posts

    Re: Javascript popup window with user-editable content Link to this post

    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
    Avatar
    Community Member
    89 Posts

    Re: Javascript popup window with user-editable content Link to this post

    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
    Avatar
    Community Member
    12 Posts

    Re: Javascript popup window with user-editable content Link to this post

    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
    Avatar
    Community Member
    89 Posts

    Re: Javascript popup window with user-editable content Link to this post

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

  • ewilliams
    Avatar
    Community Member
    12 Posts

    Re: Javascript popup window with user-editable content Link to this post

    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
    Avatar
    Community Member
    89 Posts

    Re: Javascript popup window with user-editable content Link to this post

    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.

    10537 Views
Page: 1 2 3
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.