Js file not loading in foundation tab

I’m using the foundation 3 framework and tabs - http://foundation.zurb.com/old-docs/f3/tabs.php

Within one tab I want this to open up yet the JS file is not loading. Can I add a snippet of code to solve this?

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
                  <div class="tableauPlaceholder" style="width:900px; height:700px;">
                      <noscript><a href="#"><img alt="" src="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;ni&#47;ni_age_population&#47;Treemapshowing60ofresidentpopulation-Census2011&#47;1_rss.png" style="border: none" /></a>
                      </noscript><object class="tableauViz" width="900" height="700" style="display:none;"><param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="ni_age_population&#47;Treemapshowing60ofresidentpopulation-Census2011" /><param name="tabs" value="yes" /><param name="toolbar" value="yes" /><param name="static_image" value="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;ni&#47;ni_age_population&#47;Treemapshowing60ofresidentpopulation-Census2011&#47;1.png" /><param name="animate_transition" value="yes" /><param name="display_static_image" value="yes" /><param name="display_spinner" value="yes" /><param name="display_overlay" value="yes" /><param name="display_count" value="no" /></object></div><div style="width:900px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;"><div style="float:right; padding-right:8px;"><a href="http://www.tableausoftware.com/public/about-tableau-products?ref=http://public.tableausoftware.com/views/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" target="_blank">Learn About Tableau</a></div></div>

Try doing a search and replace on your code, replacing all the / with / - I managed to get it running after I’d done that.

No its still hanging onload - really weird because outside of the tabs it works fine. I need to f5 it to load in the tabs?

Is the whole page online somewhere, or could you put it up somewhere? As the snippet you posted seems to be working, it’s difficult to know what might be causing the problem without seeing it in context.

Apologies yes I think its conflicting with another script.


<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>title</title>
  
  <!-- Included CSS Files (Uncompressed) -->
  <!--
  <link rel="stylesheet" href="stylesheets/foundation.css">
  -->
  
  <!-- Included CSS Files (Compressed) -->
  <link rel="stylesheet" href="stylesheets/foundation.min.css">
  <link rel="stylesheet" href="stylesheets/app.css">
  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
  
  <!-- Header and Nav -->
  
  <div class="row">
    <div class="six columns">
      <h1>Ward <span class="light">Maps</span></h1>
    </div>
    <div class="six columns">
      <ul class="nav-bar right">
        <li><a href="index.php">Index</a></li>
         <li class="has-flyout active"><a href="#">Maps</a>
             <a href="#" class="flyout-toggle"><span> </span></a>
             <ul class="flyout">
                 <li><a href="lgd-map.php">LGD Map</a></li>
                 <li class="active"><a href="ward-map.php">Ward Map</a></li>
            </ul>
         </li>
        <li><a href="help.php">Help</a></li>
        <li><a href="logout.php">Log Out</a></li>
      </ul>
    </div>
    <hr><br><br>
  </div>
  
  <!-- End Header and Nav -->
  
  
  <!-- First Band (Image) -->
    
  <div class="row">
    <div class="twelve columns">
    <p>Click on each tab to view data</p><br>
    </div>
  </div>

  <div class="row">
    <div class="twelve colums">
        <dl class="tabs">
          <dd class="active"><a href="#simple1">Interactive Map</a></dd>
          <dd><a href="#simple2">Interactive Charts</a></dd>
          <dd><a href="#simple3">More Information</a></dd>
        </dl>
        <ul class="tabs-content">
          <li class="active" id="simple1Tab">
              <div class="ten columns">
                  <p>Map showing </p>
              </div>
              <div class="two columns" style="margin-bottom: 20px;">
                  <a href="#" class="secondary button" data-reveal-id="MapModal">Fill Sreen</a>
              </div>
              <div class="twelve columns">
                <iframe id="map-ward" src="maps/ward/atlas.html" style="width:100%; height:900px" frameborder="0"></iframe>
              <hr />
             </div>
          </li>
          <li id="simple2Tab">
              <div class="ten columns">
                    <p><strong>Click F5 to refresh if charts do not load!</strong></p>
                  <div class="twelve columns">
                  <div class="tableauPlaceholder" style="width:900px; height:700px;">
                      <noscript><a href="#"><img alt="" src="http://public.tableausoftware.com/static/images/ni/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011/1_rss.png" style="border: none" /></a>
                      </noscript><object class="tableauViz" width="900" height="700" style="display:none;"><param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" /><param name="tabs" value="yes" /><param name="toolbar" value="yes" /><param name="static_image" value="http://public.tableausoftware.com/static/images/ni/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011/1.png" /><param name="animate_transition" value="yes" /><param name="display_static_image" value="yes" /><param name="display_spinner" value="yes" /><param name="display_overlay" value="yes" /><param name="display_count" value="no" /></object></div><div style="width:900px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;"><div style="float:right; padding-right:8px;"><a href="http://www.tableausoftware.com/public/about-tableau-products?ref=http://public.tableausoftware.com/views/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" target="_blank">Learn About Tableau</a></div></div>
              </div>
                </div>
          </li>
          <li id="simple3Tab">
            <div class="eight columns">
              <h4>Whats on this map?</h4>
              <p>The map shows the location of all icons.</p>
              <p>The map also shows.</p>
            </div>
            <div class="four columns">
              <img src="images/lgd_boundary.png" alt="lgd_boundary" title="Local Government Districts" />
            </div>
          </li>
        </ul>
    </div>
  </div>

  <!-- Third Band (Image Right with Text) -->
  
  <div class="row">
    
  </div>
  
  
  <!-- Footer -->
  
  <footer class="row">
    <div class="twelve columns">
      <hr />
      <div class="row">
        <div class="nine columns">
          <p>&copy; Copyright 2013</p>
        </div>
        <div class="three columns" style="margin-bottom: 20px;">
            <a href="index.html"><img src="images/hsc.jpg" alt="hsc logo"/></a>
        </div>
      </div>
    </div> 
  </footer>

  <!--modal for map fill-->

    <div id="MapModal" class="reveal-modal expand">
        <iframe id="map-ward" src="maps/ward/atlas.html" frameborder="0" width="100%" height="800px"></iframe>
      <a class="close-reveal-modal">&#215;</a>
    </div>


  <!-- Included JS Files (Uncompressed) -->
  <!--
  
  <script src="javascripts/jquery.js"></script>
  
  <script src="javascripts/jquery.foundation.mediaQueryToggle.js"></script>
  
  <script src="javascripts/jquery.foundation.forms.js"></script>
  
  <script src="javascripts/jquery.event.move.js"></script>
  
  <script src="javascripts/jquery.event.swipe.js"></script>
  
  <script src="javascripts/jquery.foundation.reveal.js"></script>
  
  <script src="javascripts/jquery.foundation.orbit.js"></script>
  
  <script src="javascripts/jquery.foundation.navigation.js"></script>
  
  <script src="javascripts/jquery.foundation.buttons.js"></script>
  
  <script src="javascripts/jquery.foundation.tabs.js"></script>
  
  <script src="javascripts/jquery.foundation.tooltips.js"></script>
  
  <script src="javascripts/jquery.foundation.accordion.js"></script>
  
  <script src="javascripts/jquery.placeholder.js"></script>
  
  <script src="javascripts/jquery.foundation.alerts.js"></script>
  
  <script src="javascripts/jquery.foundation.topbar.js"></script>
  
  <script src="javascripts/jquery.foundation.joyride.js"></script>
  
  <script src="javascripts/jquery.foundation.clearing.js"></script>
  
  <script src="javascripts/jquery.foundation.magellan.js"></script>
  
  -->
  

    <script type="text/javascript">
      $(document).ready(function() {
        $("#buttonForModal").click(function() {
          $("#MapModal").reveal();
        });
      });
    </script>


  <!-- Included JS Files (Compressed) -->
  <script src="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  
  <!-- Initialize JS Plugins -->
  <script src="javascripts/app.js"></script>
  <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
</body>
</html>

Hmm, that’s odd… it’s working for me loading the page off my local server… although I did get a JS error complaining about $ being undefined - looks like you’ve got code trying to call jquery before it’s been loaded. Try moving this block:


<script type="text/javascript">
      $(document).ready(function() {
        $("#buttonForModal").click(function() {
          $("#MapModal").reveal();
        });
      });
    </script>

just before </body> tag.
What browser are you using, and are you getting any other console errors?

Yes I noticed this also using firebug testing locally on FF tried IE as well same error.

Certain its the tabs as when I took the

<div class="tableauPlaceholder" style="width:900px; height:700px;">
                      <noscript><a href="#"><img alt="" src="http://public.tableausoftware.com/static/images/ni/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011/1_rss.png" style="border: none" /></a>
                      </noscript><object class="tableauViz" width="900" height="700" style="display:none;"><param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" /><param name="tabs" value="yes" /><param name="toolbar" value="yes" /><param name="static_image" value="http://public.tableausoftware.com/static/images/ni/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011/1.png" /><param name="animate_transition" value="yes" /><param name="display_static_image" value="yes" /><param name="display_spinner" value="yes" /><param name="display_overlay" value="yes" /><param name="display_count" value="no" /></object></div><div style="width:900px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;"><div style="float:right; padding-right:8px;"><a href="http://www.tableausoftware.com/public/about-tableau-products?ref=http://public.tableausoftware.com/views/ni_age_population/Treemapshowing60ofresidentpopulation-Census2011" target="_blank">Learn About Tableau</a></div></div>
              </div>

out of the tab container it works fine…

OK, I’m getting the same problem when I use FF… if I load the page and then switch to the Interactive Charts tab, I get a loading spinner forever. However, if I reload the page then it starts working.

It’s probably something to do with the way that the content of inactive tabs is hidden that prevents the chart from loading properly. I do have a workaround, although it’s a bit hacky I’m afraid:


<script type="text/javascript">
  // Add the five lines below
  $(window).bind( 'hashchange', function(e) {
    if (location.hash === "#simple2") {
      window.tableau.vizs[0].refresh();
    }
  });
  $(document).ready(function() {
    $("#buttonForModal").click(function() {
      $("#MapModal").reveal();
    });
  });
  </script>

It seems a problem with tabs in general - Google maps also causes these issues - http://stackoverflow.com/questions/11819027/loading-google-maps-in-jquery-tab

I’ll try the hack above and again always appreciate your advice - i’ve 6 beers to buy you at this stage!!!

(Even works in IE8 - bonus!!!)

No worries - I’ll look forward to a Guinness if I find myself in your neck of the woods :slight_smile: