Slider & Modal Not Properly Loading

[whitemedia]

Hi,

I have a carousel slider and a modal on a page, which invariably are very slow to load - approx. 1 minute before they display as intended. Until that point, the modal button is not clickable and the slider starts, but does not rotate.

At first I thought it may be to do with an embedded iFrame elsewhere on the page, but even after removing the iFrame, the slider and modal behaved the same.

The modal is a Component and is present in several places on the page, as well as in the header. The slider uses dynamic content drawing in data from a CPT.

Please see the Secure Note.

Thanks,
Christopher

[prakash_s]

Hello @whitemedia,

Thanks for writing to us.

I checked your site, it seems that the modal is working fine on my end. It might be an issue of browser cache. I would suggest you please clear your browser cache and recheck it. I have tested it on the Google Chrome browser version 137.0.7151.41. If the issue still persists, please let us know the browser and its version.

Thanks

[whitemedia]

Hello @prakash_s,

Thanks for the reply. I am still getting the issue on all browsers. Even clearing all cache and browsing history and updating to Chrome 137.0.7151.56 has not resolved the problem. I have also clearer Cornerstone’s cache.

Please see Secure Note.

Thanks,
Christopher

[ruenel]

Hey Christopher,

You will have to wait for the page to fully load it before you can click on the Modal and the Slider. Be advised that the JS scripts and other code resources of the page is loaded at the bottom of the page and they are the last files to be loaded. This is why in your video, you were able to click the Modal and Slider just after the page is loaded which may have took a few seconds because of the size of the page which comprise of the page elements, images, CSS and JS scripts.

Hope this makes sense.

[whitemedia]

Hi @ruenel,

Thanks for explaining the loading behaviour of the page. I have since found a way to delay the loading of the embedded form until the modal’s toggle is clicked, so the page loads normally again.

Just in case it is of help to anyone else using the ResDiary table booking system, here is the solution:

MODAL
To be able to add the Component more than once on a page, we need to get a unique ID. I did this by adding a parameter to the Component. (The Component already has a number of parameters, so this is added at the end). The parameter’s value is:

resmodal-{{ random.uniqueid }}

Then in the Modal’s Customize tab, I added the following dynamic content to bring through the parameter’s value into both Toggle Hash and ID:

{{dc:p:cwDynamicIds.modalId}}

RAW CONTENT ELEMENT
This is placed inside the modal with the following code:

<div class="resdiary-frame" data-src="https://booking.resdiary.com/widget/Standard/YOURUNIQUE/LINK?includeJquery=true" style="width:100%; max-width:600px; height:550px; margin:auto; display:block;"></div>

COMPONENT JS

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.x-anchor-toggle').forEach(function (toggleBtn) {
    toggleBtn.addEventListener('click', function () {
      // Find the corresponding modal container for this toggle
      // Usually toggleBtn has aria-controls or href pointing to modal id
      const modalSelector = toggleBtn.getAttribute('href') || toggleBtn.getAttribute('aria-controls');
      if (!modalSelector) return;

      // Remove any hash (#) from selector if present
      const modalId = modalSelector.replace(/^#/, '');
      const modal = document.getElementById(modalId);
      if (!modal) return;

      // Find iframe container inside this modal
      const iframeContainer = modal.querySelector('.resdiary-frame');
      if (iframeContainer && !iframeContainer.querySelector('iframe')) {
        const src = iframeContainer.dataset.src;
        const iframe = document.createElement('iframe');
        iframe.src = src;
        iframe.style.width = '100%';
        iframe.style.maxWidth = '600px';
        iframe.style.height = '550px';
        iframe.style.border = '0';
        iframe.style.margin = 'auto';
        iframe.style.display = 'block';
        iframe.loading = 'eager';
        iframe.allowTransparency = true;
        iframeContainer.appendChild(iframe);
      }
    });
  });
});

Thanks,
Christopher

[christian]

Glad to hear that, Christopher and thanks for sharing.