XPages和Twitter Bootstrap Modal在使用SSJS時不起作用

Question

只需按照網站上的示例獲取可在XPages中工作的Twitter Bootstrap模式，非常簡單。但是，如果您希望在顯示之前使用SSJS來影響模態的內容，它似乎不起作用。它似乎閃光，並且往往只是顯示背景。

這似乎是使用XPage完全或部分刷新的問題。

我試着讓它工作「通常」，我試過使用jQuery和遠程服務來獲得沒有運氣的變化。

下面是遠程服務的代碼。

有關如何在顯示對話框之前影響或刷新模態內容的任何示例，我們將不勝感激。

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
xmlns:xc="http://www.ibm.com/xsp/custom" 
xmlns:xe="http://www.ibm.com/xsp/coreex"> 
<xc:layout_Header></xc:layout_Header> 
<xp:link escape="true" text="Link" id="link1" value="#myModal"> 
    <xp:this.attrs> 
     <xp:attr name="role" value="button"></xp:attr> 
     <xp:attr name="data-toggle" value="modal"></xp:attr> 
    </xp:this.attrs> 

</xp:link> 
<xp:br></xp:br> 

<xp:panel id="myPanel"> 
    <xc:bs_Modal idName="myModal"> 
     <xp:this.facets> 
      <xp:panel xp:key="facet_1"> 
       My Dialog 
       <xp:br></xp:br> 
       <xp:br></xp:br> 
       Time 



       <xp:text escape="true" id="computedField1" 
        value="#{viewScope.vsTime}"> 
        <xp:this.converter> 
         <xp:convertDateTime type="both"></xp:convertDateTime> 
        </xp:this.converter> 
       </xp:text> 
      </xp:panel> 
     </xp:this.facets> 
    </xc:bs_Modal> 
</xp:panel> 
<xp:br></xp:br> 


<xe:jsonRpcService id="jsonRpcService1" serviceName="testService"> 
    <xe:this.methods> 
     <xe:remoteMethod name="setTime"> 
      <xe:this.script><![CDATA[viewScope.put("vsTime", @Now())]]></xe:this.script> 
     </xe:remoteMethod> 
    </xe:this.methods></xe:jsonRpcService> 
<xp:br></xp:br> 
<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[$('#myModal').on('show', function() { 
testService.setTime(); 
var id = "#{id:myPanel}" 
XSP.partialRefreshGet(id) 
})]]></xp:this.value> 
</xp:scriptBlock></xp:view> 

Answer 1

因爲它已經進行XPages完全集成的，我會用<xe:dialog>從擴展庫，而不是和修改（添加/刪除類），使它看起來像一個引導模式。

下面是一些示例代碼，您開始：

<xe:dialog id="dialog1" title="Dialog title" styleClass="modal" style="margin-left: inherit"> 

    <xe:this.onShow> 
     <![CDATA[//make the dialog look like a Bootstrap dialog using some jQuery magic 

    //add the modal-header class to the title bar 
    var titleBar = $(".modal .dijitDialogTitleBar").addClass("modal-header"); 

//replace title node (by default it's a span) 
var titleNode = $(".dijitDialogTitle", titleBar); 
var title = titleNode.text(); 
titleNode.remove(); 

//add a class to the close icon 
$(".dijitDialogCloseIcon", titleBar).removeClass("dijitDialogCloseIcon").addClass("close"); 

//add a new h3 node with the title 
titleBar.append("<h3>" + title + "</h3>"); 
     ]]> 
    </xe:this.onShow> 

    <xe:dialogContent id="dialogContent1" styleClass="modal-body"> 
     dialog content here 
    </xe:dialogContent> 

    <xe:dialogButtonBar id="dialogButtonBar1" styleClass="modal-footer"> 
     <xp:button value="Close" id="button2"></xp:button> 
    </xe:dialogButtonBar> 

</xe:dialog> 

Answer 2

觸發模式，櫃面的東西顯示模態對話框，我們可以使用回調函數選項後發生之前，請爲模式的內容可用。

var id = "#{id:myPanel}" 
XSP.partialRefreshGet(id,{ 
    onComplete: function(){ 
    $('#myModal').modal('show'); 
    } 
}); 

Answer 3

我在複雜的情況下解決了這個問題。在部分刷新後保存存在的NotesXspDocument問題之後。

它適用於我，也許它對你有幫助。

1）在WebContent文件夾爲對話創建模板的HTML，例如的WebContent /模板/ CustomDialog.html：

<div class="modal fade" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title" data-backdrop="static" data-keyboard="false"> 
    <div role="document" class="modal-dialog"> 
     <div class="modal-content"> 
      <div dojoAttachPoint="titleBar" class="modal-header"> 
       <span dojoAttachPoint="closeButtonNode"> 
        <button type="button" title="${buttonCancel}" class="close" aria-hidden="true" dojoAttachEvent="onclick: onCancel">&times;</button> 
       </span> 
       <h4 class='modal-title' dojoAttachPoint="titleNode" id="${id}_title"></h4> 
      </div> 
      <div dojoAttachPoint="containerNode"></div> 
     </div> 
    </div> 
</div> 

2）與代碼創建csjs庫：

dojo.provide("extlib.responsive.dijit.xsp.bootstrap.Dialog"); 
dojo.require("extlib.dijit.Dialog"); 
dojo.declare(
     "extlib.responsive.dijit.xsp.bootstrap.Dialog", 
     extlib.dijit.Dialog, 
     { 
      baseClass: "", 
      templateString: dojo.cache(new dojo._Url("templates/CustomDialog.html")), 
      draggable: false, 
      autofocus:false, 
      iframePost: false, 
      modalStyleClass: "", 
      show: function() { 
      if(this.open){ 
       return; 
      } 

      if(!this._started){ 
       this.startup(); 
      } 

      // first time we show the dialog, there's some initialization stuff to do 
      if(!this._alreadyInitialized){ 
       this._setup(); 
       this._alreadyInitialized = true; 
      } 

      // Recenter Dialog if user scrolls browser. Connecting to document doesn't work on IE, need to use window. 
      var win = dojo.window.get(this.ownerDocument); 
      //this._modalconnects.push(dojo.on(win, "scroll", dojo.hitch(this, "resize"))); 
      this._modalconnects.push(dojo.on(this.domNode, "keydown", dojo.hitch(this, "_onKey"))); 

      dojo.style(this.domNode, { 
       display: "", 
       position: "", 
       top: "", 
       left: "" 
      }); 

      this._set("open", true); 
      this._onShow(); // lazy load trigger 
      this._size(); 
      this._position(); 

      var node = $(this.domNode); 
      if(this.modalStyleClass) node.children(".modal-dialog").addClass(this.modalStyleClass); 
      node.modal('show').on('shown.bs.modal', dojo.hitch(this, function() { 
       if(this.autofocus) this.focus(); 
      })); 
      if(this.iframePost) { 
       this.xhrPost = dojo.xhrPost; 
       dojo.xhrPost = function(o) { 
        dojo.require("dojo.io.iframe"); 
        o.handleAs = "html"; 
        var load = o.load; 
        o.load = function(response, ioArgs) { 
         load(response.body.innerHTML, ioArgs); 
        } 
        dojo.io.iframe.send(o) 
       }  
      } 
     }, 
     hide: function() { 
      if(this.iframePost) { 
       dojo.xhrPost = this.xhrPost; 
      } 

      if(!this._alreadyInitialized || !this.open){ 
       return; 
      } 

      if(this._scrollConnected){ 
       this._scrollConnected = false; 
      } 
      var h; 
      while(h = this._modalconnects.pop()){ 
       h.remove(); 
      } 

      if(this._relativePosition){ 
       delete this._relativePosition; 
      } 
      this._set("open", false); 

      return $(this.domNode).modal('hide'); 
     }, 
     resize: function() {}, 
     _size: function() {}, 
     _position: function() {}, 
     destroy: function() { 
      var h; 
      while(h = this._modalconnects.pop()){ 
       h.remove(); 
      } 
      $('body').removeClass('modal-open'); 
      $('.modal-backdrop').remove(); 
      this.inherited(arguments);} 
     } 
     } 
); 

XSP._dialog_type = "extlib.responsive.dijit.xsp.bootstrap.Dialog"; 

（大部分代碼我從擴展庫中獲得）

現在我們有dijit小部件的引導對話框。這是由XSP.openDialog和稱爲XSP.closeDialog，攜手SSJS代碼

注：如果你需要模式-LG或模式-SM對話框，然後添加到<xe:dialog>道場屬性modalStyleClass（參見步驟2），值爲modal -lg