Live Preview not working

Question

Live Preview isn't working for any kind of entry. Dev or production. I get the following error on chrome's console.

jquery-2.1.1.min.js?d=1409764106:4 
POST http://undiario.dev/ 500 (Internal Server Error)

jquery-2.1.1.min.js?d=1409764106:4 
k.cors.a.crossDomain.send

jquery-2.1.1.min.js?d=1409764106:4 
n.extend.ajax

jquery-2.1.1.min.js?d=1409764106:4 
n.(anonymous function)

craft.js:10520 
Craft.LivePreview.Garnish.Base.extend.updateIframe

jquery-2.1.1.min.js?d=1409764106:2 
n.isFunction.f

Anybody knows why this is happening?

Answer 1

Looks like it's generating a 500 Internal Server Error which means the underlying error message should be getting logged into your craft/storage/runtime/logs files. Just reproduce the problem and check for an entry with [error] severity.

Answer 2

Another cause of Live Preview not working that can be a pain to debug, because there are no 'errors' as such is your .htaccess setup. For example, on one site we had the following .htaccess entry to force trailing slashes (at server level, not Craft's config option) in order to prevent duplicate listings in the client's analytics:

# Force trailing slash:
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*[^/])$ http://%{HTTP_HOST}/$1/ [L,R=301]

However that 301 redirect kills the Live Preview and returns the page at it's current saved state. No errors in the logs and easy to miss. Our workaround for this issue was to only apply the trailing slash for non-POST requests, allowing Craft to POST to the Live Preview system uninterrupted:

# Force trailing slash:
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_METHOD} !=POST
  RewriteRule ^(.*[^/])$ http://%{HTTP_HOST}/$1/ [L,R=301]

Answer 3

Just want to mention for anyone running across this thread that if you're having a problem with live preview and seeing dev tools errors of the nature of cors or crossdomain then the first thing you might want to check is that if the domain you're serving the site (the control panel, specifically), is the same as what you have set in "Settings | General Settings" (or in Craft 3, "Settings | Sites")

For example, if you serving the site from a example.com (root domain), and you have www.example.com in the settings, your live preview will bonk because it's a different domain and the live preview is being served via ajax.

Answer 4

Accepted answer helped me, my issue was Ajax related as well! Here is an example of the code I ended up using in my template.

{% extends (craft.request.isAjax and not craft.request.isLivePreview) ? "_ajaxLayout" : "_layout" %}

Answer 5

Another possible source of Live Preview not working is your siteUrl config setting pointing to the wrong environment in a multi-environment setting.

I had this problem when I'd set siteUrl globally in the config but had forgotten to override it for the staging environment that Live Preview was failing in. Adding a siteUrl for the staging environment fixed that.

For example:

return array(
  '*' => array(
    'devMode' => false,
    'omitScriptNameInUrls' => true,
    'siteUrl' => 'http://example.com/'
  ),
  '.dev' => array(
    'devMode' => true,
    'siteUrl' => 'http://example.dev/'
  ),
  'stage.example.com' => array(
    'siteUrl' => 'http://stage.example.com/'
  )
);

Answer 6

In my case it was failing because I had set the X-Frame-Options meta in the base template:

<meta http-equiv="X-Frame-Options" content="deny">

The browser was rejecting the preview frame content as being protocol data rather than http.

So i changed the base template to check for live preview:

{% if not craft.request.isLivePreview %}
<meta http-equiv="X-Frame-Options" content="deny">
{% endif %}

Answer 7

Make sure {{ siteUrl }} is used in your links in your templates.

For example

href="{{ siteUrl }}stylesheets/styles.css"

Not

href="stylesheets/styles.css"