How to call bootstrap modal dialog from SSJS in XPages -


edit added after

</xp:this.action>  

and appeared work couple times, has quit. don't know if have solution or not: further edit make sure have 2 xp:attr 's or not work.

<xp:this.oncomplete>     var id = "#{id:panelmodal}"     xsp.partialrefreshget(id,{     oncomplete: function(){     $('#mymodal').modal('show');         }         }); </xp:this.oncomplete> 

i have created test code below call -- if comment out link , show button modal window displays correctly. however, when set attrs toggle-data , toggle-target can't modal display.

<xp:panel id="panelmain">         <xp:link text="create document" id="buttonlink1" styleclass="btn btn-default">             <xp:this.attrs>                 <xp:attr name="data-toggle" value="modal">                 </xp:attr>                 <xp:attr name="data-target" value="createdialog">                 </xp:attr>             </xp:this.attrs>             <xp:eventhandler event="onclick" submit="true"                 refreshmode="partial" refreshid="panelmain">                 <xp:this.action><![cdata[#{javascript:"do stuff here"}]]></xp:this.action>             </xp:eventhandler>         </xp:link>   <!-- <button type="button" class="btn btn-md" data-toggle="modal"             data-target="#createdialog"> search         </button> -->         <!-- modal -->         <div class="modal fade" id="createdialog" tabindex="-1" role="dialog"             aria-labelledby="mymodallabel">             <div class="modal-dialog" role="document">                 <div class="modal-content">                     <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal"                             aria-label="close">                             <span aria-hidden="true"></span>                         </button>                         <h4 class="modal-title" id="mymodallabel">                             <xp:label id="label1">                                 <xp:this.value><![cdata[#{javascript:"search " + appprops[sessionscope.ssapplication].appdesc}]]></xp:this.value>                             </xp:label>                         </h4>                     </div>                     <div class="modal-body">                         ...       </div>                     <div class="modal-footer">                         <button type="button" class="btn btn-default" data-dismiss="modal">                             close</button>                         <button type="button" class="btn btn-primary">save changes</button>                     </div>                 </div>             </div>         </div>     </xp:panel><!-- panel main --> 

so here code works. may refinements can made works. if have suggestions on improving please feel free

<xp:panel id="panelmain">         <xp:link text="create document" id="buttonlink1" styleclass="btn btn-default">             <xp:this.attrs>                 <xp:attr name="data-toggle" value="modal">                 </xp:attr>                 <xp:attr name="data-target" value="createdialog">                 </xp:attr>             </xp:this.attrs>             <xp:eventhandler event="onclick" submit="true"                 refreshmode="partial" refreshid="panelmain">                 <xp:this.action><![cdata[#{javascript:"do stuff here"}]]></xp:this.action> <xp:this.oncomplete>     var id = "#{id:panelmodal}"     xsp.partialrefreshget(id,{     oncomplete: function(){     $('#mymodal').modal('show');     }}); </xp:this.oncomplete>             </xp:eventhandler>         </xp:link>   <!-- <button type="button" class="btn btn-md" data-toggle="modal"             data-target="#createdialog"> search         </button> -->         <!-- modal -->         <div class="modal fade" id="createdialog" tabindex="-1" role="dialog"             aria-labelledby="mymodallabel">             <div class="modal-dialog" role="document">                 <div class="modal-content">                     <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal"                             aria-label="close">                             <span aria-hidden="true"></span>                         </button>                         <h4 class="modal-title" id="mymodallabel">                             <xp:label id="label1">                                 <xp:this.value><![cdata[#{javascript:"search " + appprops[sessionscope.ssapplication].appdesc}]]></xp:this.value>                             </xp:label>                         </h4>                     </div>                     <div class="modal-body">                         ...       </div>                     <div class="modal-footer">                         <button type="button" class="btn btn-default" data-dismiss="modal">                             close</button>                         <button type="button" class="btn btn-primary">save changes</button>                     </div>                 </div>             </div>         </div>     </xp:panel><!-- panel main --> 

Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -