Reload iFrame in tab onclick

Question

Reload iFrame in tab onclick

1.1k Views Asked by mazecreative At 04 April 2025 at 21:48

My client is insistent on using Wufoo forms throughout his vacation booking website. The site is built on WordPress, so rather than creating a separate page for each booking form (like his current site - messy!) I thought I would display the relevant booking form for each vacation in a tab or modal.

I currently have 2 tabs (jQuery UI) on the Vacation page, one with vacation details ('Details' - active by default) and the other with a booking form ('Book Now', not active). The problem is, the booking form loads with way too much white-space below it. This is because the form loads on page load rather than when the 'Book Now' tab is clicked. If I refresh the page and hit the 'Book Now' tab straight away before the iFrame has loaded, it then loads perfectly with no white-space beneath it, but if I just refresh the page and then click 'Book Now' after a few seconds then the form has the white-space. The booking form is embedded from Wufoo so the iFrame is loaded in with JavaScript. Is there any way to stop the iFrame from loading until the 'Book Now' tab is clicked?

Here is the embed code from Wufoo:

    <script type="text/javascript">var z7s0z9;(function(d, t) {
    var s = d.createElement(t), options = {
    'userName':'USERNAME', 
    'formHash':'z7s0z9', 
    'autoResize':true,
    'height':'2592',
    'async':true,
    'header':'show', 
    'ssl':true};
    s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') +         'wufoo.com/scripts/embed/form.js';
    s.onload = s.onreadystatechange = function() {
    var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
    try { z7s0z9 = new WufooForm();z7s0z9.initialize(options);z7s0z9.display(); } catch         (e) {}};
    var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
    })(document, 'script');</script>

Original Q&A

There are 1 best solutions below

**Ayush Ghosh** · Answer 1

You can load the tab via ajax instead of Iframe, as iframe will always load on page load.

refer to this loading tab vi ajax very easy

<script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

Reload iFrame in tab onclick

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in WORDPRESS

Related Questions in JQUERY-UI

Related Questions in IFRAME

Related Questions in WUFOO

Trending Questions

Popular # Hahtags

Popular Questions