current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am currently finalising a simple website for a project I'm working on. I have two tab controls. One on the right of the page, and one on the left. Both have 3 tabs that when clicked display different content. I created one a while ago, and it has worked perfectly, I have recently returned and tried to add a second one. The problem is, when the page loads, the first one works, but the second one loads with all three content areas displayed down the page. Oddly, once I click one of the tabs on the second controller, only that tab is displayed, and the entire control seems to work correctly just like the other one.

I'm sure I have made a stupid error, but I just cant seem to find it. Any help would be massively appreciated.

My code is below:

<div id="graphWrapper">
        <ul class="tabs">
            <li><a href="#" class="defaulttab" rel="tabs1">Daily</a></li>
            <li><a href="#" rel="tabs2">Gender</a></li>
            <li><a href="#" rel="tabs3">Age</a></li>
        </ul>

    <div class="tab-content" id="tabs1">Graph Content 1</div>
    <div class="tab-content" id="tabs2">Graph Content 2</div>
    <div class="tab-content" id="tabs3">Graph Content 3</div>
    </div>

<div id="reportWrapper">
        <ul class="tabs2">
            <li><a href="#" class="defaulttab2" rel2="tabsR1">Report 1</a></li>
            <li><a href="#" rel2="tabsR2">Report 2</a></li>
            <li><a href="#" rel2="tabsR3">Report 3</a></li>
        </ul>

    <div class="tab-content2" id="tabsR1">Report Content 1</div>
    <div class="tab-content2" id="tabsR2">Report Content 2</div>
    <div class="tab-content2" id="tabsR3">Report Content 3</div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script>

        $(document).ready(function() {


            $('.tabs2 a').click(function(){
                switch_tabs2($(this));
            });

            switch_tabs($('.defaulttab'));
            switch_tabs2($('.defaulttab2'));

    });

        function switch_tabs(obj)
        {
        $('.tab-content').hide();
        $('.tabs a').removeClass("selected");
        var id = obj.attr("rel");

        $('#'+id).show();
        obj.addClass("selected");
        chart3.invalidateSize();
        chart4.invalidateSize();
        chart5.invalidateSize();
        }

        function switch_tabs2(obj2)
        {
        $('.tab-content2').hide();
        $('.tabs2 a').removeClass("selected2");
        var id2 = obj2.attr("rel2");

        $('#'+id2).show();
        obj2.addClass("selected2");

        }


    </script>
share|improve this question
    
Please add a jsfiddle –  feitla Jul 19 '13 at 16:00

1 Answer 1

up vote 1 down vote accepted

There is an exception being thrown at chart3.invalidateSize();. This exception prevents switch_tabs2() from ever being invoked.

Uncaught ReferenceError: chart3 is not defined

You can see that an exception is being encountered by using your browser's dev tools:

Hope that helps!

share|improve this answer
    
Removing the .invalidateSize(); does make both work perfectly, do you know how i could invalidate the chart size another way? And why doest this effect the other controller? Thanks –  user2014175 Jul 19 '13 at 16:43
    
As soon as an exception is encountered, javascript ends the current thread of execution. That means no code after the chart3.invalidateSize() call is run at all, which means switch_tabs2() is never invoked. With respect to invalidateSize(), I don't know what you're trying to accomplish there. The DOM elements in your example will automatically resize to fit their content. Perhaps you're using a charting library of some sort which has an invalidateSize() call? Regardless, chart3 was never defined in your example, so you won't be able to call anything on it without having first defined it. –  David Mills Jul 19 '13 at 16:53
    
All fixed! Thanks very much for all your help. I am indeed using amcharts to produce graphs from an sql db ... I had read the documentation on invalidateSize() incorrectly, and have now moved it to its correct position. Its all working perfectly, thanks again! –  user2014175 Jul 19 '13 at 17:12
    
Glad I could help :-) –  David Mills Jul 19 '13 at 18:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.