Jump to:

3393 Posts in 976 Topics by 852 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: 9564 Views
  • ewilliams
    Avatar
    Community Member
    12 Posts

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

    oh, that was just a snippet -- homepage.ss is within /layout and works great otherwise. but I'll try putting the script into a .js file & see what happens.

  • MateuszU
    Avatar
    Community Member
    89 Posts

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

    I think this won't help, as the $variables will not get picked up from external script. Try to move the script into the php file and include it as Requirements::customScript. I'm not sure though if it will not cause the same trouble...

    function Popup() {
    $popupContent = $this->PopupContent; //this might need sanitization

    $customScript = <<<JS
    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";
    }
    JS;

    Requirements::customScript($customScript, 'popup');
    }

    Other idea is to include the openpop as external js, and make it reference the js variable embedded into the template with any of the previous methods. This would have the benefit of removing html and body tags from the main template which is causing trouble in the first place.

  • ewilliams
    Avatar
    Community Member
    12 Posts

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

    Hmm, it's getting towards the edges of my knowledge zone. But looks interesting. I have to tackle another project right now but I'll be getting back to this later today or soon this week. Thanks again for all your assistance!

  • ewilliams
    Avatar
    Community Member
    12 Posts

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

    I put the popup javascript (similar to above) in its own page and put the below in my Layout/HomePage.ss

    <script type="text/javascript" src="/silverstripe/mysite/code/homepage.js"></script>

    And as I had in my gut feeling, it worked!

    Now I'm getting the popup window to open (yay), with no extraneous content, but it's not showing my desired content -- $PopupContent, a field of the HomePage.

    So now my problem is much simpler -- how to send $PopupContent (which shows up fine if I put it directly in Layout/HomePage.ss) from my HomePage to the Javascript code?

  • MateuszU
    Avatar
    Community Member
    89 Posts

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

    What about this: change the $PopupContent in the external js file to js variable, like for example myPopupContent. Then populate the variable in the template:

    <script type="text/javascript">
    //<![CDATA[
    var myPopupContent = "$PopupContent";
    //]]>
    </script>

    Probably you will need to escape the double quotes when serving the PopupContent from php, otherwise one " will break all the scripts on the page.

    This is a little bit ugly, as it uses global javascript variable.

    Different solution to this problem would be to create new window and set it to show some address which would plug in back into the cms, and then you could put all your popup html in template and include $PopupContent within that template.

  • ewilliams
    Avatar
    Community Member
    12 Posts

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

    Woo, it works!

    Ok, for the next person reading this (or me in 2 months), here's what I did:

    Add a new field to the HomePage for your popup content (assuming your page only needs one editable popup window); called $PopupContent here.

    In Layout/HomePage.ss:

    <script type="text/javascript" src="/silverstripe/mysite/code/homepage.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var myPopupContent = "$PopupContent";
    //]]>
    </script>
    <a href="#" onclick="openpop();">Click here to learn more</a>

    homepage.js:

    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>");
    OpenWindow.document.write(myPopupContent);
    OpenWindow.document.write("</BODY></html>");
    OpenWindow.document.close();
    self.name="main";
    }

    My next task is to style that popup window to look all sorts of snazzy, but that's the easy part.

    Thanks again!

  • sajok
    Avatar
    Community Member
    82 Posts

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

    hello,

    I'm trying to create something like a preview before printing pop-up. The user clicks on print icon and the pop-up shows with the content of the $layout variable shows inside plus a link to print. I followed your steps but I don't know how to show the contents of the articles in the preview popup.. any idea?

    thanks

  • MateuszU
    Avatar
    Community Member
    89 Posts

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

    Hi,
    The data gets passed into the popup via the $PopupContent variable. So you have two options here: rename that variable to $Content or wherever your data is sitting within the article DataObject, or on the same data object create accessor function:

    function getPopupContent() {
    return "my article content"
    }

    you can also do variations of those

    mat

    9564 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.