Unable to make bootstrap tab works when dynamically generated

user_13940311 0
Viewed 277

I'm trying to make a nav-tabs by using bootstrap and generate it dynamically with data get from the API.

After i get the data i make all .appends where i create the dom elements, i've set all attributes to tabs correctly but when i click on another nav item which should change tab content it set the "SHOW" to the first tab and the active remains on the last nav, then it just breaks and stop working...

The nav has a first tab which is static and other dynamic, here is my function which append the static and dynamic items to nav and the tab-content:

var menu = [
  {
    id: "001",
    desc: "Frutta",
    plu: [
      {
        id: "123",
        desc: "Mela verde",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2.1,
      },
      {
        id: "234",
        desc: "Mela Rossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2,
      },
      {
        id: "456",
        desc: "Mela Siciliana",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1,
      },
      {
        id: "111",
        desc: "Mela Speciale",
        img: "assets/img/melerosse.jpeg",
        prezzo: 5,
      },
      {
        id: "222",
        desc: "Mela Grossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 3,
      },
      {
        id: "2341",
        desc: "Mela",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1.5,
      },
    ],
  },
  {
    id: "002",
    desc: "Verdura",
    plu: [
      {
        id: "222",
        desc: "Zucca",
        img: "assets/img/verdure.jpg",
        prezzo: 3,
      },
      {
        id: "222",
        desc: "Pomodoro",
        img: "assets/img/verdure.jpg",
        prezzo: 4,
      },
      {
        id: "222",
        desc: "Patate",
        img: "assets/img/verdure.jpg",
        prezzo: 3.1,
      },
      {
        id: "222",
        desc: "Zucchina",
        img: "assets/img/verdure.jpg",
        prezzo: 1.99,
      },
    ],
  },
];
function loadMenu(menu) {
  var nav = $(".menu .nav");
  var tasti = $(".tasti .tab-content");
  var cerca = $("<a>", { class: "flex-sm-fill text-sm-center nav-link" })
    .attr("data-toggle", "pill")
    .attr("href", "#cerca")
    .attr("aria-controls", "cerca")
    .attr("role", "tab")
    .attr("aria-selected", "false")
    .append($("<i>", { class: "fi-rs-search" }));

  var tabcerca = $("<div>", { class: "tab-pane" })
    .attr("id", "cerca")
    .attr("role", "tabpanel")
    .append(
      $("<div>", { class: "input-group mb-3" }).append(
        $("<input>", {
          class: "form-control virtual-keyboard",
        })
          .on("click", function () {
            KioskBoard.Run(".virtual-keyboard");
            $(this).focus();
          })
          .attr("type", "text")
          .attr("readonly", "readonly")
          .attr("data-kioskboard-type", "all")
          .attr("data-kioskboard-specialcharacters", "false"),
        $("<div>", { class: "input-group-append" }).append(
          $("<button>", { class: "btn btn-primary" })
            .attr("type", "button")
            .attr("data-trans", "cerca")
            .text("Cerca")
            .on("click", function () {})
        )
      )
    );
  nav.append(cerca);
  tasti.append(tabcerca);
  menu.forEach((menu) => {
    nav.append(
      $("<a>", { class: "flex-sm-fill text-sm-center nav-link" })
        .attr("data-toggle", "pill")
        .attr("href", `#${menu.id}`)
        .attr("aria-controls", menu.id)
        .attr("role", "tab")
        .attr("aria-selected", "false")
        .text(menu.desc)
    );

    tasti.append(
      $("<div>", { class: "tab-pane" })
        .attr("id", menu.id)
        .attr("role", "tabpanel")
        .append(
          $("<div>", { class: "row row-cols-4" }).append(
            menu.plu.map((plu) => {
              return $("<div>", { class: "col-auto" }).append(
                $("<div>", { class: "articolo" })
                  .append(
                    $("<img>").attr("src", plu.img),
                    $("<div>", { class: "desc" }).append(
                      $("<h4>").text(plu.desc)
                    )
                  )
                  .data("prezzo", plu.prezzo)
                  .on("click", function () {
                    addProdotto({
                      desc: plu.desc,
                      qta: "1",
                      prezzo: plu.prezzo,
                    });
                  })
              );
            })
          )
        )
    );
  });

  $(`a[href$="#${menu[0].id}"]`).tab("show").tab("show");
  $(`#${menu[0].id}`).addClass("show active");
}

loadMenu(menu);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <div class="menu">
        <nav class="nav-scroller mb-2">
          <div
            class="nav nav-pills flex-column flex-sm-row"
            role="tablist"
          ></div>
        </nav>
      </div>
      <div class="tasti">
        <div class="tab-content"></div>
      </div>

bootstrap-4 twitter-bootstrap html jquery javascript
1 Answers

I didn't find anything wrong in your code . But , id with numbers i.e : 001,002..etc are not working so i just attach some text with ids when adding attributes i.e : tab_yourmenuid and it started working .

Demo Code:

var menu = [{
    id: "001",
    desc: "Frutta",
    plu: [{
        id: "123",
        desc: "Mela verde",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2.1,
      },
      {
        id: "234",
        desc: "Mela Rossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 2,
      },
      {
        id: "456",
        desc: "Mela Siciliana",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1,
      },
      {
        id: "111",
        desc: "Mela Speciale",
        img: "assets/img/melerosse.jpeg",
        prezzo: 5,
      },
      {
        id: "222",
        desc: "Mela Grossa",
        img: "assets/img/melerosse.jpeg",
        prezzo: 3,
      },
      {
        id: "2341",
        desc: "Mela",
        img: "assets/img/melerosse.jpeg",
        prezzo: 1.5,
      },
    ],
  },
  {
    id: "002",
    desc: "Verdura",
    plu: [{
        id: "222",
        desc: "Zucca",
        img: "assets/img/verdure.jpg",
        prezzo: 3,
      },
      {
        id: "222",
        desc: "Pomodoro",
        img: "assets/img/verdure.jpg",
        prezzo: 4,
      },
      {
        id: "222",
        desc: "Patate",
        img: "assets/img/verdure.jpg",
        prezzo: 3.1,
      },
      {
        id: "222",
        desc: "Zucchina",
        img: "assets/img/verdure.jpg",
        prezzo: 1.99,
      },
    ],
  },
];

function loadMenu(menu) {
  var nav = $(".menu .nav");
  var tasti = $(".tasti .tab-content");
  var cerca = $("<a>", {
      class: "flex-sm-fill text-sm-center nav-link"
    })
    .attr("data-toggle", "pill")
    .attr("href", "#cerca")
    .attr("aria-controls", "cerca")
    .attr("role", "tab")
    .attr("aria-selected", "false")
    .append($("<i>", {
      class: "fi-rs-search"
    }));

  var tabcerca = $("<div>", {
      class: "tab-pane"
    })
    .attr("id", "cerca")
    .attr("role", "tabpanel")
    .append(
      $("<div>", {
        class: "input-group mb-3"
      }).append(
        $("<input>", {
          class: "form-control virtual-keyboard",
        })
        .on("click", function() {
          KioskBoard.Run(".virtual-keyboard");
          $(this).focus();
        })
        .attr("type", "text")
        .attr("readonly", "readonly")
        .attr("data-kioskboard-type", "all")
        .attr("data-kioskboard-specialcharacters", "false"),
        $("<div>", {
          class: "input-group-append"
        }).append(
          $("<button>", {
            class: "btn btn-primary"
          })
          .attr("type", "button")
          .attr("data-trans", "cerca")
          .text("Cerca")
          .on("click", function() {})
        )
      )
    );
  nav.append(cerca);
  tasti.append(tabcerca);
  menu.forEach((menu) => {
    nav.append(
      $("<a>", {
        class: "flex-sm-fill text-sm-center nav-link"
      })
      .attr("data-toggle", "pill")
      .attr("href", `#tab_${menu.id}`) //added text
      .attr("aria-controls", "tab_" + menu.id) //added text
      .attr("role", "tab")
      .attr("aria-selected", "false")
      .text(menu.desc)
    );

    tasti.append(
      $("<div>", {
        class: "tab-pane"
      })
      .attr("id", "tab_" + menu.id) //added text
      .attr("role", "tabpanel")
      .append(
        $("<div>", {
          class: "row row-cols-4"
        }).append(
          menu.plu.map((plu) => {
            return $("<div>", {
              class: "col-auto"
            }).append(
              $("<div>", {
                class: "articolo"
              })
              .append(
                $("<img>").attr("src", plu.img),
                $("<div>", {
                  class: "desc"
                }).append(
                  $("<h4>").text(plu.desc)
                )
              )
              .data("prezzo", plu.prezzo)
              .on("click", function() {
                addProdotto({
                  desc: plu.desc,
                  qta: "1",
                  prezzo: plu.prezzo,
                });
              })
            );
          })
        )
      )
    );
  });

  $(`a[href$="#tab_${menu[0].id}"]`).tab("show").tab("show");
  $(`#tab_${menu[0].id}`).addClass("show active");
}


loadMenu(menu);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="menu">
  <nav class="nav-scroller mb-2">
    <div class="nav nav-pills flex-column flex-sm-row" role="tablist"></div>
  </nav>
</div>
<div class="tasti">
  <div class="tab-content"></div>
</div>

user_106064000
Related