0

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!

0

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.

| improve this answer | |
  • Thanks for that i will check it out and give it a go. One thing I require is to be able to 'activate' the div or modal from a link on another page. There is another page with a google map displaying the markers of all the clubs. You click the club marker, and the small window displays the link to the club listing page. So once clicked, you get the club listing page, with the relevant div/modal open displaying the club details. Is this possible with Foundation/Reveal? – ZEDG Aug 5 '14 at 9:28
  • It would be possible yes but as with EE, Foundation makes no assumptions for you how want things to work and just gives you tools to make it quicker. It's up to you to build the functionality that need using the tools provided. Basically you would need to write something that looked at the URL being requested and, if required, trigger the modal (or expand the listing) and load the relevant content. You may find that a different approach would serve you better. – foamcow Aug 5 '14 at 10:16
  • I have applied fancybox, but how do you request EE channel entry data into the modal? – ZEDG Aug 5 '14 at 10:27
  • All Fancybox does is load a url into a modal. What would the URL for the page showing the data be if it wasn't loading into a modal? – foamcow Aug 5 '14 at 10:41
  • Well i would want it to embed the template/entry details like this: {embed="list/{parents:url_title}"} ..but i just end up where i started. I don't understand Ajax nor how i would be telling fancybox to load the content. – ZEDG Aug 5 '14 at 11:12
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.

| improve this answer | |
  • Thanks for that. I have no idea what Ajax is nor how i would use it. I found this post stackoverflow.com/questions/13138100/… which pretty much outlines what i want to do, however the posted answer code is jibberish in my eyes. Where would i be placing that ajax code, and how am i requesting it? – ZEDG Aug 5 '14 at 4:09
  • 1
    +1 for the Ajax approach. You can greatly simplify this if you use jQuery and make it even simpler by using something like Foundation (with its Reveal modal) which will handle all the Ajax stuff for you, just give it a URL. See foundation.zurb.com/docs/components/reveal.html – foamcow Aug 5 '14 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.