JangoSteve / jQuery-EasyTabs

Easy and flexible jQuery tabbed functionality without all the styling.
http://www.alfajango.com/blog/jquery-easytabs-plugin/
549 stars 203 forks source link

Ajax page not working fine at first load in easytabs #87

Open benedict-erwin opened 11 years ago

benedict-erwin commented 11 years ago

I still have problem when load ajax page that contain another jquery plugins/js like jtable or datepicker. This is sample of my code in main_page.php:

<!-- Load dhtmlGoodiesCalendar -->
    <link type="text/css" rel="stylesheet" href="../libs/js/dhtmlgoodies_calendar/dhtmlgoodies_calendar/dhtmlgoodies_calendar.css" media="screen"></link>
    <script type="text/javascript" src="../libs/js/dhtmlgoodies_calendar/dhtmlgoodies_calendar/dhtmlgoodies_calendar.js"></script>
<!-- End -->

<!-- jQueryMin.1.8.1 Library -->
    <script type ="text/javascript" src="libs/jQuery/jQueryMin.1.8.1/jquery.min.js"></script>
<!-- End -->

<!-- Load jTable's themes dependencies -->
    <link href="../libs/jQuery/jtable.2.2.0/themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="../libs/jQuery/jtable.2.2.0/scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />
<!-- End -->

<!-- Load jTable's dependencies -->
    <script src="../libs/jQuery/jtable.2.2.0/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="../libs/jQuery/jtable.2.2.0/scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
<!-- End -->

<!-- Load EasyTabs -->
    <script src="../libs/jQuery/easy-tabs/vendor/jquery.hashchange.min.js" type="text/javascript"></script>
    <script src="../libs/jQuery/easy-tabs/lib/jquery.easytabs.js" type="text/javascript"></script>
<!-- End -->

<body>

    <!-- EasyTabs here... !-->  

    <div id="ajax-tab-container" class='tab-container'>
        <ul class='tabs'>
         <li class='tab'><a href="page1.php" data-target="#tabs-fo-online">FO Online</a></li>
         <li class='tab'><a href="page2.php" data-target="#tabs-tpk-browse">Browse</a></li>
         <li class='tab'><a href="page3.php" data-target="#tabs-tpk-laporan">Laporan</a></li>
         <li class='tab'><a href="page4.php" data-target="#tabs-tpk-grafik">Grafik</a></li>
        </ul>
        <div class='panel-container'>
            <div id="tabs-fo-online"></div>
            <div id="tabs-tpk-browse"></div>
            <div id="tabs-tpk-laporan"></div>
            <div id="tabs-tpk-grafik"></div>
        </div>
    </div>
    <!-- End !-->

</body>
<script type="text/javascript">
$(document).ready(function(){
  $('#ajax-tab-container').easytabs({
        uiTabs: true,
        animate: false,
        cache: false
    });
});

</script>

In every page (page1.php - page4.php) contain jquery plugins. At the first time load, first tab working fine, all of jquery plugins works fine too. But after I clicked next another tabs, all of jquery plugins cannot load / not working fine.

NB: I only load all of the required jquery, js, and css at this page main_page.php (page that contain tabs), not load in every page (page1.php - page4.php)

Maybe can anyone help me, I'm new in jquery. Thanks.

Avemaar commented 10 years ago

oh my godness having the same error and noone answered yet. If you refresh the tap page(F5) than i am sure its work fine