CODEWITHSUNDEEP
jsonajaxfullcalendar
AHn
AHn

Reputation: 61

Fullcalendar display event from ajax call

I have read many posts about my problem but none of them answer my question. Here my code :

EDIT

events: {
      url: 'AJAX_selectEvent.do',
      data: function() {
        return {
          "rcn": document.getElementById("rcn").value
        }
      },
      error: function(data) {
        console.log(data);
        alert("Ajax call error");
      }
    },

Here is my data from JAVA :

[{"id":"0","resourceId":"p","start":"2019-07-08","end":"2019-07-09","title":"50602378"},{"id":"1","resourceId":"p","start":"2019-06-18","end":"2019-06-19","title":"50602503"},{"id":"2","resourceId":"p","start":"2019-06-26","end":"2019-06-27","title":"50603191"},{"id":"3","resourceId":"p","start":"2019-06-24","end":"2019-06-25","title":"50603192"},{"id":"4","resourceId":"p","start":"2019-06-13","end":"2019-06-14","title":"50604130"}

As you can see I'm fetching JSON data from the parameter "rcn". In my success function I can see it but it won't display in the calendar. I'm getting a warning :

VM1236 main.js:5162 undefined (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
(anonymous) @ VM1236 main.js:5162
wrappedFailure @ VM1236 main.js:3406
success @ RECHERCHE_getInfo.do:87
u @ VM1234 jquery.min.js:2
fireWith @ VM1234 jquery.min.js:2
k @ VM1234 jquery.min.js:2
(anonymous) @ VM1234 jquery.min.js:2
XMLHttpRequest.send (async)
send @ VM1234 jquery.min.js:2
ajax @ VM1234 jquery.min.js:2
events @ RECHERCHE_getInfo.do:63
unpromisify @ VM1236 main.js:3410
fetch @ VM1236 main.js:4183
fetchSource @ VM1236 main.js:5137
fetchSourcesByIds @ VM1236 main.js:5126
fetchDirtySources @ VM1236 main.js:5106
reduceEventSources @ VM1236 main.js:5069
reduce @ VM1236 main.js:5528
Calendar.reduce @ VM1236 main.js:6652
Calendar.dispatch @ VM1236 main.js:6610
(anonymous) @ VM1236 main.js:6583
Calendar.batchRendering @ VM1236 main.js:6673
Calendar.hydrate @ VM1236 main.js:6580
Calendar @ VM1236 main.js:6490
(anonymous) @ RECHERCHE_getInfo.do:32

With a console.dir(data), I can see (of course with the 26 rows) :

Array(26) {id: "0", title: "50602378", start: "08/07/19", end: "09/07/0019", resourceId: "p"}

Can you help me to understand why am I getting a warning from the callback(events) and why it don't display the events please ?

EDIT : The new error even if I changed my jquery version 1 to 2 and the library 

Uncaught TypeError: e.class is not a constructor
at constructor.instantiateView (fullcalendar.min.js:9)
at constructor.renderView (fullcalendar.min.js:9)
at constructor.initialRender (fullcalendar.min.js:9)
at constructor.render (fullcalendar.min.js:9)
at HTMLDivElement.<anonymous> (fullcalendar.min.js:6)
at Function.each (jquery-2.0.0.min.js:4)
at init.each (jquery-2.0.0.min.js:4)
at init.t.fn.fullCalendar (fullcalendar.min.js:6)
at HTMLDocument.<anonymous> (RECHERCHE_getInfo.do:32)
at l (jquery-2.0.0.min.js:4)

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="jslib/utils.js" ></script>
<script type="text/javascript" src="jslib/core/main.js" ></script>
<script type="text/javascript" src="jslib/core/locales-all.js" ></script>
<script type="text/javascript" src="jslib/interaction/main.js" ></script>
<script type="text/javascript" src="jslib/daygrid/main.js" ></script>
<script type="text/javascript" src="jslib/timegrid/main.js" ></script>
<script type="text/javascript" src="jslib/list/main.js" ></script>
<script type="text/javascript" src="jslib/timeline/main.js" ></script>
<script type="text/javascript" src="jslib/resource-common/main.js" ></script>
<script type="text/javascript" src="jslib/resource-timeline/main.js" ></script>

Thanks

Upvotes: 0

Views: 3384

Answers (1)

ADyson
ADyson

Reputation: 62098

I can't reproduce your exact warning. I made a demo of your code using the sample data you provided as being output by Java, but pasting into a dummy endpoint URL at myjson.com. See http://jsfiddle.net/fpz1m2w4/ . With fullCalendar v3 this produces an error

callback is not a function

The root of this is you specified your events function's arguments incorrectly. As per the v3 docs the arguments should be function( start, end, timezone, callback ) - you didn't specify all the arguments, so the variable you are calling callback actually contains the timezone. JavaScript just uses the position of the arguments to work out what to pass to it, not the names - the names can actually be whatever you like (so function(a, b, c, d) would work just the same, albeit a little unclear to maintain).

If you fix that, then the code should work - demo: http://jsfiddle.net/fpz1m2w4/1/.

However, I actually don't think any of this is necessary. Your Java (since you changed the date format) appears to produce the data in the correct format expected by fullCalendar already. So you don't need to do all this extra processing. You're essentially re-creating an array with an identical structure, so clearly that's a bit pointless.

(Also, as a side note, code like $(this).attr('id') is not required to access an attribute of your response - the JSON data gets parsed into a normal JS object, so this.id would produce the same result. The .attr() syntax is only required if you're trying to fetch from a jQuery object (representing a HTML element) or an XML node, which have a more complex structure.)

Instead you should be able to just use the events as a JSON feed pattern, where you simply give fullCalendar the server URL, and some simple options such as a callback to get your rcn value, and fullCalendar will take care of constructing the AJAX request, receiving the response and loading the data into the calendar.

Here's the code you would need:

events: {
  url: "AJAX_selectEvent.do",
  data: function() {
    return {
      "rcn": document.getElementById("rcn").value
    }
  },
  error: function(data) {
    console.log(data);
    alert("Ajax call error");
  }
}

And here's a demo using the dummy URL: http://jsfiddle.net/fpz1m2w4/4/

Upvotes: 1

Related Questions