Troubles with .load() and tabs

Question

First of all, I'm quite new with coding but I'm doing my best to learn by myself. I'm thanking you for your help and guidance in advance. I have several questions, I don't know if I should create several discussions or not, so tell me if I should split this post.

I'm trying to build a table with multiple tabs. Once it's done, I'd like to fill it automatically from json file (this is not the problem but I prefer to notice you if that changes anything for the solution you'll bring to me for my problems). Since I'm still learning at the moment, I don't want to use stuff like DataTables or others, I'd like to hard code everything (I use jquery/ui though).

Right now, I'm trying to code some tabs for my table. In the idea that would be some Excel like tabs which switch tables.

I've been able to build some thanks to ajax .load() but I'm having some sockets issues. The more I switch tabs, the laggier it gets, until the point where the console states "WebSocket connection to 'ws://127.0.0.1:5500//ws' failed: Insufficient resources". I think i understand that's because each time I click tabs, it stacks more datas, but I don't know how to solve this. Can anyone explain to me how to optimize this and why is that happening ?
Doing the way I am at the moment, I'm not succeeding to load the tab1 the way I want. The point is that each file loads on the page dynamically, using the js file. But when I load the #content of the index by clicking the Tab 1 link, JS doesn't apply (it does for the other tabs though). Am I chosing the right option for what I want to do ? If so, how can I solve my problem ? I'v tried many things like using $("body").load("url"); instead of $("#content").load("url"); but if I do so, I have to copy paste the intro and the nav to each other tab.html and that doesn't seem the right way to do it.
Especially since I'd like to have the active tab highlighted, which seems easier if the nav doesn't change. But I haven't manage to highlight the active tab. Any tip would be great !

Now here's my code : HTML :





    
    
    
    Devis ouin ouin in OOTW 12
    
    
    
    



    
        description du devis par exemple...
    
    
        
            
                
                        Co
Ex
                        V
M8
                        cd
M1
                        N°
M2
                        Désignation
M4
                        Uté
M7
                        Qté 
M9
                        PR Fourniture unitaire
M18
                        Type FO
M20
                        K Acc
M14
                        PR Total fourniture
M19
                        Tps pose unitaire
M23
                        Type MO
M26
                        K Pose
M22
                        Tps pose total
M42
                        PR unitaire
M40
                        PR Total
M41
                        qte vendue
M27
                        PV unitaire
M32
                        PV Total
M44
                
                
                        
                            -
                            
                            1
                            A
                            Titre 1, n'appartient à personne
                            ens
                            1
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            -
                            
                            2
                            A.1
                            Titre 2 - la ligne doit appartenir au titre niveau 1, N°A ci-dessus
                            ens
                            1
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            
                            
                            5
                            
                            cette ligne "terminale" doit appartenir au titre niveau 2, N°A.1 ci-dessus
                            
                            km
                            6
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            
                            
                            8
                            
                            cette ligne doit aussi appartenir au titre niveau 2, N°A.1 ci-dessus
                            m
                            10,5
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            -
                            
                            1
                            B
                            un autre Titre 1, n'appartient à personne
                            ens
                            1
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            -
                            
                            2
                            B.1
                            Titre 2 - la ligne doit appartenir au titre niveau 1, N°B ci-dessus
                            ens
                            1
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            -
                            
                            3
                            B.1.1
                            Titre 3 - la ligne doit appartenir au titre niveau 2, N°B.1 ci-dessus
                            ens
                            1
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            
                            
                            7
                            
                            cette ligne "terminale" doit appartenir au titre niveau 3, N°B.1.1 ci-dessus
                            
                            kg
                            2
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            
                            
                            9
                            
                            cette ligne doit aussi appartenir au titre niveau 3, N°B.1.1 ci-dessus
                            m
                            10,5
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                        
                            
                            
                            3
                            B.1.2
                            Titre 3 - la ligne doit appartenir au titre niveau 2, N°B.1 ci-dessus
                            ens
                            1
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        
                
            
        
    
        
            Feuille 1
            Feuille 2
            Feuille 3

JS

$(document).ready(function()
{
// Define color depending on the M1 cell value //
    var rows = document.getElementsByTagName("tbody")
        [0].getElementsByTagName("tr");

    // Loops through each row
    for (i = 0; i < rows.length; i++) 
    {
        cells = rows[i].getElementsByTagName('td');
        
        type_M1 = parseInt(cells[2].innerHTML);
        if(type_M1>=1 && type_M1<=9)
            $(cells).parent().addClass('Titre_'+cells[2].innerHTML); 
    }

// Expand/collapse when clicking on first column //
    function getChildren($row) 
    {
        var children = [], level = $row.attr('data-level');
        while($row.next().attr('data-level') > level) 
        {
            children.push($row.next());
            $row = $row.next();
        }            
        return children;
    }   

    $('.colex').on('click', function() 
    {
        var action;
        if($(this).parent('.parent').hasClass('collapsed')) 
        {
            $(this).parent('.parent').removeClass('collapsed');
            $(this).text('-');
            action = 'show';
            console.log('1'+$(this).parent().attr('class'));
        }
        else if(!$(this).parent('.parent').hasClass('collapsed') && !$(this).parent().hasClass('child'))
        {
            $(this).parent('.parent').addClass('collapsed');
            $(this).text('+');
           action = 'hide';
           console.log('2'+$(this).parent().attr('class'));
            
        }
            
        var level = $(this).parent('.parent').attr('data-level');
        var children = getChildren($(this).parent('.parent'));
        $.each(children, function() 
        {
            if(action == "show") 
            {              
                if ($(this).attr('data-level')==parseInt(level)+1 || $(this).hasClass('hidden')===false) 
                {
                    // Un-hide direct children, and not hidden sub-children //
                    $(this).removeClass('hidden').show();
                }
            }
            else
            {                    
                if ($(this).attr('data-level')==parseInt(level)+1) 
                {
                    // Apply hidden to direct children //
                    $(this).addClass('hidden');
                }
                // Hide all children //
                $(this).hide();
            }
        });
    });

// Make the table tabable setting a tabindex for each cell //
    $('td:visible').each(function() {               
        $(this).attr('tabindex', '0');
    });

// Highlight where we are with click //
    var getInfo = {
        init: function() {
            $(document).ready( function() {
                getInfo.click();
            });
        },
        click: function() {
            var table = document.getElementById("mytable");
            var cells = table.getElementsByTagName("td");
            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];
                cell.onclick = function() {
                    // Remove previous highlight //
                    document.querySelectorAll('.highlight').forEach(col => col.classList.remove('highlight'));
                    document.querySelectorAll('.highlight-rc').forEach(col => col.classList.remove('highlight-rc'));
                    if(!$(this).hasClass('colex') && !$(this).find('input').hasClass('variante'))
                    {
                        // Highlight column //
                        const parentTds = this.parentElement.children;
                        const clickedTdIndex = [...parentTds].findIndex(td => td == this);
                        const columns = document.querySelectorAll(`td:nth-child(${clickedTdIndex+1})`);
                        columns.forEach(col => {
                            col.classList.add('highlight-rc');
                        // Highlight cell and row //
                        $(this).addClass('highlight');
                        $(this).parent().addClass('highlight-rc');
                        });
                    }
                };
            }
        }
    };
    
    getInfo.init();

// Navigate with arrows //
    var currCell = $('td').first();
    var editing = false;

    // User clicks on a cell //
    $('td').click(function() {
        currCell = $(this);
        // edit(); //
    }); 

    // User navigates table using keyboard //
    $('#mytable tbody').keydown(function(e) {
        var c = "";
        // Function to make highlight follow the navigation //
        function highlight() {
            document.querySelectorAll('.highlight-rc').forEach(col => col.classList.remove('highlight-rc'));
            currCell.removeClass('highlight');
            var navIndex = $(c).index();
            const columns = document.querySelectorAll(`td:nth-child(${navIndex+1})`);
            columns.forEach(col => {
                col.classList.add('highlight-rc');
            c.addClass('highlight');  
            c.parent().addClass('highlight-rc'); 
            })
        }
        if (e.which == 39) 
        {
            // Right Arrow //
            c = currCell.next();
            highlight();
        } 
        else if (e.which == 37) 
        { 
            // Left Arrow //
            c = currCell.prev();
            if ($(c).find('input').hasClass('variante'))
            {
                c = currCell;
                highlight();
            }
            else
            {
            highlight();
            }
        } 
        else if (e.which == 38) 
        { 
            // Up Arrow //
            c = currCell.closest('tr').prev().find('td:eq(' + 
              currCell.index() + ')');
              highlight();  
        } 
        else if (e.which == 40) 
        { 
            // Down Arrow //
            c = currCell.closest('tr').next().find('td:eq(' + 
              currCell.index() + ')');
              highlight(); 
        /* else if (!editing && (e.which == 13 || e.which == 32)) 
        { 
            // Enter or Spacebar - edit cell
            e.preventDefault();
            edit();*/
        } 
        else if (!editing && (e.which == 9 && !e.shiftKey)) 
        { 
            // Tab //
            e.preventDefault();
            c = currCell.next();
            highlight();
        } 
        else if (!editing && (e.which == 9 && e.shiftKey)) 
        { 
            // Shift + Tab //
            e.preventDefault();
            c = currCell.prev();
            if ($(c).find('input').hasClass('variante'))
            {
                c = currCell;
                highlight();
            }
            else
            {
            highlight();
            }
        } 
        
        // If we didn't hit a boundary, update the current cell //
        if (c.length > 0) 
        {
            currCell = c;
            currCell.focus();
        }
    });

// Navigation tabs //
        $(function(){
    $("#Tab1").click(function(e){
        e.preventDefault(); 
        $("#mytable").load("../ajax/tab1.html", function() {
            // do stuff when new HTML is loaded in `document.body`
            // for example, load CSS
            $.when($.getScript("../voctor.js"), $.get("../css/style.css"))
            .then(function() {
              // do stuff when script and CSS is loaded
            })
          });
    });
});

$(function(){
    $("#Tab2").click(function(e){
        e.preventDefault(); 
        $("#mytable").load("../ajax/tab2.html", function() {
            // do stuff when new HTML is loaded in `document.body`
            // for example, load CSS
            $.when($.getScript("../voctor.js"), $.get("../css/style.css"))
            .then(function() {
              // do stuff when script and CSS is loaded
            })
          });
    });
});

$(function(){
    $("#Tab3").click(function(e){
        e.preventDefault();
        $("#mytable").load("../ajax/tab3.html", function() {
            // do stuff when new HTML is loaded in `document.body`
            // for example, load CSS
            $.when($.getScript("../voctor.js"), $.get("../css/style.css"))
            .then(function() {
              // do stuff when script and CSS is loaded
            })
          });
    });
});

And here's the JSFiddle. Links in the tabs don't work since I use external files but that might help to get an idea.

Once again thanks a lot for your help in advance. Sincerely,

Troubles with .load() and tabs

0 Answers