Dynamically Added Flipping Card

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?

Add comment

Adam Stapleton pro answered 6 years ago

0 0 Best answer

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:
<pre><code class=" language-markup"><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></code></pre>
Would become this:
<pre><code class=" language-markup"><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></code></pre>
And you could use this to apply the class when the rotate-btn was clicked:
<pre>$('a.rotate-btn').click(function (e) {
 e.preventDefault();
  var cardId = $(this).data('card');
  $('#' + cardId).toggleClass('flipped');
});</pre>
Hopefully that helps someone in the future.

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:

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

Would become this:

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

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.

Please insert min. 20 characters.

<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 6 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 6 years ago

Thank You Very Much!

Huichofer's response the new correct answer

noahrama pro commented 6 years ago

Thank You Very Much!

Huichofer's response the new correct answer

Bartłomiej Malanowski staff commented 6 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!

Add comment

Write

Create snippet

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

Adam Stapleton

Pro User 66Support score
6Questions 11Answers 0Snippets