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?
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.
Ok - I think you should be able to output the content of your Perch region in the same way. e.g.
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?
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.
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.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
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 -->
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:
You could do something like
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
Oh! Try
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:
Do you know why that extra backslash is there and how to get rid of it?
What does the JavaScript output look like?