Forum

Thread tagged as: Question, Configuration, Discussion

Using Perch with a javascript-based site

Currently we have a website based around javascript files that contain site modules for things like friends, users, walls, and also static pages like privacy policy and terms of service. The javascript part is based on angular.js and backbone.js. When we setup Perch, we created a php file with our perch content and then placed an iframe in the javascript file that handles the html markup of the page. However, we don't think using iframes is a very good idea so we are trying to figure out how Perch can fit into a system like angular.js or backbone.js. Does anyone have any suggestions?

Tim Baio

Tim Baio 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What format do you need the content to be in?

The javascript creates HTMl. For example, this is part of our privacy policy page. Notice how inside of the Container is HTML. The iframe within the HTML is where we have our perch php page.

var TEMPLATES = TEMPLATES||{};
TEMPLATES.PrivacyPolicy = {
    Container: '\
                <div id="my-content-container">\
                    <a href="https://www.kidsafeseal.com/certifiedproducts/jabbersmack.html" target="_blank"><img id="kidsafeseal" border="0" alt="Jabbersmack.com is certified by the kidSAFE Seal Program." src="https://www.kidsafeseal.com/sealimage/2043659317406411791/jabbersmack_large_darktm.png"></a>\
                    <div class="content-holder clearfix">\
                        <iframe width="100%" height="0px" src="extra/perch-privacy-policy.php" id="CHANGETHIS" marginheight="0" frameborder="0" onLoad="autoResize(\'CHANGETHIS\');"></iframe>\
                    </div>\
                </div>',
}
Drew McLellan

Drew McLellan 2638 points
Perch Support

Ok - I think you should be able to output the content of your Perch region in the same way. e.g.

var TEMPLATES = TEMPLATES||{};
TEMPLATES.PrivacyPolicy = {
    Container: '<?php echo addslashes(perch_content('Privacy Policy', true)); ?>',
}

I think addslashes() should make the HTML suitable for output in JavaScript for most common cases.

This doesn't work, I think it's because this is a Javascript file and you can't use php inside of a javascript file. Do you have any other possible solutions?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Yes, you can use PHP in a JavaScript file. https://docs.grabaperch.com/docs/adding-perch/file-extensions/

Changing my .htaccess file by adding .js to the AddType line like the document you linked to still did not solve the problem. I even went to my MAMP settings and added .js to the AddType line in the https.conf file.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

You haven't explained what the problem is now. Is PHP not being parsed in the JavaScript file, or is there some other issue?

It appears like the slashes are not being added correctly. I made a test.php file, put only this line in it: <?php echo addslashes(perch_content('Privacy Policy', true)); ?> and ran it in my browser (by going to domain.com/test.php). When I did this, the page was blank and there was nothing in the page source.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

If you have a "blank page" then there is a PHP error. What is the error in your error log?

PHP Fatal error: Call to undefined function perch_content() in /Users/nick/htdocs/test.php on line 1

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Have you included the Perch runtime in this file? If you want to use Perch functions you need to include the runtime.

Yes, we have the Perch runtime included as follows <?php include('perch/runtime.php'); ?> (the test.php page is in the root of the httpdocs folder). When the site loads in the browser it is still blank, but viewing source shows this: <!-- Undefined content: Privacy Policy -->

Rachel Andrew

Rachel Andrew 394 points
Perch Support

That looks correct then - I think that error must have been from earlier.

You need to go to the Perch admin, choose a template and add some content. Undefined content means that a template hasn't been chosen yet.

Ok, went into the Perch admin and added content and now the test page is working. So if I want to use this inside of my javascript templating engine (I'm pretty sure we're using Mustache.js) I need to put a line of php code to include the perch library?

I think the problem is that the php addslashes() function doesn't properly escape the html for use within our javascript template. It looks like the addslashes() function adds slashes for things like apostrophes and quotes, but it does not place slashes at the end of each line like our js template requires. Is there a way to add slashes at the end of the line so the Perch outputted html will look like this:

var TEMPLATES = TEMPLATES||{};
TEMPLATES.PrivacyPolicy = {
    Container: '\
                <div class="row-fluid"><h3 style="margin: 0">Privacy Policy</h3></div>\
                <div id="my-content-container">\
                    <div class="content-holder clearfix">\
                        Company Inc. the publisher of Website.com (“Website”) knows that you care about how information Website collects is used and shared.  This notice describes Website\'s privacy policy (this “Privacy Policy”) for its Application www.Website.com and its mobile app (the “Application”), including all online services and functions.  Your use of the Application constitutes acceptance of this Privacy Policy, the terms of service (“Terms of Service”), and the community guidelines (the “Community Guidelines”).  “You” or “your” refers to the user (individual or company) of the Application, including a child\'s parent or guardian if required to supervise a child\'s activities on the Application per the requirements of the Terms of Service.\
                         <br><br>\
                        1. Introduction\
                         <br><br>\
Drew McLellan

Drew McLellan 2638 points
Perch Support

You could do something like

Container: '<?php 
    $str = addslashes(perch_content('Privacy Policy', true));
    $str = str_replace("\n", '\'.PHP_EOL, $str);
    echo $str; 
?>',

I tried that and it produced nothing in the browser, nothing in the page source, and the following error in my PHP error log: PHP Parse error: syntax error, unexpected ''\'.PHP_EOL, $str);' (T_ENCAPSED_AND_WHITESPACE) in /Users/nick/htdocs/test.php on line 7

Drew McLellan

Drew McLellan 2638 points
Perch Support

Oh! Try

Container: '<?php 
    $str = addslashes(perch_content('Privacy Policy', true));
    $str = str_replace("\n", '\\'.PHP_EOL, $str);
    echo $str; 
?>',

Thank you! That worked for us. The only problem is that there is an extra backslash that shows up on the page. Take a look:

<h1>This is the test page</h1>\
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Do you know why that extra backslash is there and how to get rid of it?

Drew McLellan

Drew McLellan 2638 points
Perch Support

What does the JavaScript output look like?