[V2] Adding cards dynamically

Questions
1

Hi guys,

I’m using kitchen sink cards as example and I’m trying to add cards dynamically with this code:

indent preformatted text by 4 spaces

on: {
  pageInit: function () {

for (var idx = 0; idx <= 10; idx++) {
  var card = 
  '<div class="card demo-card-header-pic">'
  +'<div style="link-with-image.jpg)"'
    +'valign="bottom" class="card-header no-border"></div>'
  +'<div class="card-content card-content-padding">'
    +'<p class="date">bla bla bla bla bla bla bla bla bla</p>'
  +'</div>'
  +'<div class="card-footer">'
    +'<a href="#" class="link" @click="openStandalone">photos</a>'
    +'<a href="#" class="link sheet-open" data-sheet=".demo-sheet">More Information</a>'
  +'</div>'
+'</div>'

      document.getElementById('cards').innerHTML = card;
}
indent preformatted text by 4 spaces

what am I doing wrong?

2

What is happened? Do you see only one last card?

3

adasoft,
It’s only appearing one card.With this string i’m adding, all cards should be the same and i don’t know if its the first or the last.

The openStandAlone (Photo Browser) and sheet-open (sheet Modal) also its not working

A card added not dinamically works perfectly and the Photo Browser and Sheet Modal works too

Thanks in advance.

4

Because you use for loop in a wrong way:

on: {
  pageInit: function () {

  var card = '';
  for (var idx = 0; idx <= 10; idx++) {
    card += 
    '<div class="card demo-card-header-pic">'
      +'<div style="link-with-image.jpg"'
        +'valign="bottom" class="card-header no-border"></div>'
      +'<div class="card-content card-content-padding">'
        +'<p class="date">bla bla bla bla bla bla bla bla bla</p>'
      +'</div>'
      +'<div class="card-footer">'
        +'<a href="#" class="link" @click="openStandalone">photos</a>'
        +'<a href="#" class="link sheet-open" data-sheet=".demo-sheet">More Information</a>'
      +'</div>'
    +'</div>';
  }
  document.getElementById('cards').innerHTML = card;
}
5

looks like this:

<a href="#" class="link" @click="openStandalone">photos</a>

wiil never work dynamically

this one shuold work:

<a href="#" class="link sheet-open" data-sheet=".demo-sheet"></div>

your only chance is to attach event
to an element presented in compo-obj
at the moment it get parsed
<div class="cards-container" @click="dynOpenStandalone"></div>
and then you can add elements dynamically
<div class="card dynamically-added"></div>

{
  methods: {
    dynOpenStandalone:function(e){
      if( ! Dom7(e.target).hasClass('dynamically-added')) return;
      const self = this;
      self.standalone.open();
    }
  }
}
1 Like
6

Thank you guys for your help, all cards are being generated dynamically, but the code below its still not working even using the tip on the post above.

    +'<a href="#" class="link" @click="openStandalone">photos</a>'
    +'<a href="#" class="link sheet-open" data-sheet=".demo-sheet">More Information</a>'

The events are not working when generated dynamically.

thanks in advance.