2016-06-23 2 views
1

XPages의 부트 스트랩 3 모달에 다음 플러그인을 구현하려고합니다. 나는 정말로 가깝지만 나는 한 지점에 머물러 있고 무엇을 해야할지를 놓치고있다. 누군가를 바라는 것은 올바른 방향으로 나를 가리킬 수 있습니다. XPages 및 materialize-tags 플러그인

는 플러그인 : http://henrychavez.github.io/materialize-tags/examples/

목표 내가 반복 컨트롤의 행을 클릭하면,이 태그를 사용하여 (모달에 표시되는 모달 및 해당 문서에 대한 키워드 목록 필드를 여는 것입니다/재료 디자인 칩).

여기 모달 내 전화입니다 :

<xp:this.attrs> 
<xp:attr name="data-toggle" value="modal"> 
</xp:attr> 
<xp:attr name="data-keyboard" value="false"> 
</xp:attr> 
<xp:attr name="data-backdrop" value="static"> 
</xp:attr> 
<xp:attr name="data-target" value="#editKeywordModal"> 
    </xp:attr> 
</xp:this.attrs> 
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="pnlRequests"> 
    <xp:this.action><![CDATA[#{javascript: var db:NotesDatabase = session.getDatabase(sessionScope.serverPath,sessionScope.requestsdbName); 
var unid = rowData.getUniversalID(); 
viewScope.keyworddocUNID = unid;}]]></xp:this.action> 
<xp:this.onComplete> 
var id = "#{id:pnlConfigKeywordListModal}" 
XSP.partialRefreshGet(id,{ 
onComplete: function(){ 
$('#editKeywordModal').modal('show'); 
}}); 
</xp:this.onComplete> 
</xp:eventHandler> 

및 패널 내부의 모달 (editKeywordModal), 내부 (pnlConfigKeywordListModal)는 키워드를 표시하는 내 필드입니다. configkeywordDoc은 내가 클릭 한 행에 해당하는 문서 데이터 소스입니다.

<xp:inputText type="text" value="#{configkeywordDoc.KeywordList}" id="inputText1"> 
     <xp:this.attrs> 
      <xp:attr name="data-role" value="materialtags"></xp:attr> 
     </xp:this.attrs> 
</xp:inputText> 

정적 목록이 있으면 잘 작동합니다. 그러나, 내가 그것을 열기 전에 그 모달에 대한 부분적 새로 고침을 수행 할 때, 그것은 열리고 (나는 칩을 볼 수 있습니다) 잠깐 동안 깜박 인 다음 태그/칩을 잃어 버리고 쉼표로 구분 된 문자열로 입력 텍스트에 표시됩니다 들.

어떤 아이디어라도 감사하겠습니다 ...

미리 감사드립니다.

감사합니다,

답변

1

data-role="materialtags"가 자동으로 '자료 태그'로 입력을 변환하지만, 그것은 단지 페이지로드가 않습니다. 대화 상자/대화 상자 내용을 부분적으로 새로 고치면 새 입력 값이 자동으로 재료 태그로 변환되지 않습니다.

부트 스트랩 모달은 표시 될 때 트리거되는 이벤트가 있으므로 입력을 변환하는 코드를 연결합니다. 같은 뭔가 : 다음

x$("#{id:yourModalId}").on("shown.bs.modal", function (event) { 
    var modal = $(this); 
    var inputs = x$("inputs", modal).materialtags(); 
}); 

당신의 모달 (모달 ID를 확인) 표시 될 때이 코드가 트리거 및 재료 태그 모달 모든 입력을 변환합니다.

+0

감사합니다. –