Jquery onLoad() - Les champs de saisie dans la page chargée ne s'affichent pas correctement

Question

Je charge dynamiquement une page dans une autre. Lorsque je charge la page, tous les éléments prennent les bonnes personnalisations CSS à l'exception des champs de saisie. J'utilise MDL mais j'ai essayé aussi avec Bootstrap mais le problème persiste.

figure à la page 1:

figure à la page 2:

mainLayout.load(url, function(responseTxt, statusTxt, xhr) {   
    // Load the javascript associated to this html page 
    if(script_path !== undefined) { 
     $.getScript(script_path); 
    } 
}); 

j'utiliser le même code pour le champ de saisie sur la première page et sur la page chargée.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="input_new_tr_value" /> 
    <label class="mdl-textfield__label" for="input_new_tr_value">{{ _('value') }}</label> 
    <span class="mdl-textfield__error">{{ _('error') }}</span> 
    </div> 

Une suggestion? Tous les autres éléments sont affichés correctement. J'ai également essayé de recharger le fichier MDL js avec getScript() et le fichier CSS après le chargement de la page 2.

Answer 1

J'ai trouvé une solution:

Appelez simplement "componentHandler.upgradeDom();" à partir du fichier javascript.