1

I have some problems with calling the bootstrap control from a repeat control.

Before showing the dialog I want to set some viewscope variables to update the dialog with new content, based upon the row I call the dialog from.

Here are three buttons I have tried:

              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open 1</button>
              <xp:button value="Open 2" id="button1"
                  styleClass="btn btn-info">
                  <xp:this.attrs>
                      <xp:attr name="data-toggle" value="modal"></xp:attr>
                      <xp:attr name="data-target"
                          value="#myModal">
                      </xp:attr>
                  </xp:this.attrs>
                  <xp:eventHandler event="onclick" submit="true"
                      refreshMode="partial" refreshId="dialog" execMode="partial" immediate="true">
                  </xp:eventHandler></xp:button>
              <xp:link escape="true" text="Open 3" id="link1" styleClass="btn btn-info">
              <xp:this.attrs>
                      <xp:attr name="data-toggle" value="modal"></xp:attr>
                      <xp:attr name="data-target"
                          value="#myModal">
                      </xp:attr>
                  </xp:this.attrs>                      
              </xp:link>

The first button is the "normal" html to open the dialog.

Button 2 uses an xp:button and a partial refresh.

Button 3 is a xp:link without a partial refresh.

Button 1 and 3 show the dialog modal. Button 2 only displays the freeze/tinted page.

So it seems the partial refresh is the show blocker, which I seem to need to update the content in the modal before showing it.

Is there another way to establish update and open the modal from a repeat control?

Patrick Kwinten
  • 1,988
  • 2
  • 14
  • 26

1 Answers1

3

You could add an onComplete event to the event handler that's running the partial refresh and display the modal via javascript.

<xp:button value="Open 2" id="button1" styleClass="btn btn-info">
    <xp:eventHandler 
        event="onclick" 
        submit="true"
        refreshMode="partial" 
        refreshId="dialog" 
        execMode="partial" 
        immediate="true"
        onComplete="$('#myModal').modal('show');">
    </xp:eventHandler>
</xp:button>

This way the dialog will be displayed after the partial refresh has finished executing.

Adam R
  • 366
  • 3
  • 5