Invalid html markup in javascript

Question

I've been asked to take a look at a civicrm installation on wordpress. They are having trouble getting an event page to work correctly. I found that there are lots of javascript errors being thrown. When I look at the page source of the registration page I see lots of p and /p tags in with the javascript which is causing script errors. e.g.

<script type="text/javascript"></p>
<p>var thousandMarker = ',';
var separator      = '.';
var symbol         = '$';
var optionSep      = '|';</p>
<p>cj("#priceset [price]").each(function () {</p>
<p>    var elementType =  cj(this).attr('type');
   if ( this.tagName == 'SELECT' ) {
      elementType = 'select-one';
   }</p>
<p>    switch(elementType) {

The first line throws an error of SyntaxError: expected expression, got '<'

Any idea what could be causing this? I'm not very familiar with wordpress. I reviewed the plugins they have and don't see anything obvious. (They are running wordpress 4.7 and civicrm 4.7.13).

Answer 1

Sounds like some javascript got pasted into a rich text editor ("WYSIWYG"), and the result is linebreaks in the JS are being interpreted as content linebreaks and wrapped in <p> container.

Simple fix: edit the content containing the JS, and use the "View Source" button or equivalent to enter the JS in source mode rather than content mode.

More robust approach (less easy to break, etc): add the JS via a custom template (see "Appending jQuery or other code") or from a custom extension.