FullCalendar - List has different values when in Javascript to Visualforce

Question

I'm implementing FullCalendar into a visualforce page where the user can then apply filters to the list of events, the system searches and then it is represented on a table and on the calendar. I have an array of custom objects called "calendarEvents" in my Apex controller which is being printed into the table and is then added into a Javascript array curSource and printed on the calendar.

var curSource = [
    <apex:repeat value="{!calendarEvents}" var="cal">
    {
        title: "{!cal.title}",
        start: '{!cal.startString}',
        end: '{!cal.endString}',
        url: '{!cal.url}',
        allDay: {!cal.allDay},
        className: '{!cal.className}'
    },
    </apex:repeat>
];

My problem is when I apply a filter, the system searches the database and updates calendarEvents. This updated list is printed onto the table with no problems. Within the Javascript I remove all of the events on the calendar, I apply the same code as above to a new var called newSource and I add these to the calendar

$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', newSource);
curSource = newSource;

When I try to update the calendar, the same list as before the filter is added in. So the values in newSource are the same as curSource.

So in the image above, you can see that the table is only displaying a single event "Data.com Webinar 12.04.16" but the window.alert is displaying the second value from the curSource array "EMEA-FR-Web From--Pardot Webinar--FY17Q1".

So it's the same array but when it's in the Javascript it contains more values than the array does when printed on the Visualforce page. I'm really new to Javascript.

Thanks in advance and if anybody needs more information let me know.

Answer 1

Not sure this is your problem but the symptom sounds like it may be related.

JavaScript makes use of references so:

var curSource = [1, 2, 3];
var newSource = curSource;

leaves both a and b referencing the same data array.

If you want separate data arrays so you can modify their content independently then clone the array using e.g. this:

var curSource = [1, 2, 3];
var newSource = curSource.slice();

This leaves the list items shared but two separate arrays referencing them.

Answer 2

I worked out what my problem was.

I needed to split up my event creation JS from my calendar rendering JS so that I could call on the event creation when I needed it. So when I selected a filter and the search took place, I could call rerender on the outputpanel jsFilter thus rebuilding the newSource array filled with an updated calendarEvents.

<apex:outputPanel id="jsFilter">
   <script>
      var newSource = new Array();
      newSource = [
         <apex:repeat value="{!calendarEvents}" var="cal">
         {
            title: "{!cal.title}",
            start: '{!cal.startString}',
            end: '{!cal.endString}',
            url: '{!cal.url}',
            allDay: {!cal.allDay},
            className: '{!cal.className}'
         },
         </apex:repeat>
      ];
      $('#calendar').fullCalendar('removeEvents');
      $('#calendar').fullCalendar('addEventSource', newSource);
   </script>
</apex:outputPanel>

So my checkbox code is :

<apex:selectCheckboxes value="{!businessUnitValues}" layout="pageDirection" >
    <apex:selectOptions value="{!camBusinessUnits}"  />
    <apex:actionSupport event="onchange" reRender="results,debug,jsFilter" action="{!runSearch}" />
</apex:selectCheckboxes>

where runSearch rebuilds calendarEvents and the reRender="results,debug,jsFilter" recalls my event building code.

I hope this is enough information for anybody else who's experiencing this problem and thanks @kieth-c for the help.