Jump to content

fetching data from the server


jimfog
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by jimfog
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by jimfog
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Ι 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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...