Not Loading in Tab Popup or Ajax Section

Is the PDF viewer failing to display correctly inside a tabbed interface or a page with smooth AJAX transitions? This is a known limitation of how PDF Embedder initialises its viewer; the timing of when the embed calculates its dimensions can conflict with JavaScript-driven layout changes.

This guide explains why the viewer breaks in these contexts and what to do about it.

---

Why the viewer fails in tabs and AJAX transitions

PDF Embedder calculates the viewer’s dimensions when the page loads. If the embed is inside a tab that is closed at load time, the viewer measures against a hidden container, so its width and height are wrong when the tab opens. Resizing the browser window forces a recalculation, which is why the PDF sometimes snaps into the right size after a manual resize.

AJAX page transitions are a different problem. When a visitor navigates using a smooth transition rather than a full page load, PDF Embedder’s initialisation scripts may not run again, leaving the embed broken or invisible.

Fixing the tab display issue

To trigger a resize event when a tab opens, modify your tab’s click handler to dispatch a resize event immediately after the tab becomes visible:

window.dispatchEvent(new Event('resize'));
Code language: JavaScript (javascript)

In cases where the PDF only loads when the page is opened directly, you might need to ensure that all relevant plugin JavaScript files are loaded, and then fire this event to initialize the plugin after the new page content has been loaded:

jQuery('.pdfemb-viewer').pdfEmbedder();Code language: JavaScript (javascript)

If your tab system uses jQuery and a class like div.tab-title to control tabs, the following code re-initialises the viewer on tab click:

jQuery(document).ready(function($){
  $(document).on('click', 'div.tab-title', function() {
    if (pdfemb_trans.cmap_url === "undefined") {
      var cmapURLis = '';
    } else {
      var cmapURLis = pdfemb_trans.cmap_url;
    }
    $('.pdfemb-viewer').pdfEmbedder(cmapURLis);
  });
});
Code language: JavaScript (javascript)

You can add this code using one of the following methods:

Using WPCode (recommended): Install the free WPCode plugin, go to Code Snippets > Add Snippet, paste the code, and activate it.

Adding the code to your themefunctions.php: Add the code to your active theme’s functions.php file.

The selector div.tab-title is an example. Replace it with the selector that matches your tab plugin’s actual click target.

Fixing AJAX page transition issues

If your theme provides smooth AJAX page transitions, the PDF viewer may only load on a direct page load, not when visitors navigate via a transition.

The root cause is that AJAX navigation bypasses the full page initialisation sequence that PDF Embedder relies on. The most reliable fix is to disable AJAX page transitions in your theme settings, if that option exists.

If disabling transitions is not an option, a developer will need to hook into the theme’s transition completion event and manually re-trigger PDF Embedder’s scripts’ initialisation.

The method varies depending on which theme or transition plugin is in use.

Custom JavaScript solutions for AJAX transitions are outside the scope of standard plugin support. The code examples above are a starting point for developers.