Skip to main content

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

Template Questions /

Javascript popup window with user-editable content


Reply


20 Posts   11117 Views

Avatar
ewilliams

Community Member, 12 Posts

9 February 2010 at 10:43am

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.

Avatar
MateuszU

Community Member, 89 Posts

9 February 2010 at 10:54am

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.

Avatar
ewilliams

Community Member, 12 Posts

9 February 2010 at 10:58am

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!

Avatar
ewilliams

Community Member, 12 Posts

10 February 2010 at 10:32am

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?

Avatar
MateuszU

Community Member, 89 Posts

10 February 2010 at 10:38am

Edited: 10/02/2010 10:42am

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.

Avatar
ewilliams

Community Member, 12 Posts

10 February 2010 at 10:57am

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!

Avatar
sajok

Community Member, 82 Posts

13 February 2010 at 1:50pm

Edited: 14/02/2010 5:49am

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

Avatar
MateuszU

Community Member, 89 Posts

15 February 2010 at 9:11am

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