Opening the Bootstrap modal (dialog) from a repeat control

Here is a simple XPages development tip when working with Bootstrap:

In an app we replaced the Dojo dialog from the Extension Library with the Bootstrap modal due to scrolling problems: When the dialog pane exceeds the content pane, scrolling in the dialog lead often to scrolling of the background content. This was with mobile devices often a crime.

The Dojo dialog you can display in client side and server side JavaScript. The Bootstrap modal only in client-side.

Since I am calling the modal from within a repeat control and I need to update the content of the modal with data from the document represented in the xp:repeat control I needed to first call a function to collect additional back-end document data & perform a partial refresh on the modal (which resides in an xp:panel). Then I needed to call the function to show the modal.

onCompLete

Perhaps a bit well hidden is the onComplete property for the eventHandler. Here is the way I find it:

  • Find the element you want to define and action for (or already have).
  • Select/Highlight the event in the Outline control.
  • Open the Properties view for the Event handler.
  • Navigate to the onComplete property. Here is where you can open the editor.

Here is how it looks like in some screen shots:

outline_event

onComplete

oncomplete_editor

The code looks as followed:

<xp:link escape=”true” text=”Link” id=”link2″>
<xp:eventHandler
event=”onclick”
submit=”true”
refreshMode=”partial”
refreshId=”dialog”
execMode=”partial”
immediate=”true”
onComplete=”$(‘#myModal’).modal(‘show’);”>
<xp:this.action><![CDATA[#{javascript:var id:String = pix.docUNID;

viewScope.put(“helloWorld”, “Hello World from ” +id)}]]></xp:this.action>
</xp:eventHandler>
</xp:link>

As result my dialog is presented with updated content every time it is presented:

result