5 Replies Latest reply on Jun 12, 2012 8:25 AM by Corey Turner

    Why does embedding vizes in hidden containers not work in IE 7-8?

    Corey Turner

      I have some visualizations using trusted authentication embedded into containers (who's display is set to none) and when I change the display to show the content, the vizes aren't rendered properly in IE7 and IE8 and noticed some weird issues in other browsers.

       

      If you are wondering why I am embedding vizes into hidden containers here is why: JQuery UI accordion's and tab's content containers (that are not not selected) are hidden. So If I have a viz embedded into tab #2 on page load tab #2's content is hidden because tab #1 is selected by default. If I simply set the default tab to #2 the viz renders properly, but this is not an acceptable solution because I have multiple tabs/accordion contents with vizes.

       

      Anyone know of a workaround besides loading content via ajax? Any help would be much appreciated! Thanks.

       

      Corey

        • 1. Re: Why does embedding vizes in hidden containers not work in IE 7-8?
          Russell Christopher

          Hey Corey -

           

          Couple of questions for you:

           

          • Please define "aren't rendered properly". Screenshots would be awesome
          • Please define weird issues in other browsers - which other browsers? Same behavior as in IE or different?
          • How are you doing your embedding? Plugging a URL into a iframe's src, or using <object> embedding
          • If you're using the latter, have you used the javascript api to .refresh the viz? Does it make a difference?
          • How does the accordian actually show/hide stuff? Is it just changing the CSS display: property between block and none or something? What happens when you try the same thing yourself?
          • 2. Re: Why does embedding vizes in hidden containers not work in IE 7-8?
            Corey Turner

            Russell,

             

            Here are some more details...

             

            Aren't rendered properly:  The viz will only load parts of filters and legends. The content of the chart or graph is missing.

             

            jQuery accordions and tabs show/hide stuff by just changing the display from block to none. The following issues I replicated by just using: <div style="display:none"> iframe or object </div> and switching the display to block after page load

             

            Weird Issues:

             

                 When using iframe to embed:

                      IE 7-9: only parameter titles would show and arrows for quick filters (http://i.imgur.com/ITTuz.jpg)

                      Firefox: javascript error from .../vizql/v_70001202151930/javascripts/dodo.js

                       Chrome: Quick filters wouldn't show (http://i.imgur.com/DY29F.jpg)

             

                 When using object to embed:

                      IE 7-9: only toolbar will show (http://i.imgur.com/EUryR.jpg)

                      Firefox: same issue as using iframe

                      Chrome: same issue as using iframe

             

            I could solve these problems by utilizing the javascript api, although I am declaring my iframes server-side (because we need to have dynamic url parameters for the particular viz) so I am having trouble accessing elements in the window.tableau.vizs array. It is empty when I load iframes or objects server-side, but works fine when I have a static embedded viz.

             

            Thanks for your help!

            • 3. Re: Why does embedding vizes in hidden containers not work in IE 7-8?
              Russell Christopher

              Hi Corey -

               

              I played around with this, and am seeing "same-ish" behavior, at least in FireFox. And if I see it there, I'm sure there are other lovely surprises in IE and something in Chrome, too.

               

              I found that as long as the accordion "set" is visible when we play, all is well. When it is hidden, rendering / refreshing, re-setting the .location on the iframe don't go very well.

               

              I'm far, far, far from a js/ajax/jquery expert (I have delusions of being adequate some day) but I bet the code in viz1.js and elsewhere wasn't really written with some of these scenarios in mind.

               

              Our guys are in the process of reviewing how some of this works for the next version of Server, so now would be a really good time to open a support case so we can get a bug logged. I'll log one of "my" examples, but I expect they're different than yours. If you wouldn't mind opening up a case with support@tableausoftware.com, I think it would be valuable to get your scenarios "in there", too.

               

              Sorry I can't give you more

              1 of 1 people found this helpful
              • 4. Re: Why does embedding vizes in hidden containers not work in IE 7-8?
                Russell Christopher

                Great workaround, Corey. It's a pity that we have to refresh as the content is exposed - it would be much nicer to have it there ready and waiting for us - but it is what it is.

                 

                FYI, not 4-5 days ago I created a bug about your "note" - that the ticket becomes part of the viz._baseUrl: We should have some sort of mechanism to easily refresh the ticket inside that string vs. having to write a function to do the work.

                • 5. Re: Why does embedding vizes in hidden containers not work in IE 7-8?
                  Corey Turner

                  Cool! That would be helpful. Thanks again Russell.