Dynamic generation causing Bootstrap tabs to malfunction

I have incorporated a bootstrap tab on my website, which is generated dynamically through ajax requests.

While testing the static version of these tabs, everything was functioning perfectly. However, now that I am generating all tabs and panes dynamically, clicking on the tab does not set the 'show' attribute for its corresponding pane.

Since the content is added dynamically, the onclick event is created using .on('click', 'a'..)

Below is the code snippet...

I cannot seem to pinpoint what I am doing wrong in the generation process as the dynamic code mirrors the static one:

$('#tab').on('click', 'a', function(e) {
  e.preventDefault()
  $(this).tab('show');
})
...
javascripthtmljquerycssbootstrap-4

Answer №1

It seems likely that the issue stems from the bootstrap event handlers not being properly attached due to the tabs being generated via ajax requests.

I experimented with the JavaScript in your provided code sample and was able to make the tabs switch successfully. I hope this solution resolves your problem!

$('#tab').on('click', 'a', function(e) {
  dataId = $(this).data('id');
  $("[id$='-tab']").hide();
  $('#'+dataId+'-tab').show();
  e.preventDefault();
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<nav class="nav-scroller py-1 pb-1 mb-2">
  <div class="nav nav-tabs d-flex justify-content-between" id="tab" role="tablist">
    <a class="nav-item p-2 text-muted menu active" id="4-men" href="#4-tab" data-toggle="tab" role="tab" aria-controls="4-tab" aria-selected="true" data-id="4">RINFESCHI</a><a class="nav-item p-2 text-muted menu" id="12-men" href="#12-tab" data-toggle="tab"
      role="tab" aria-controls="12-tab" aria-selected="false" data-id="12">PRALINERIA</a><a class="nav-item p-2 text-muted menu" id="13-men" href="#13-tab" data-toggle="tab" role="tab" aria-controls="13-tab" aria-selected="false" data-id="13">CONFEZIONI</a>
    <a
      class="nav-item p-2 text-muted menu" id="14-men" href="#14-tab" data-toggle="tab" role="tab" aria-controls="14-tab" aria-selected="false" data-id="14">MENU 010</a><a class="nav-item p-2 text-muted menu" id="15-men" href="#15-tab" data-toggle="tab" role="tab" aria-controls="15-tab" aria-selected="false" data-id="15">STAGIONALI</a><a class="nav-item p-2 text-muted menu" id="17-men" href="#17-tab"
        data-toggle="tab" role="tab" aria-controls="17-tab" aria-selected="false" data-id="17">ACCONTO </a><a class="nav-item p-2 text-muted menu" id="18-men" href="#18-tab" data-toggle="tab" role="tab" aria-controls="18-tab" aria-selected="false" data-id="18">INGROSSO</a>
      <a
        class="nav-item p-2 text-muted menu" id="19-men" href="#19-tab" data-toggle="tab" role="tab" aria-controls="19-tab" aria-selected="false" data-id="19">VINI</a><a class="nav-item p-2 text-muted menu" id="20-men" href="#20-tab" data-toggle="tab" role="tab" aria-controls="20-tab" aria-selected="false" data-id="20">CAFFETTERIA</a>
  </div>
</nav>
<div class="tab-content">
  <div class="tab-pane fade show active" id="4-tab" role="tabpanel" aria-labelledby="4-men">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">PIZZE </h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€20,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">902</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€2,00</h2>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
        <div class="card card-product" data-toggle="modal" data-target="#modalProduct">
          <img class="card-img-top img-fluid d-none" src="">
          <div class="card-body">
            <h3 class="card-title mb-0">903</h3>
            <p class="card-text"></p>
            <h2 class="text-right text-success price">€3,00</h2>
          </div>
        </div>
      </div>
      <!-- Additional cards removed for brevity -->
    </div>
  </div>
  <!-- Placeholder tab content removed for brevity -->
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Access Denied (CSRF token not found or invalid) - despite being present

Despite including a csrf_token, I keep experiencing the error mentioned above. I have successfully used the same csrfmiddlewaretoken for my other ajax calls without any issues, but for some reason, I'm encountering a forbidden error in this case. Any ...

javascriptjquerypythonajaxdjango

Using React.js - What is the process for submitting a form automatically when the page loads?

Upon loading the page, I have a form that needs to be displayed. Here is the code snippet: <form name="myform" method="POST" className={classes.root} target="mydiv" action="https://example.com/submit" onLoad= ...

javascriptreactjs

Using components from other modules in a sibling module's component in Angular 4

Let me provide some context - I'm currently working with Angular 4 and the AngularCLI. The structure of my folders looks like this: app helper-components helper-components.module.ts views admin admin.module.ts views.m ...

javascriptangularmodulecomponents

The Angular framework's structure is loaded in a combination of synchronous and asynchronous ways once the primeng tableModule

Encountered this error while trying to load the TableModule from primeng into my components module file and running 'npm run packagr': Maximum call stack size exceeded To address this, I switched my primeng version from primeng12 to primeng11.4. ...

javascripttypescriptmoduleprimengnpm-package

importing with a specific name may result in errors, while importing everything with * from does not

Exploring the directory layout of features within my react application: feature1 actions actionTypes.js crud.js component.js container.js reducer.js sagas.js sagas.test.js services.js index.js feature2 ...

javascriptreactjsimportjestjs

Using PHP's bindParam method with multiple dropdown menus

Is there a way to incorporate a WHERE clause into my query based on the gender selected in a form? I am currently using bindParam to populate a dropdown menu with years, but I would like to add a second bindParam that includes 'AND Gender =' in ...

phpjquerymysqlsqlisset

Combining JSON array objects in Vanilla Javascript to create a nested array based on a shared value

I have been searching for a solution to address my specific issue but have not found an exact match. If there is a similar question, please provide a link to the solution. I am looking to merge an array of objects that share a common value using vanilla J ...

javascriptarraysjsonobject

"Troubleshooting jQuery html() Function Issue in Firefox: Dealing with an Unterminated

Trying to insert the following string into a <p> element: (without specified charset) Цена: 4,80 BGN Поддръжка: (directly from .XML file) &#1062;&#1077;&#1085;&#1072;: 4,80 BGN Encountering ...

jqueryhtmlajaxchar

Error: An unknown identifier was encountered unexpectedly when coding in Typescript for front-end development without the use of a framework

About My Current Project For my latest project, I decided to work on a basic HTML canvas without using any frameworks. To ensure type checking and because of my familiarity with it from React projects, I opted to use Typescript. Below is the simple HTML ...

javascripthtmltypescript

Colorbox's functionality struggles to uphold several groups simultaneously without encountering errors

I have incorporated Colorbox on this page. On the setup, I have various groups listed as groups 1 to 9. However, when clicking on the second and third items, they display correctly according to the provided code. My aim is to make everything appear in the ...

javascriptjquerycsscolorbox

Tips for updating the value of the most recently created div in an ng-repeat loop

Within my HTML document, the following code is present: <div ng-repeat="selection in selections" style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}"> </div> In my controller, I have implemented function ...

htmlcssangularjsangularjs-ng-repeat

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Issue with ng-repeat Directive I have encountered a problem where the ng-repeat directive does not track the addition of a new array, specifically 'options'. This issue arises when the directive is used within a template displayed using ng-dialo ...

javascriptangularjsng-dialog

The previous and next arrows do not have a looping feature

I have a collection of 10 HTML pages stored in a folder called PROJECTS. Everything is functioning properly, except for the prev and next arrow navigation buttons. The issue arises when navigating to the last page (e.g., projectPage_10.html) from my Projec ...

javascriptjquery

Attempting to apply two different animations to a single element

Trying to implement two different animations, with one triggering before the other. In the Codepen and snippet below, you can observe that the initial animation rearranges the icons to their original positions upon page load. The second animation involves ...

cssanimation

Designing a multi-platform web browser application for Android, iOS, and Windows 10

I've developed several web applications using HTML5 technology and now I'm interested in creating my own custom web browser specifically tailored for my apps/sites. I want it to have a native appearance, but essentially just wrap around my web ap ...

androidioshtmlgoogle-chromebrowser

Do Typescript code require the use of a constructor?

After initializing a fresh Aurelia project using the aurelia-cli and executing the au new command, I received the following app.ts: export class App { message = 'Hello World!'; } To enhance my app.ts, I replaced it with the code from a helpfu ...

javascripttypescriptvisual-studio-codeaurelia

Why is it difficult to parse out a single object using jQuery .each, while multiple objects work perfectly?

Currently, I am dealing with a .each loop that processes an object retrieved from a JSON feed through Ajax (Type: jsonp; the success function sends the "data" to the function/method containing the .each loop). The issue puzzling me is that when the feed r ...

javascriptparsingjsonpeach

Improving the efficiency and readability of JavaScript syntax (specifically conditional statements with if-else) in Vue.js

Seeking advice on optimizing and simplifying this syntax in Vue's methods section: methods: { getColorBtn(status, isCorrect, isRemind, textButton) { if (status === 1 && isCorrect === 1 && isRemind === 1) return 'v-btn--outlined theme--l ...

javascriptvue.js

Replace pipeline function during component testing

During my unit testing of a component that utilizes a custom pipe, I encountered the need to provide a fake implementation for the transform method in my test. While exploring options, I discovered that it's feasible to override components, modules, ...

javascriptangularunit-testing

"The issue persists with multiple JavaScript forms failing to work as expected when preventDefault

Within a jQuery document ready function, I've included the following code: jQuery("#frmUpdateDet").submit(function (e) { jQuery.ajax({ type: 'POST', url: './php/updateCred.php', data: jQ ...

javascriptphpjquery