Pasting Javascript into a Content Area breaks editor preview

[Hancock]

I’ve been having a problem where pasting some javascript into an element breaks the editor preview pane, but the site and code work just fine on the front end of the website.

This ticket discusses a similar issue and suggests creating a shortcode for the javascript, which I did.

The shortcode breaks the editor preview as well, but on the front end the shortcode and site work fine.

This is my shortcode: [current_date_time]

And this the JS behind it:

// Custom Display Current Date Time Shortcode
// =============================================================================
add_shortcode("current_date_time", "current_date_time_shortcode");
function current_date_time_shortcode() { ?>
  <?php ob_start(); ?>

<script type="text/javascript">
  var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
 today = days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm,
  html = '<h4 style="text-align: center;">As of ' + today + '</h4>';
document.write(html);
</script>

  <?php return ob_get_clean(); ?>
<?php }
// =============================================================================

I also tried using several other types of elements but saw the same behavior. Any ideas on how to get the preview editor working?

Also, I’m moving this site from Squarespace to WordPress using X, and the code worked fine on Squarespace.

Site is currently at ma.hartsvilleliving.com. Squarespace site is at mourningamerica.com if you’d like to see what the JS looks like when rendered.

[ruenel]

Hello Casey,

This code is not a JS code.

// Custom Display Current Date Time Shortcode
// =============================================================================
add_shortcode("current_date_time", "current_date_time_shortcode");
function current_date_time_shortcode() { ?>
  <?php ob_start(); ?>

<script type="text/javascript">
  var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
 today = days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm,
  html = '<h4 style="text-align: center;">As of ' + today + '</h4>';
document.write(html);
</script>

  <?php return ob_get_clean(); ?>
<?php }
// =============================================================================

You will need to add this code in your child theme’s functions.php file. You can edit it in Appearance > Theme Editor > functions.php file

Once you have that code in place, you should be able to use the [current_date_time] shortcode in a text or content area element.

We would love to know if this has worked for you. Thank you.

[Hancock]

@Hancock

Thanks for the reply, @ruenel. And yes, you are right. I pasted the wrong snippet. Here’s the JS:

<script type="text/javascript">
  var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
 today = days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm,
  html = '<h4 style="text-align: center;">As of ' + today + '</h4>';
document.write(html);
</script> 

I have the shortcode for that set up, too. The shortcode also breaks the editor preview pane but works fine on the front end.

[ruenel]

Hello Casey,

If that is the case, then the output of the shortcode is causing a conflict preventing the preview from loading. Do you have any idea what error message it generated in the console? Have you tried adding your shortcode in a raw content element? To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

[Hancock]

Hey, Ruenal.

The console isn’t much help in identifying the problem. I had tried the Raw Content Element and several others but they all exhibit the same behavior.

I’m giving you access to the site now. Secure note coming soon.

[jade]

Hello Casey,

There is a line in the JS code you are adding that is replacing the entire document view that is why the preview area gets disrupted. That is the line that has document.write.

So a workaround would be to add this code( do not include the script tag) in X > Theme Options > JS:

var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
 today = days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+d.getFullYear()+' '+hours+':'+minutes+ampm,
  html = '<h4 style="text-align: center;">As of ' + today + '</h4>';
document.querySelector('.x_the_date').innerHTML = html;

Then add this code to a content element <span class="x_the_date"></span>.

Hope this helps.

[Hancock]

Awesome! Thanks, @jade!

@jade

var d = new Date(), minutes = d.getMinutes().toString().length == 1 ? ‘0’+d.getMinutes() : d.getMinutes(), hours = d.getHours().toString().length == 1 ? ‘0’+d.getHours() : d.getHours(), ampm = d.getHours() >= 12 ? ‘pm’ : ‘am’, months = [‘Jan’,‘Feb’,‘Mar’,‘Apr’,‘May’,‘Jun’,‘Jul’,‘Aug’,‘Sep’,‘Oct’,‘Nov’,‘Dec’], days = [‘Sun’,‘Mon’,‘Tue’,‘Wed’,‘Thu’,‘Fri’,‘Sat’], today = days[d.getDay()]+’ ‘+months[d.getMonth()]+’ ‘+d.getDate()+’ ‘+d.getFullYear()+’ ‘+hours+’:’+minutes+ampm, html = ‘

As of ’ + today + ‘

’; document.querySelector(’.x_the_date’).innerHTML = html;

Sorry for my ignorance. Do I use this code where I define the shortcode in functions.php, or put it directly into the content element on the page.

And to make sure I understand correctly, this doesn’t need to be wrapped tags anywhere?

[friech]

Hi Casey,

You need to place that JS code on either Page > JS or Theme Options > JS area. You don’t need to wrap the code with <script> tag, because the theme will do that for you on the front-end.

Then add the <span class="x_the_date"></span> on your page (using Content Area element), and that will be shown as date/time on the frontend.

Note: That this will not show a preview on the content builder, but this should not break the content builder preview pane.

You don’t need the shortcode code on the functions.php file, you can safely remove it.

Cheers!

[Hancock]

I think I’ve finally got this working! Thanks everyone for all of the help and the good suggestions.

[christian]

You’re welcome, Casey. Please just note that what Jade provided is just for guidance only. The code not to be treated as part of the theme therefore, we will not support if it breaks nor further improve it. You must consult with a 3rd party developer to fix issues with custom codes next time.

Thanks.