Load bootstrap modal in xpages

Question

In an application I have a repeat control and for each entry in the repeat I great a corresponding bootstrap dialog modal.

I would like to open a certain modal when the user opens the xpage with a provided url including a hash value. The hash value corresponds to the id of the modal e.g. #view:_id1:_id152:objRepeatList:1:_id193:_id200:bootstrapModal

However I notice that the command $('#view:_id1:_id152:objRepeatList:1:_id193:_id200:bootstrapModal').modal('show'); does not deliver any result.

In order to test the show() function I made a simple test script that gets the first modal component in the DOM and tries to open it:

$( document ).ready(function() {    
    var cardType= '#{javascript:SSApp.getCurrentObjectCollectionCardType()}';       
    if (cardType=="cardPicture"){   
        var modals = $(".modal");
        alert(modals.length);       
        if (modals.length > 0){
            var firstModal = modals.first();
            alert("we got one");
            var firstModalId = "#" + firstModal.attr('id');
            alert( firstModal.attr('id') );             
            $(firstModalId).modal('show');
        }       
    }
});

I receive all the alerts but the last command line always give zero result.

Because the xpage works with partial refresh I also tried the onComplete event for the eventHandler that updates the page but it seems to be a lot of caching then going around and sometimes the cardType is stored in memory somehow:

<xp:eventHandler event="onclick" submit="true"
                            refreshMode="partial" refreshId="row-body">
                            <xp:this.action>
                                <![CDATA[#{javascript:sessionScope.put("collDisplay","cards");
SSApp.currentObject.loadRelations(relation.category);}]]>
                            </xp:this.action>
                            <xp:this.onComplete><![CDATA[var cardType= '#{javascript:SSApp.getCurrentObjectCollectionCardType()}';

    if (cardType=="cardPicture"){


        var modals = $(".modal");
        alert(modals.length);

        if (modals.length > 0){
            var firstModal = modals.first();
            alert("we got one");
            var firstModalId = "#" + firstModal.attr('id');
            alert( firstModal.attr('id') );

            $(firstModalId).modal('show');
        }

    }]]></xp:this.onComplete>
                        </xp:eventHandler>

Anyone has a clue what I should do correct?

Two questions: 1) Have you tried to launch the model using the browser console with the same or different result. 2) Have you tried using a full refresh, and does it work then? (Obviously not desirable, but might be necessary) — Steve Zavocki

Troy Reimer Troy Reimer · Accepted Answer · 2015-11-05T14:30:19

The problem is that jQuery can't find the dialog because of the ":" in the id. They have to be escaped. Here is a little function you can use instead of $ when you need to retrieve XPages ids (credit to Mark Roden for this one).

function x$(id){
    id = id.replace(/:/gi, "\\:");
    return ($("#" + id));
}

Use this function in place of $() when you need an XPages item.

x$("view:_id1:_id152:objRepeatList:1:_id193:_id200:bootstrapModal").modal('show');

Load bootstrap modal in xpages

1 Answers