CODEWITHSUNDEEP
xpagesbootstrap-modal
Dan Soares
Dan Soares

Reputation: 380

XPages and materialize-tags plugin

I am trying to implement the following plugin in a bootstrap 3 modal in XPages. I've got really close but I'm stuck at one point and I'm at a loss what to do. Hoping someone can point me in the right direction.

This is the plugin: http://henrychavez.github.io/materialize-tags/examples/

The goal is that when I click on a row in a repeat control, it opens a modal and the KeywordList field for that document is displayed in the modal (using the tags/material design chips).

Here's my call to the modal:

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

and inside the modal (editKeywordModal), inside a panel (pnlConfigKeywordListModal) is my field to display the keyword. configkeywordDoc is the document datasource corresponding to row I clicked:

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

It works great if I have a static list. However, when I perform a partial refresh on that modal before opening it, it flashes for a second as it opens (I can see the chips) and then I lose the tags/chips and they display as a comma separated string in the input text field.

Any ideas appreciated...

Thanks so much in advance.

Regards,

Dan

Upvotes: 1

Views: 84

Answers (1)

Mark Leusink
Mark Leusink

Reputation: 3757

The data-role="materialtags" automatically transforms your inputs to 'material tags', but it only does that on page load. When you do a partial refresh of the dialog/ dialog contents, the new input values aren't transformed into material tags automatically.

Bootstrap modals have events that are triggered when they are shown, so I would hook the code that transforms the inputs into that. Something like:

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

This code is triggered when your modal (check the modal id) is shown and then transforms all inputs in the modal to material tags.

Upvotes: 1

Related Questions