Topic: Dynamically adding rotating cards after page load

bshelton pro asked 6 years ago

I've got an ajax function that gets information and once that completes I want to display the information as a rotating card. I've got the card displaying properly with my newly pulled information (just injecting the standard card HTML with correct id's and data-card attributes) however the "click" to rotate portion doesn't work and breaks ones that were previously working before the Ajax call. Is there a way to re-initialize the cards? I'm not 100% sure it's an initialization issue, but I've run into similar issues dynamically creating elements on the fly in the past. Thanks! Brandon

Michal Szymanski staff answered 6 years ago

I don't have a ready-made solution for you, but I can tell you how the rotating cards work and you'll probably find this out on your own. Code for Rotating Cards is very simple and it just toggle between 1 css class .flipped
$('.rotate-btn').on('click', function () {
    var cardId = $(this).attr('data-card');
    $('#' + cardId).toggleClass('flipped');

You should probably wrap this code inside a function which you can later call , destroy and call again.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No