Dynamically adding rotating cards after page load


Topic: Dynamically adding rotating cards after page load

bshelton pro asked 10 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 pro premium priority answered 10 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.

FREE CONSULTATION

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

Status

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