Jquery onLoad() - Eingabefelder in der geladenen Seite werden nicht korrekt angezeigt

Question

Ich lade dynamisch eine Seite in eine andere. Beim Laden der Seite übernehmen alle Elemente die richtigen CSS-Anpassungen, mit Ausnahme der Eingabefelder. Ich benutze MDL, aber ich habe auch mit Bootstrap versucht, aber das Problem besteht weiter.

in Seite 1 Abgebildet:

Seite angezeigt in 2:

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

I den gleichen Code für das Eingabefeld auf der ersten Seite und in der geladenen Webseite.

<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> 

Irgendwelche Vorschläge? Alle anderen Elemente werden auf die richtige Weise angezeigt. Ich habe auch versucht, die MDL-Js-Datei mit GetScript() und die CSS-Datei nach dem Laden der Seite 2 neu zu laden.

Answer 1

Ich habe eine Lösung gefunden:

Rufen Sie einfach an "componentHandler.upgradeDom();" aus der Javascript-Datei.