Replace boostrap/jquery tab with alpine js tab in Display::tabs

assets/js/app.js

@@ -315,13 +315,13 @@ $(function () {
   // });
 
   // Bootstrap tabs.
-  $('.tab_wrapper .nav a').on('click', function (e) {
+  /*$('.tab_wrapper .nav a').on('click', function (e) {
     e.preventDefault()
     $(this).tab('show')
-  });
+  });*/
 
   // Fixes bug when loading links inside a tab.
-  $('.tab_wrapper .tab-pane a').unbind();
+  //$('.tab_wrapper .tab-pane a').unbind();
 
   /**
      * Advanced options

public/main/inc/lib/display.lib.php

@@ -1077,7 +1077,7 @@ class Display
         $ul_attributes = [],
         $selected = ''
     ) {
-        if (empty($headers) || 0 == count($headers)) {
+        if (empty($headers) || 0 === count($headers)) {
             return '';
         }
 
@@ -1100,8 +1100,9 @@ class Display
                 'a',
                 $item,
                 [
-                    'href' => '#'.$id.'-'.$i,
+                    //'href' => '#'.$id.'-'.$i,
                     'class' => 'nav-item nav-link '.$active,
+                    '@click' => "openTab =  $i",
                     'id' => $id.$i.'-tab',
                     'data-toggle' => 'tab',
                     'role' => 'tab',
@@ -1117,7 +1118,7 @@ class Display
             'nav',
             $lis,
             [
-                'id' => 'ul_'.$id,
+                'id' => 'nav_'.$id,
                 'class' => 'nav nav-tabs',
                 'role' => 'tablist',
             ]
@@ -1143,21 +1144,23 @@ class Display
                 $content,
                 [
                     'id' => $id.'-'.$i,
-                    'class' => 'tab-pane fade '.$active,
-                    'role' => 'tabpanel',
-                    'aria-labelledby' => $id.$i.'-tab',
+                    'x-show' => "openTab === $i"
+                    //'class' => 'tab-pane fade '.$active,
+                    //'role' => 'tabpanel',
+                    //'aria-labelledby' => $id.$i.'-tab',
                 ]
             );
             $i++;
         }
 
-        $attributes['id'] = $id;
+        $attributes['id'] = ''.$id;
         $attributes['class'] = 'tab_wrapper ';
+        $attributes['x-data'] = ' { openTab: 1 } ';
 
         return self::tag(
             'div',
             $ul.
-            self::tag('div', $divs, ['class' => 'tab-content']),
+            $divs,
             $attributes
         );
     }

public/main/lp/learnpath.class.php

@@ -4557,7 +4557,6 @@ class learnpath
                         },
                     });
                 });
-
             });
         </script>';
 
@@ -4583,12 +4582,13 @@ class learnpath
 
             $(function () {
                 //$('.scrollbar-inner').scrollbar();
-                $('#subtab').on('click', 'a:first', function() {
+                /*$('#subtab').on('click', 'a:first', function() {
                     window.location.reload();
                 });
                 $('#subtab ').on('click', 'a:first', function () {
                     window.location.reload();
-                });
+                });*/
+                
                 expandColumnToggle('#hide_bar_template', {
                     selector: '#lp_sidebar'
                 }, {
@@ -4614,17 +4614,16 @@ class learnpath
             });
 
             // document template for new document tab handler
-            $(document).on('shown.bs.tab', 'a[data-toggle=\"tab\"]', function (e) {
+            /*$(document).on('shown.bs.tab', 'a[data-toggle=\"tab\"]', function (e) {
                 var id = e.target.id;
                 if (id == 'subtab2') {
                     $('#frmModel').show();
                 } else {
                     $('#frmModel').hide();
                 }
-            });
+            });*/
 
           function deleteItem(event) {
-          console.log($(event));
             var id = $(event).attr('data-id');
             var title = $(event).attr('data-title');
             var params = '&a=delete_item&id=' + id;
@@ -6139,10 +6138,10 @@ class learnpath
                 }
 
                 var cbo = document.getElementById('previous');
+                if (cbo) {
                     for(var i = cbo.length - 1; i > 0; i--) {
                         cbo.options[i] = null;
                     }                    
-
                     var k=0;
                     for (var i = 1; i <= child_name[id].length; i++){
                         var option = new Option(child_name[id][i - 1], child_value[id][i - 1]);
@@ -6150,8 +6149,9 @@ class learnpath
                         cbo.options[i] = option;
                         k = i;
                     }    
-
                     cbo.options[k].selected = true;
+                }
+
                 //$('#previous').selectpicker('refresh');
             }";
 

public/main/lp/lp_add_item.php

@@ -43,41 +43,15 @@ if ($learnPath->get_lp_session_id() != api_get_session_id()) {
 }
 
 $htmlHeadXtra[] = '<script>'.$learnPath->get_js_dropdown_array()."
-function load_cbo(id, previousId) {
-    if (!id) {
-        return false;
-    }
-
-    previousId = previousId || 'previous';
-
-    var cbo = document.getElementById(previousId);
-
-    if (cbo) {
-        for (var i = cbo.length - 1; i > 0; i--) {
-            cbo.options[i] = null;
-        }
-        var k=0;
-        for (var i = 1; i <= child_name[id].length; i++){
-            var option = new Option(child_name[id][i - 1], child_value[id][i - 1]);
-            option.style.paddingLeft = '40px';
-            cbo.options[i] = option;
-            k = i;
-        }
-
-        cbo.options[k].selected = true;
-    }
-
-    //$('#' + previousId).selectpicker('refresh');
-}
-
 $(function() {        
     if ($('#previous')) {
         if('parent is'+$('#idParent').val()) {
             load_cbo($('#idParent').val());
         }
     }
+    
     $('.lp_resource_element').click(function() {
-        window.location.href = $('a', this).attr('href');
+        //window.location.href = $('a', this).attr('href');
     });
     /*CKEDITOR.on('instanceReady', function (e) {
         showTemplates('content_lp');