XPages und materialize-tags plugin

Question

Ich versuche, das folgende Plugin in einem Bootstrap 3 Modal in XPages zu implementieren. Ich bin sehr nah dran, aber ich stecke an einem Punkt fest und ich weiß nicht, was ich tun soll. Hoffe, dass jemand mich in die richtige Richtung weisen kann.

Dies ist das Plugin: http://henrychavez.github.io/materialize-tags/examples/

Das Ziel ist, dass, wenn ich in einer Wiederholungssteuerung auf einer Zeile klicken, wird es für das Dokument eine modale und die Keyword Feld öffnet sich in der modal angezeigt wird (die Tags mit/Material Design Chips).

Hier ist mein Aufruf an den modalen:

<xp:this.attrs> 
<xp:attr name="data-toggle" value="modal"> 
</xp:attr> 
<xp:attr name="data-keyboard" value="false"> 
</xp:attr> 
<xp:attr name="data-backdrop" value="static"> 
</xp:attr> 
<xp:attr name="data-target" value="#editKeywordModal"> 
    </xp:attr> 
</xp:this.attrs> 
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="pnlRequests"> 
    <xp:this.action><![CDATA[#{javascript: var db:NotesDatabase = session.getDatabase(sessionScope.serverPath,sessionScope.requestsdbName); 
var unid = rowData.getUniversalID(); 
viewScope.keyworddocUNID = unid;}]]></xp:this.action> 
<xp:this.onComplete> 
var id = "#{id:pnlConfigKeywordListModal}" 
XSP.partialRefreshGet(id,{ 
onComplete: function(){ 
$('#editKeywordModal').modal('show'); 
}}); 
</xp:this.onComplete> 
</xp:eventHandler> 

und innerhalb der modalen (editKeywordModal), innerhalb einer Platte (pnlConfigKeywordListModal) ist mein Feld das Stichwort angezeigt werden soll. configkeywordDoc ist das Dokument-Datenquelle Zeile entsprechenden Ich klickte:

<xp:inputText type="text" value="#{configkeywordDoc.KeywordList}" id="inputText1"> 
     <xp:this.attrs> 
      <xp:attr name="data-role" value="materialtags"></xp:attr> 
     </xp:this.attrs> 
</xp:inputText> 

Es funktioniert großartig, wenn ich eine statische Liste haben. Allerdings, wenn ich eine partielle Aktualisierung auf diesem Modal vor dem Öffnen, blinkt es für eine Sekunde, wie es öffnet (ich kann die Chips sehen) und dann verliere ich die Tags/Chips und sie als Komma getrennte Zeichenfolge im Eingabetext angezeigt Feld.

Irgendwelche Ideen geschätzt ...

Vielen Dank im Voraus so viel.

Grüße,

Dan

Answer 1

Die data-role="materialtags" Ihre Eingaben zu 'Material-Tags' automatisch transformiert, aber es funktioniert nur, dass beim Laden der Seite. Wenn Sie den Dialog/Dialoginhalt teilweise aktualisieren, werden die neuen Eingabewerte nicht automatisch in Material-Tags umgewandelt.

Bootstrap modals haben Ereignisse, die ausgelöst werden, wenn sie angezeigt werden, also würde ich den Code haken, der die Eingaben in das transformiert. Etwas wie:

x$("#{id:yourModalId}").on("shown.bs.modal", function (event) { 
    var modal = $(this); 
    var inputs = x$("inputs", modal).materialtags(); 
}); 

Dieser Code wird ausgelöst, wenn Ihre modal (überprüfen Sie die modal-ID) angezeigt wird, und dann wandelt alle Eingaben in den Modal Material Tags.