Topic: Dynamically Added Flipping Card

Adam Stapleton pro asked 6 years ago


Hello I'm trying to use a flipping card within my site. It is dynamically added to the page after the initial load and it doesn't work. I am using your example as my starting point I have copied the code from this page https://mdbootstrap.com/components/flipping-cards/) Is there a JavaScript method that I need to call to re-initialise the flipping cards if they are dynamically added to a page? The docs mention nothing but I presume there is a method that is used?

Adam Stapleton pro answered 6 years ago


For anyone else stumbling across this issue. I found the answer by searching the code on the GitLabs repo. You just need to add the class ".flipped" to the parent container with the ".card-rotating" class. So this:

<div class="card-wrapper">
  <div id="card-1" class="card-rotating effect__click text-center h-100 w-100">
    <div class="face front">
      <div class="card-body">
        <h4 class="font-weight-bold mb-3">Marie Johnson</h4>
        <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>
      </div>
    </div>
    <div class="face back">
      <div class="card-body">
        <h4 class="font-weight-bold">About me</h4>
      </div>
    </div>
  </div>
</div>

Would become this:

<div class="card-wrapper">
  <div id="card-1" class="card-rotating flipped effect__click text-center h-100 w-100">
    <div class="face front">
      <div class="card-body">
        <h4 class="font-weight-bold mb-3">Marie Johnson</h4>
        <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>
      </div>
    </div>
    <div class="face back">
      <div class="card-body">
        <h4 class="font-weight-bold">About me</h4>
      </div>
    </div>
  </div>
</div>

And you could use this to apply the class when the rotate-btn was clicked:

$('a.rotate-btn').click(function (e) {
  e.preventDefault();
  var cardId = $(this).data('card');
  $('#' + cardId).toggleClass('flipped');
});

Hopefully that helps someone in the future.


Huichofer pro commented 5 years ago

Thanks Adam for this. I had the same problem and your answer led me to the current version implementation. Regards !

$('.rotate-btn').on('click', function () { var cardId = $(this).attr('data-card'); $("#".concat(cardId)).toggleClass('flipped'); });


noahrama pro commented 5 years ago

Thank You Very Much!

Huichofer's response the new correct answer


noahrama pro commented 5 years ago

Thank You Very Much!

Huichofer's response the new correct answer


Bartłomiej Malanowski staff commented 5 years ago

@Huichofer, could you please add your comment as an answer so we could mark it as the best one?


ijese free commented 4 years ago

Thanks, just what I needed!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags