Loading of data (40+ fields) for multiple (250+) entries on single page

Question

I am querying whether this is a good idea, and if so best way to do it.

I have a channel (club_listing) that contains 40+ fields. There are 250+ club_listing entries.

On my clients current/old site, they have a Club Listing page which lists each of the club names. When you click on name a popup window appears with all the relevant details.

(I would prefer not to have a popup or new page displaying each clubs info.)

What i wanted to do was have hidden divs on the page that contains all the data for each entry. When the user click the club name, the relevant hidden div appears displaying all the info.

Now i already have a nice script that is doing this for the FAQS (click question, answer displays below it). I wanted to use this same script, but on test the page takes ages to load.

My initial template embeds the template with the club listing. This club listing template (uses parents tag so opens channel tag for the parent (zone) not club_listing) embeds the data for each club (snippets don't work).

Is it NOT a good idea to have a single page load the data of so many entries (eg, 40 fields x 250 entries = 10000), or is there some way that it can all load quickly and is acceptable to do?

Any response is much appreciated!

Answer 1

Create your list as normal but don't include the detail on that template.

Create a 'detail' template which outputs the club's details using EE's normal URL parsing.

Make sure that all works, albeit loading the details into a now page.

Now, on the write some Javascript (or jQuery) which intercepts clicks on the club names and uses Ajax to load the club details - either into a div below the club name or into a modal window.

If you don't want to do the Javascript yourself then you can make this even simpler by using a framework such as Foundation which gives you some handy tools (such as the Reveal modal) for doing things like this simply by adding a data attribute to your link. I'd make a custom build of Foundation which didn't include the features I wasn't going to use - or look for a standalone jQuery plugin like Fancybox instead.

UPDATE to explain Ajax

Imagine one of your clubs was called 'Sports Club' and the URL for your embed would then be /lists/sportsclub

If you visited /lists/sportsclub in your browser then the details for that club would be displayed.

All Ajax does is use Javascript to load the URL without reloading the page. You can specify a container into which the loaded HTML gets inserted.

That container might be an ever present div, or one created dynamically by the javascript directly after the club you clicked on, or hidden in the foot of the page and used as a modal. It's up to you.

So in the case of using Fancybox - it creates a modal and loads the HTML from your URL into it. For instance, an Ajax example on the Fancybox site uses this markup

<a class="various fancybox.ajax" data-fancybox-type="ajax" href="/demo/ajax.txt">Ajax</a>

At this point, this is not an EE question but one on how to implement an Ajax call - specifically using Fancybox.

Answer 2

That's a lot of data so in addition to server performance, you want to consider client-side performance and the page weight. You could eliminate or minimize the server-side issue with long caches or using Varnish, but you'll still have a lot of data transmitted and potentially client-side heavy page.

I'm guessing that the visitor only cares about info for clubs they are interested in, and will not likely be browsing all 250 when they visit that page. So another balanced solution would be to retrieve the contents for the revealed container via AJAX. The AJAX template could have a single-entry tag, and return just the one field.