Widget Builder Issue with $ for jQuery

CM1
1

I’m getting the following area after adding my custom widget to my page:

Problem assembling output for item (name=“calendar”, id=3-101-32574) with template: perc.widget. Underlying error: Encountered “, “dddd, MMM dd, yyyy hh:mm tt”) + " to " + \t\t\t” at perc.widget[line 39, column 120] Was expecting one of: “,” … “)” … … … “(” … See log for stack trace.

I’ve got the following inline script block with this widget. I’ve made sure it’s got its supporting JavaScript libraries includes properly. The code works fine outside of CM1. trying to get it to work as a custom widget.

<script type="text/javascript"> <br /> $(document).ready(function() { <br /><br />
  $('#calendar').fullCalendar({ <br />
   header: { <br />
    left: 'prev,next today', <br />
    center: '', <br />
    right: 'month,basicWeek,basicDay' <br />
   }, <br /><br />
   defaultView: 'month', <br />
   events: { <br />
    url: '$GoogleCalendarURL', <br />
    className: 'gcal-event',
        // an option! <br />
    currentTimezone: 'America/New_York' // an option! <br />
   }, <br />
   eventClick: function(calEvent, jsEvent, view) { <br /><br />
    $('#event-popup .event-popup_content').html(''); <br />
    $('#event-popup .event-popup_content').append("<h2>" + calEvent.title + "<h2>"); <br /><br />
    var eventTime = ""; <br /><br />
    if (calEvent.allDay) { <br />
     eventTime = "<span>All Day</span>"; <br />
    } <br />
    else { <br />
     eventTime = "<span>" + $.fullCalendar.formatDate(calEvent.start, "dddd, MMM dd, yyyy hh:mm tt") + " to " +
 $.fullCalendar.formatDate(calEvent.end, "dddd, MMM dd, yyyy hh:mm tt") +"</span>"; <br />
    } <br /><br />
    $('#event-popup .event-popup_content').append("<div class='event_date'>" + eventTime + "</div>"); <br />
    $('#event-popup .event-popup_content').append("<div class='event_location'>" + calEvent.location + "</div>");
             <br />
    $('#event-popup .event-popup_content').append("<div class='event_desc'>" + calEvent.description + "</div>"); <br /><br />
    return false; <br />
   }, <br />
    eventRender: function(event, element) { <br /><br />
     element.attr('data-mfp-src', '#event-popup'); <br /><br />
    element.magnificPopup({ <br />
    type: 'inline', <br /><br />
    fixedContentPos: false, <br />
    fixedBgPos: true, <br /><br />
    overflowY: 'auto', <br /><br />
    closeBtnInside: true, <br />
    preloader: false, <br /><br />
    midClick: true, <br />
    removalDelay: 300, <br />
    mainClass: 'my-mfp-zoom-in' <br />
  }); <br />
      } <br />
  }); <br /><br />
 }); <br /> </script>

where '$GoogleCalendarURL is the field value I take in from the user… I’m formatting some dates into a string for display in the calendar.

any help is appreciated.

2

Hi Paul,

It appears that our Velocity assembler is attempting to parse your dollar sign in:

$.fullCalendar.formatDate

A quick fix would be to relocate the portion of your JS code containing these lines into an external file that you include through the Resource tab (obviously the $GoogleCalendarURL variable needs to remain in the Display HTML block).

Hopefully that will get you unstuck, but I’m going to look into this closer and see if there may be a better way to manage this.

3

I think moving the affected code to an external JS file would still be a better option, but you could also set the dollar sign to a Velocity variable, and use it to stub in dollar signs within the relevant block:

#set ( $x = "$") 

 if (calEvent.allDay) { 
 eventTime = "All Day";   
 }   
 else {   
 eventTime = "" + ${x}.fullCalendar.formatDate(calEvent.start, "dddd, MMM dd, yyyy hh:mm tt") + " to " + ${x}.fullCalendar.formatDate(calEvent.end, "dddd, MMM dd, yyyy hh:mm tt") +"";   
 }
4

for now I fixed it by replacing $.fullCalendar.formatDate with jQuery.fullCalendar.formatDate. But yeah, it probably should not hang up on “$.” as it’s a common notation in jQuery.

5

@Nathaniel, For cleanliness as well, you’re probably right to suggest moving the code to an external file…probably will do that and then just set a single javascript variable in the inline code to set the google calendar address from the user.

Velocity variable?? This is the first I’ve heard of such a thing…Sorry, not very familiar with Apache…didn’t know we could use this within JavaScript blocks in percussion. Then could I use Velocity if statement to test the widget builder field for specific conditions? Something like the following?

#if( $widget\_builder\_field == '' )

output this html 
  
#else   

output this instead 
  
#end ```
6

If I move it, then I’ll still need to set a javascript variable to the google calendar url the contributor enters for the widget. This would need to appear prior to the external file being included in the order of the html, but i believe you guys place the links to the resources above where the display html block will be put… maybe it’s early in the day, but I’m not seeing how I could make this work.

7

Regarding the JavaScript issue, I like this approach for a number of reasons.

As for Velocity, in theory yes you should be able to do something like this, but at the moment we’re taking a “try at your own risk” type of stance, and as such we have no intentions to document the usage of Velocity within a custom widget. I believe we are prepared to reevaluate our stance if customers a) uncover significant value we hadn’t considered using Velocity code, or b) find ways to cause harm to the system.

8

gotcha, thanks. can you respond to my comment (replied to your initial response) above regarding my issue of the resource file actually needs to be placed and loaded after my inline script within the custom widget display html? because in the widget display html I set a variable that my resource file needs to use…can’t do this as the resource file needs to load after the display html script runs… otherwise I will not be able to move my script to an external file as you suggest. Thanks.

9

If you keep the script wrapped in $(document).ready within the JS file, it will load after the variable has been set within your inline script. Let me know if this isn’t working.