1

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.

enter image description here

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.

0

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.

  • What I feel might be happening is that the list calendarEvents is being loaded with all its values in JavaScript before the filtered list is assigned to calendarEvents. Is there a way in JavaScript to recall or reload a list from the Apex controller, after it has already been loaded. – hunty Apr 4 '16 at 8:14
  • @hunty As JavaScript is a powerful general purpose programming language you could make a request to re-load the values. But your curSource array is already in the page so it makes more sense to locally clone it using e.g. var newSource = curSource.slice(); and filter the separate newSource array. And whenever you want to go back to the original data, clone curSource again. – Keith C Apr 4 '16 at 8:18
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.