Rex,
Let's take a simple case - I want to send the center date of the timeline back
to the server after the user has moved the timeline. However, I want the
timeline to be still (not scrolling) for 1 second before reporting the center
date back to my server. For example, if the user is dragging the timeline with
the mouse, they will be updating the position of the timeline every 50-100ms or
so. You don't want to fire off a request to your webserver every 50ms while the
user is dragging the timeline.
Example:
var topBand = tl.getBand(0);
topBand.addOnScrollListener( function(band) {
if (band._timer !== false) {
window.clearTimeout(band._timer);
band._timer = false;
}
var func = function() {
var centerDate = band.getCenterVisibleDate();
// send the center date back via jQuery
$.ajax({
type: 'POST',
url: "/path/to/method",
data: {date:myDateFormatFn(centerDate)}
});
// or with the SimileAjax object
SimileAjax.XmlHttp.post("/path/to/method",
{date:myDateFormatFn(centerDate)}
);
};
band._timer = window.setTimeout(func,1000);
});
This adds a listener to the top band in the timeline. If the band moves, the
scroll listener fires. This could be from dragging, keyboard navigation,
double-clicking, etc. A timeout of 1 second (1000ms) is set. If the band
scrolls before 1 second has elapsed, it clears the previous timer, and resets a
new timer for 1sec.
If the band hasn't moved for a second, the function "func" is called. This
grabs the center date of the timeline, and then passes it to an ajax function.
You'll need to send the center date to some url on your server that knows what
to do with the date (e.g. store it in a database). You should also format the
date to some meaningful string that your server code will understand. In this
simple example, I don't bother handling any response the server sends back, but
you could use this mechanism to load data as the user scrolls.
Getting the Timeline client to send the ajax request is simple. The harder part
is figuring out *when* you want to send this request back to the server. Do you
want the system sending/fetching data while the user is dragging the timeline
with the mouse? Do you want to send or fetch data if they stop moving but keep
holding the mouse down? Or if they move the timeline using the keyboard? What
if they double-click on the timeline? In my case, they may scroll the timeline
by several days, so I make sure that it loads the data for each day as it
scrolls. In your case, you may only want to load the data for the destination
date.
Similarly, I have a calendar control that lets users go directly to a specific
date. Since the user might jump any number of days, I only load the data for
the new date. No data is loaded for the in-between dates.
Hope this helps.
--Mike
On Mar 8, 2011, at 11:53 AM, Rex Riley wrote:
> Michael,
>
> I found this thread which is exactly my issue at this moment, and
> thought I would ask you a question.
>
> You said it would be ‘easy to ajax the current timeline center date
> back to the server’. Unfortunately I am not strong with ajax but am with
> php. Can you point me in the right direction as to how I can figure out how
> to get the var back to my codes on the server? It would be much appreciated.
>
> Thank you.
>
> <<< Rex Riley >>>
>
>
> Sure, it's easy:
> tl.getBand(0).getCenterVisibleDate() will return the center of band 0.
> If your other bands are sync'ed to each other then that's all you need.
>
> Try adding this:
> var topBand = tl.getBand(0);
>
> topBand.addOnScrollListener( function(band) {
> document.getElementById("output").innerHTML =
> band.getCenterVisibleDate();
> });
>
>
> As the user scrolls the timline, the date at the center of band 0 will be
> printed in the element with id="output"
>
> You could easily write the date out to a cookie or ajax it back to the server.
>
> --Mike Nosal
>
>
> On May 4, 2010, at 6:12 AM, Dom wrote:
>
> > Hi,
> >
> > I need to work out what the current date being viewed in the timeline
> > is before displaying a timeline page. If this date is worked out I can
> > then use the setCenterVisibleDate method to move the timeline to this
> > date when the page is re-displayed. The first time the timeline is
> > displayed todays date can be shown.
> >
> > Is it possible to capture what the current position in the timeline
> > is?
> >
> > Dom
>
>
> Rex Riley
> Middle School Technology Coordinator
> Sandy Spring Friends School
> [email protected]
> (301) 774-7455 x 210
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
