CODEWITHSUNDEEP
javascriptjqueryajaxfullcalendar
AVM
AVM

Reputation: 592

ajax not working with full calendar

I have used full calendar external dragging events for a topic assigning interface.Used ajax for updating the topic details to mysql db but ajax is not working.I am not getting the values in my controller.Checked the other questions here but didn't find a solution.Can any one help?

<link href='assets/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='assets/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='assets/fullcalendar/lib/moment.min.js'></script>
 <script src='assets/js/jquery.js'></script>
  <script src='assets/fullcalendar/lib/jquery-ui.custom.min.js'></script>
 <script src='assets/fullcalendar/fullcalendar.min.js'>  </script>
<script>
$(document).ready(function() {    
    /* initialize the external events
    -----------------------------------------------------------------*/

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

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(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
-----------------------------------------------------------------*/
  $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true,
        drop: function(date,event) {


          // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported
                copiedEventObject.start = date;

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)

                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?

                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
             $.ajax({
               url: '/addSchedule',
               dataType: 'json',
               type: 'post',
               data: {event: event},                  
               success: function(response){
                  console.log('response');
               }
             });

      }     

    });


});
</script>

Upvotes: 0

Views: 1948

Answers (1)

MBC870
MBC870

Reputation: 373

I was experiencing the same issue as @AVM, by using the same procedure he is using.

this is the solution to this problem:

        var event_title = event.title;
        var event_date = event._start.format();
        var event_backgroundColor = event.backgroundColor;
        var event_borderColor = event.borderColor;

        $.ajax({
            url: '../php/add_event.php',
            type: 'post',
            data: {
                title: event_title,
                date: event_date,
                backgroundColor: event_backgroundColor,
                borderColor: event_borderColor
            },
            success: function(response){
              alert(response);
            },
            error: function(){
                alert("error");
            }
        });

Note the:

 var event_date = event._start.format();

This solved my problem, I hope it will solve yours.

Thanks Mat

Upvotes: 1

Related Questions