0

I have a script on my page which is supposed to react to an event is dropped by calling a remote function in my controller. But I am getting a Too much recursion error. Please look at my code below, how can I fix this:

VF Page:

<apex:page id="EventScheduler" standardStylesheets="false" sidebar="true" showHeader="true" controller="CTRL_EventScheduler">
<head>
    <link href="{!URLFOR($Resource.fullCalendarScheduler, 'lib/fullcalendar.min.css')}" rel='stylesheet' />
    <link href="{!URLFOR($Resource.fullCalendarScheduler, 'lib/fullcalendar.print.min.css')}" rel='stylesheet' media="print" />
    <link href="{!URLFOR($Resource.fullCalendarScheduler, 'scheduler.min.css')}" rel='stylesheet' />

    <script src="{!URLFOR($Resource.fullCalendarScheduler,'lib/moment.min.js')}"></script>
    <script src="{!URLFOR($Resource.fullCalendarScheduler,'lib/jquery.min.js')}"></script>
    <script src="{!URLFOR($Resource.fullCalendarScheduler,'lib/jquery-ui.min.js')}"></script>
    <script src="{!URLFOR($Resource.fullCalendarScheduler,'lib/fullcalendar.min.js')}"></script>
    <script src="{!URLFOR($Resource.fullCalendarScheduler,'scheduler.min.js')}"></script>

    <script>
        j$ = jQuery.noConflict();
        j$(function() { // document ready


            /* initialize the external events
            -----------------------------------------------------------------*/

            j$('#external-events .fc-event').each(function() {

                // store data so the calendar knows to render an event upon drop
                j$(this).data('event', {
                    title: j$.trim(j$(this).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                });

                // make the event draggable using jQuery UI
                j$(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });

            });


            /* initialize the calendar
            -----------------------------------------------------------------*/

            j$('#calendar').fullCalendar({
                schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                editable: true, // enable draggable events
                droppable: true, // this allows things to be dropped onto the calendar
                aspectRatio: 1.8,
                scrollTime: '00:00', // undo default 6am scrollTime
                header: {
                    left: 'today prev,next',
                    center: 'title',
                    right: 'timelineDay,timelineThreeDays,agendaWeek,month'
                },
                defaultView: 'timelineDay',
                views: {
                    timelineThreeDays: {
                        type: 'timeline',
                        duration: { days: 3 }
                    }
                },
                resourceLabelText: 'Fitment Centers',
                resourceGroupField: 'building',
                resources: JSON.parse('{!resourcesJSON}'),
                drop: function(date, jsEvent, ui, resourceId) {
                    console.log('drop', date.format(), resourceId);

                    // is the "remove after drop" checkbox checked?
                    if (j$('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        j$(this).remove();
                    }
                },
                eventReceive: function(event) { // called when a proper external event is dropped
                    console.log('eventReceive', event);
                    var calEvent = event;
                    Visualforce.remoting.Manager.invokeAction(
                        '{!$RemoteAction.CTRL_EventScheduler.saveEvent}',
                        calEvent,
                        function(result, event) {
                            if (event.status) {}
                            else if (event.type === 'exception'){}
                            else {}
                        },
                        {escape: true}
                    );
                },
                eventDrop: function(event) { // called when an event (already on the calendar) is moved
                    console.log('eventDrop', event);
                }

            });

        });

    </script>
    <style>

        body {
            margin-top: 40px;
        }

        #wrap {
            width: auto;
            margin: 0 auto;
            padding-top: 10px;
        }

        #external-events {
            float: left;
            width: 13%;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

        #external-events h4 {
            margin-top: 0;
            padding-top: 1em;
        }

        #external-events .fc-event {
            margin: 10px 0;
            cursor: pointer;
        }

        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

        #calendar {
            float: right;
            width: 85%;
        }

    </style>
</head>

<body>
    <div id='wrap'>
        <div id='external-events'>
            <h4>Unassigned Work Orders</h4>
            <apex:repeat value="{!workOrderEvents}" var="event">
                <div class="fc-event">{!event.Subject}</div>
            </apex:repeat>
            <p>
                <input type='checkbox' id='drop-remove' />
                <label for='drop-remove'>remove after drop</label>
            </p>
        </div>
        <apex:form >
            <div id='calendar'></div>
        </apex:form>
        <div style='clear:both'></div>

    </div>
</body>

More specifically on the above code I am referring to this section:

eventReceive: function(event) { // called when a proper external event is dropped
                    console.log('eventReceive', event);
                    var calEvent = event;
                    Visualforce.remoting.Manager.invokeAction(
                        '{!$RemoteAction.CTRL_EventScheduler.saveEvent}',
                        calEvent,
                        function(result, event) {
                            if (event.status) {}
                            else if (event.type === 'exception'){}
                            else {}
                        },
                        {escape: true}
                    );
                }

My controller method is the following:

@RemoteAction
public static void saveEvent (String eventString) {
    System.debug('eventString: ' + eventString);
}

What I basically want is for the JSON returned when dropping the event, to use it to find the record in my controller and update it accordingly. But thats another story, for now getting this part fixed would help

  • If you comment the remoting call, you still get error? – Raul Feb 10 '17 at 10:08
  • @RahulSharma if I do comment the remoting call then the only thing thats displayed is my event JSON under console.log('eventReceive', event); and everything works – Nelson Chisoko Feb 10 '17 at 10:10

Your Answer

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

Browse other questions tagged or ask your own question.