Twitter Bootstrap Tabs Using foreach On Opencart

Question

I want change tabs on opencart (admin view) with twitter bootstrap 3.0, the code following :

catalog_form.tpl

 <ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#tab-general" data-toggle="tab"><?php echo $tab_general; ?></a></li>
   <li class=""><a href="#tab-data" data-toggle="tab"><?php echo $tab_data; ?></a></li>
   <li class=""><a href="#tab-design" data-toggle="tab"><?php echo $tab_design; ?></a></li>
</ul>

<div id="myTabContent" class="tab-content">
  <div id="tab-general" class="tab-pane fade active in"> 

  <ul id="languages" class="nav nav-tabs">
    <?php $i = 0; ?>
      <?php foreach ($languages as $language) { ?>
         <li class="<?php if ($i == 0) { echo 'active'; } ?>"> 
            <a href="#language<?php echo $language['language_id']; ?>" data-toggle="tab"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
        </li>
      <?php $i++; } ?>
  </ul>
  <div id="Mylanguages" class="tab-content">
    <?php $a = 0; ?>
    <?php foreach ($languages as $language) { ?>
      <div id="language<?php echo $language['language_id']; ?>" class="tab-pane fade <?php if ($a == 0) { echo 'active'; } ?> in">
      <?php echo $language['language_content']; ?>
      </div>
    <?php $a++; } ?> 
  </div>

  </div>
  <div id="tab-data" class="tab-pane fade">
   ...
  </div>
  <div id="tab-design" class="tab-pane fade">
   ...
  </div>
</div>

Parent tabs (tab-general, tab-data, tab-design) without foreach work perfectly

First reload, language 1 is active tab

When click language 2's tab

• link #language2 tag have selected class
• div tag with id language2 have display block but not have active class
• language 1 li still have active class but language 2 li have not active class.

When I try copy html (via inspect element) and make on jsfiddle (modify content not html tag) it's works perfectly. Jsfiddle

Answer 1

Problem Solved

Just remove default jquery tabs on opencart

<script type="text/javascript"><!--
$('#tabs a').tabs(); 
$('#languages a').tabs();
//--></script> 

This script will you see on template file using language tabs admin/view/template/xxx/xxxx_form.tpl

Answer 2

Dear friend i hope you don't get upset with mentioning some basics in php , this answer might view by others, i have seen you other answers and i know you are geek ;) ...

$languages is an array, and controllers might send it to your web page with the same order and the order will not change the var_dump($languages); of the array is something like this:

    array(2) {
      ["en"]=>
      array(9) {
        ["language_id"]=>
        string(1) "3"
        ["name"]=>
        string(7) "English"
        ["code"]=>
        string(2) "en"
        ["locale"]=>
        string(31) "en_US.UTF-8,en_US,en-gb,english"
        ["image"]=>
        string(6) "en.png"
        ["directory"]=>
        string(7) "english"
        ["filename"]=>
        string(7) "english"
        ["sort_order"]=>
        string(1) "0"
        ["status"]=>
        string(1) "1"
      }
      ["fr"]=>
      array(9) {
        ["language_id"]=>
        string(1) "2"
        ["name"]=>
        string(10) "..."
        ["code"]=>
        string(2) "..."
        ["locale"]=>
        string(31) "..."
        ["image"]=>
        string(6) "..."
        ["directory"]=>
        string(7) "...."
        ["filename"]=>
        string(7) "..."
        ["sort_order"]=>
        string(1) "1"
        ["status"]=>
        string(1) "1"
      }

}

on the other hand, when you click on tabs , the page wouldn't refresh and somehow its not AJAX , so we shouldn't changing our php code.

i think you have changed a little in your php code , maybe this code i have written here work for you ...

<?php foreach ($languages as $language) { ?>
    <li><a href="#language<?php echo $language['language_id']; ?>" data-toggle="tab"><i class="lang-<?php echo str_replace('.png','', $language['image']); ?>" title="<?php echo $language['name']; ?>"></i> <?php echo $language['name']; ?></a></li>
<?php } ?>
</ul>

hope the bests , my dear opencarter ... ;)