fetching data from the server

[jimfog]

I am trying to build a calendar with the aid of this tutorial:

 

http://blog.shinetech.com/2011/08/05/building-a-shared-calendar-with-backbone-js-and-fullcalendar-a-step-by-step-tutorial/

 

The above tutorial uses backbone for the client and one of the methods used to bring data from the server is the fetch() method.

 

As I said this is the client code though-my issue is how the server side code must be structured(PHP,queries) so as to "answer" this fetch method and given the fact that JSON must be returned from the server.

 

I need a starting point here.

 

The whole idea here is to get events from the database and put it in a backbone collection and then render the corresponding view.

[justsomeguy]

You'll need to figure out the data that Javascript will be sending to the server and the structure that it expects in return. Hopefully there is documentation for that somewhere that you can look up without having to go through the code to figure out what it sends and what it expects.

[thescientist]

This seems to define the response pretty clearly

 

So how do we get a screen like this up and running? Let’s assume that we’ve got a RESTful service such that if we do a GET to /events, we are returned a JSON array of objects representing events, where each event will contain properties recognized by FullCalendar, specifically:

• A unique id
• A string title
• A start date, encoded in ISO8601 format (for example, ’2011-08-12T09:55:03Z’)
• An end date, encoded in ISO8601 format
• A color, encoded in any of the CSS color formats (for example ‘Red’, or ‘#ff0000′)

 

The RESTful endpoint could be optional. You could set that up using something like the Slim framework, or just make an events.php page that returns that data.

 

Either way, you need to have a database that has the above information so you can query from it, and return the necessary response with those properties set. You could simply make all the column names the response properties names.

[jimfog]

First of all the issue of whether to have a RESTfull interface deserves a discussion on its own-make a comment if you want,but I think I will create a separate topic for it.

 

Secondly.Unfortunately I cannot test what the tutorial says(and you mention above) because the browser(Chrome) has cached the response.

So despite I have altered the script I cannot test it.I cannot understand why this happens. If you go here http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/ in the last section about caching,it mentions that caching is prevented by inserting an underscore in the URL.Here is the URL as seen in the network tab of chrome dev tools:

1. [*]

Request URL:

http://localhost/test.php?start=1393106400&end=1396731600&_=1394913858067

The underscore is after the & symbol.Nonetheless this seems not to have any effect in caching.

The browser caches the response.

What can be wrong here?

[jimfog]

O solved the caching problem but still I cannot make it to work-no event is shown in the calendar.

Here is the PHP code-the JSON that is returned from it.

<?php header("Cache-Control: no-cache, must-revalidate"); header("content-type:application/json");$event = array('id'=>'74','title' => 'test1', 'start' => '2014-03-17T12:00:00Z','end'=>'2014-03-17T12:30:00Z','color'=>'#ff0000');echo json_encode($event); exit(); ?>

The above ought to do the "job" but it does not. I know that to answer you have to study the tutorial-and this is beyond the scope of this topic.

 

That being said any comment(or no comment) is welcomed.

[jimfog]

O solved the caching problem but still I cannot make it to work-no event is shown in the calendar.

Here is the PHP code-the JSON that is returned from it.

<?php header("Cache-Control: no-cache, must-revalidate"); header("content-type:application/json");$event = array('id'=>'74','title' => 'test1', 'start' => '2014-03-17T12:00:00Z','end'=>'2014-03-17T12:30:00Z','color'=>'#ff0000');echo json_encode($event); exit(); ?>

The above ought to do the "job" but it does not. I know that to answer you have to study the tutorial-and this is beyond the scope of this topic.

 

That being said any comment(or no comment) is appreciated.

Here is what is returned from the server in the form of AJAX.

http://1drv.ms/1eb5PCA

Edited March 17, 2014 by jimfog

[thescientist]

That link is broken. Are you checking the networks tab in Chrome to see the request / response details? what checking are you doing in your app to log the response in the success (or error) callbacks? You haven't confirmed yet if your app successfully completes the request first.

[jimfog]

That link is broken. Are you checking the networks tab in Chrome to see the request / response details? what checking are you doing in your app to log the response in the success (or error) callbacks? You haven't confirmed yet if your app successfully completes the request first.

The link does work...I do not what is going wrong from your side and the link is not functional.

 

Secondly.I managed to make the event to appear in the calendar but still with a problem.The hour is not shown.

For example in the code above(array) while 2014-03-17 is depicted in the calendar in monthview,12:00:00Z is not shown at all.the event is not shown in week and day view.Here is an image snapshot of monthview

http://1drv.ms/NoIAKT

 

 

I have not checked for any success callbacks since I am not yet very familiar with backbone code.

Nevertheless the network tab of chrome dev tools clearly shows the request taking place-the link below is an image snapshot from the network tab,I hope you can see it now.

http://1drv.ms/1nyPyO8

 

So concluding, the problem now is depiction of time.

Edited March 17, 2014 by jimfog

[jimfog]

I fixed it.Thanks for the help.If there is something else I will let you know.

[jimfog]

My problem now is when more than 1 event must be rendered to the calendar.

The PHP code is this:

$event[0] = ['id'=>'1','title' => 'dim', 'start' =>'2014-03-17T10:00:00Z','end'=>'2014-03-17T12:30:00Z','color'=>'#0072C6','allDay'=>false];    $event[1] = ['id'=>'1','title1' => 'dimi', 'start' =>'2014-03-18T11:00:00Z','end'=>'2014-03-18T13:30:00Z','color'=>'#0072C6','allDay'=>false];        $events[]=$event;    echo json_encode($events);

This is what is depicted in the networks tab of chrome dev tools http://1drv.ms/Nqx1CX.

 

In the calendar though nothing is shown.

So,no problem showing 1 event,problem with more than one.

 

P.S The proper place to ask these questions is StackOverflow but unfortunately I have been band.

[thescientist]

the code handling the response would also be helpful to provide. it's not enough to just show the response and expect us to know why your application is not rendering it correctly.

 

likely you may have gotten banned because you primarily offers pictures of your problems instead of code and / or fiddles. Programmers solve problems with relevant and specific code snippets, not screenshots. That really goes for anywhere, not just SO.

[justsomeguy]

If I had to guess (and I do, because I don't see the other code), I would say it is because your $events array is not an array of events, it is an array that contains a single element, another array, that has multiple events. Sounds like you're not sending the data structure that the Javascript code expects.

[thescientist]

Actually, that looks exactly like what it is doing, and it seems the picture backs that up. If all you need to do is return an array, then you should do that, because this looks suspicious.

 

    $events[]=$event;

 

1. you have an array, called $event.
2. you add to indexes to it.
3. then you push that array to another array, $events.

but why do step 3? why not just echo $event? why the extra push to another superfluous array?

 

if you read the documentation

 

we are returned a JSON array of objects representing events

 

So one array, representing a collection of events. Each event is an object (or just an associative array in PHP).

[jimfog]

Ι do not want to post any code yet before checking your claims above.Here is the new PHP code-according to thescientist this must be correct:

 $event[0] = array('id'=>'1','title' => 'dim', 'start' =>'2014-03-17T10:00:00Z','end'=>'2014-03-17T12:30:00Z','color'=>'#0072C6','allDay'=>false);    $event[1] = array('id'=>'1','title1' => 'dimi', 'start' =>'2014-03-18T11:00:00Z','end'=>'2014-03-18T13:30:00Z','color'=>'#0072C6','allDay'=>false);    echo json_encode($event);

Nonetheless the events are not rendered in the calendar again.

I think I followed the advice above correctly.

[thescientist]

what about the callback function (response handler)? what's going on there? you have to show that code and it's a pretty important part of the flow, wouldn't you agree?

[jimfog]

The console of dev tools showed an error(just noticed it.)

This is the message that I saw:

Uncaught Error: Can't add the same model to a set twice,1

 

The following code is from backbone.js-it demonstrates the function which is related with the error message:

 _add : function(model, options) {      options || (options = {});      model = this._prepareModel(model, options);      if (!model) return false;      var already = this.getByCid(model) || this.get(model);      if (already) throw new Error(["Can't add the same model to a set twice", already.id]);      this._byId[model.id] = model;      this._byCid[model.cid] = model;      var index = options.at != null ? options.at :                  this.comparator ? this.sortedIndex(model, this.comparator) :                  this.length;      this.models.splice(index, 0, model);      model.bind('all', this._onModelEvent);      this.length++;      if (!options.silent) model.trigger('add', model, this, options);      return model;    },

I do not know a lot from backbone so it is difficult to explain what this message means.

[Ingolme]

I'd say it means that there's already an object with id=1 in their set and they don't want to overwrite it. Make the server return an array with different id values

[jimfog]

yes.that fixed the issue.It really missed my attention,that thing about the ID.

 

Thanks all for your help.I will let you know if there is something else....but I think this topic is considered solved.