Hi. I’m building on online calendar, and I’m using jQuery’s load function to bring an event’s details into a DIV panel on the calendar page when you click on that event. All well and good. The problem is–the load time for the details is too slow. I’m assuming there’s a way to preload all of the details from all of the current month’s calendar events (this is for a small organization, and they are unlikely to have more than half a dozen events in any given month) in the background, so that when you click on an event, the info. comes up quickly. Unfortunately, my AJAX knowledge is not that deep. Is there a jQuery function I’m missing, or a plugin for it, that would accomplish the above?
The whole point of AJAX is to load back end data piecemeal, when it’s needed.
Maybe simple loading this data in the backend and passing all of it to the client would be a better solution?
Or are you saying you don’t have access to the backend and you need to do this in the client?
In which case, simply do what you are doing in the event function of whatever element needs to be clicked to load the data, when the DOM is ready.
Assuming each calendar cell requires its own Ajax call to get the events, you could pre-populate them with a loop to fetch each cell’s data and put it in a hidden div. Something like:
$( '.calendar-cell' ).each( function( idx, cell ) {
$.get( '/url/for/calendar/cell/data', function( data ) {
$( cell ).append( '<div class="hidden-cell-data">' + data + '</div>' );
} )
} );
Then you could add a listener to unhide the div when the cell is clicked.
But it might be easier to just populate hidden divs in all the cells when the page is rendered in the first place, rather than looping a bunch of Ajax calls to get it.
Sorry; that’s what I was trying to describe as my goal. Let me try again:
There’s a month view of a calendar with, say, 6 events on it. To the right of the calendar is a panel. When you click on one of the events, the details of that event are loaded into the panel. (using the jQuery load() method)
The problem: the server is quite slow. So the time between clicking that text and making it appear in the panel is unbearably long. I need to shorten this interval.
My thought was that there must be a way to load (but not yet display) all of the events in the current month onto the client’s machine, quietly and unobtrusively, while the visitor is looking at all of the events and deciding which one to click on. As you said, I though that was the whole point of AJAX–to be able to load stuff piecemeal in the background so that, when a visitor clicks a link, the new content comes up magically fast, disguising the fact that there was lengthy communication with the server happening when they weren’t looking.
The question is, how to accomplish this. I assume that there must be a way to have jQuery look at the links, read the files at the end of those links, and then put that content into something hidden on the client’s machine (several hidden DIVs? an array? a client-side SQL-lite database?) until needed. I was hoping that there was an off-the-shelf method of doing so.
Yes, that’s what I’m getting at. Maybe I’ll do the latter, and then swap the contents of the hidden DIV for the detail panel when clicked.