XPages и Twitter Bootstrap Модальный не работает при использовании SSJS

Question

Довольно легко получить загрузочный модуль Twitter Bootstrap, работающий в XPages, просто следуя примерам на сайте. Однако, похоже, что это не сработает, если вы хотите использовать SSJS для изменения содержимого модального файла до его отображения. Кажется, он вспыхивает, и часто просто показывает фон.

Похоже, что проблема заключается в использовании полного или частичного обновления XPages.

Я попытался заставить его работать «нормально», и я попытался использовать 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> из библиотеки Extension, а и изменить что (добавление/удаление классов), чтобы сделать его похожим на модальном Bootstrap.

Вот некоторые примеры код, чтобы вы начали:

<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) Создание шаблона HTML для диалога в папке WebContent, пример 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 код

ПРИМЕЧАНИЯ: если вам нужен диалога модальных-Л.Г. или модальные см, а затем добавить к <xe:dialog> атрибуту додзё modalStyleClass (см. шаг 2) со значением modal-lg