Home Forums Events Calendar Add-on Ajax Loader on Home page Calendar

Ajax Loader on Home page Calendar

Posted: September 26, 2016 at 4:34 pm


September 26, 2016 at 4:34 pm

I used do_shortcode(['ESPRESSO_CALENDAR']) to display the calendar add-on on my home page. I noticed that when I go through each month/day/week using the calendar’s navigation, it takes a second or two to load the events. My issue, though, is the ajax loader is not appearing to demonstrate that the events are loading. I want to be sure the user knows to wait for events to load before clicking to the next month/week/day.

I’ve got the following on my front-page.php above ‘get_header’so the shortcode will work properly in the template. Is there anything else I need to add to my template so it displays the ajax loader?

<?php if ( class_exists( 'EED_Espresso_Calendar' ) ) {
	global $is_espresso_calendar;
	$is_espresso_calendar = TRUE;
	add_action( 'wp_enqueue_scripts', array( EED_Espresso_Calendar::instance(), 'calendar_scripts' ) );
	if ( EED_Espresso_Calendar::instance()->config()->tooltip->show ) {
		add_filter('FHEE_load_qtip', '__return_true' );


  • Support Staff

September 27, 2016 at 9:12 am

You could check to see if it’s an issue where the color of the spinner is the same as the background, where it’s there and not visible. The following CSS will help test:

.ee-spinner{ color:red !important; }


September 27, 2016 at 11:21 am

Well, the other issue I’m noticing is the div id="espresso-ajax-loading" isn’t even populated into the HTML for the calendar (on my home page). I can get the ajax loader to show if I insert the shortcode into a WYSIWYG on another page. But it doesn’t show any of the ajax HTML when I use do_shortcode


  • Support Staff

September 27, 2016 at 11:32 am

You probably don’t have the loop in that template then? If that’s the case, the ajax loading div will not be inserted. You can add a version of the loop that doesn’t output actual posts (or use the loop to get the posts to display). Here’s an example of a minimal WordPress loop you can add to the template to get that ajax loading div:

<?php if ( have_posts() ) : 
while ( have_posts() ) : the_post(); 
endif; ?>


September 27, 2016 at 12:00 pm

Hmm, I just tried your suggestion but it doesn’t seem like including the loop is enough to get the loader to show with do_shortcode. It only seems to add the ajax loader when I insert the shortcode directly into the content editor. I even tried adding some dummy text into the home page content editor, and had do_shortcode in another part of my template… still didn’t work.

The most ideal situation for me is to keep the content editor hidden since it is not needed on my theme’s home page. Do you think it’s possible to get this working without using that? If not, I may have to settle with inserting the shortcode directly into the editor, since so far that’s the only way the calendar works 100%.


  • Support Staff

September 27, 2016 at 1:29 pm

It works when I try it with another theme, so yeah it’s totally possible.


September 27, 2016 at 2:39 pm

I guess I’m stumped. I’m not sure why I’m not able to populate the ajax with your recommendations. I also have no errors in the console. Here’s the code I have to pull in the calendar in my template (including the code mentioned in the original post above get_header). Let me know if you are able help me further with the info provided.

<div class="calendar-home">
  <div class="location-text">Filter Events by Location</div>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
		 endif; ?>
        <?php echo do_shortcode('[ESPRESSO_CALENDAR]'); ?>


  • Support Staff

September 27, 2016 at 4:06 pm

The kind of info I’d need to be able to help with this would include the full code of the page template. There isn’t any context with what you just posted in the reply. Is that something you can post into a paste bin or gist and link here?


September 27, 2016 at 4:42 pm

Here is a pastebin entry of my front-page.php template.


  • Support Staff

September 28, 2016 at 8:54 am

It should be working for you, it works when I load up your front-page.php template into my theme:

What may be happening is the script that loads the video, or something else on that page, is making it so the ajax loader can’t be seen. You could try changing the position and z-index of the spinner to see if that helps, e.g.

#espresso-ajax-loading {
	top: 75%;
	z-index: 2000;


September 28, 2016 at 10:04 am

Is there any way I can send you a link to what I’m working on privately?

I’ve done everything from removing my scripts.js to eliminating bits of code from my home template to see what’s breaking the loader… nothing. It really doesn’t seem to be something fixable with CSS. When I view my source code, the ajax HTML isn’t on my home page at all.

Thanks for all of your help so far with this, it’s very much appreciated!


  • Support Staff

September 28, 2016 at 10:26 am

Normally there’s at least a few support tokens purchased before we’ll troubleshoot third party code. You’re welcome to download the theme that has your front-page.php template for the purpose of troubleshooting.

Download link


September 28, 2016 at 10:29 am

Okay, that’s understandable. Thanks again!

The support post ‘Ajax Loader on Home page Calendar’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Status: closed

Updated by  HindmanSanchez 3 years, 9 months ago ago

Topic Tags


This topic is:
Do NOT follow this link or you will be banned from the site!