Google MDL - Creating card in jquery shows only text - no background or border

Question

I have the following code which creates an MDL Card on the fly

                        var resultsHolder   = $('#resultsHolder');
                        var gridHolder      = $('<div>',{ 'class' : 'mdl-grid' });
                        var card            = $('<div>',{ 'class' : 'mdl-card.mdl-shadow--2dp data-display' });
                        var title           = $('<div>',{'class' : 'mdl-card__title'});
                        var h4              = $('<h4>');
                        var supportingText  = $('<div>',{'class' : 'mdl-card__supporting-text'});
                        var supportingPara  = $('<div>',{'class' : 'projectDesc'});

                        h4.append($('#projectName').val());
                        title.append(h4);

                        supportingPara.append($('#projectDesc').val());
                        supportingText.append(supportingPara);

                        card.css('width','100%');
                        card.append(title);
                        card.append(supportingText);

                        gridHolder.append(card);
                        resultsHolder.prepend(gridHolder);

                        componentHandler.upgradeElement(resultsHolder);

While the contents of the new card appears. None of the border or background appears.

I have seen the following link

How can I update/refresh Google MDL elements that I add to my page dynamically?

but using any of the following;

• componentHandler.upgradeDom();
• componentHandler.upgradeElement();

pass the class of the card holder - $('#resultsHolder')

None seem to make a difference.

So how can I make my full card appear.

Answer 1

Eventually managed it not with JQuery but using raw JavaScript to create the elements. So a revised version which creates a card, title, supporting text and actions is as follows;

var resultsHolder   = document.getElementById('resultsHolder');
var gridHolder      = document.createElement('div');
var card            = document.createElement('div');
var title           = document.createElement('div');
var h4              = document.createElement('h4');
var supportingText  = document.createElement('div');
var supportingPara  = document.createElement('p');
var cardActions     = document.createElement('div');
var detailButton    = document.createElement('button');

try {
    // assign classes
    gridHolder.className        = 'mdl-grid';
    card.className              = "mdl-card mdl-shadow--2dp data-display";
    title.className             = 'mdl-card__title';
    supportingText.className    = 'mdl-card__supporting-text';
    supportingPara.className    = 'projectDesc';
    cardActions.className       = 'mdl-card__actions mdl-card--border mdl-typography--text-right';
    detailButton.className      = 'mdl-button mdl-js-button mdl-js-ripple-effect';

    // add special styles
    card.style.width        = '100%';
    // card.style.opacity      = '0';

    // add text
    h4.innerHTML                = $('#projectName').val();
    supportingPara.innerHTML    = $('#projectDesc').val();
    detailButton.innerHTML      = 'Details';  

    // build the title
    title.appendChild(h4);

    // build the supporting text
    supportingText.appendChild(supportingPara);

    // build the actions
    cardActions.appendChild(detailButton);

    // build the card
    card.appendChild(title);
    card.appendChild(supportingText);
    card.appendChild(cardActions);

    gridHolder.appendChild(card);
    resultsHolder.insertBefore(gridHolder,resultsHolder.firstChild);

    // now upgrade components so they are handled correctly by mdl
    componentHandler.upgradeDom(gridHolder);
}
catch(e) {
    alert( e );
}