bootstrap 모달/대화 상자를 호출하는 동안 jquery를 여러 번로드하지 마십시오.

Question

xpages (jquery 및 부트 스트랩 파일이 있음)에 테마를 만들었습니다. 부트 스트랩 모달을 만들었고 모달의 본문에 다른 페이지를 동적으로로드하고 있습니다. 난 클릭에 대한 대화 상자를 호출 할 때 다음은 이제 (mainform에서 하위 폼처럼) 내 사용자 지정 컨트롤 코드

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="false" 
dojoTheme="false" dojoForm="false"> 





<xp:div id="test"> 
    <xp:this.attrs> 
     <xp:attr name="role" value="dialog"></xp:attr> 
    </xp:this.attrs> 

    <xp:div> 

     <div class="modal-content"> 
      <div> 

       <button type="button" class="close" 
        data-dismiss="modal" aria-hidden="true"> 
        × 
       </button> 
       <h4> 

       </h4> 

      </div> 

      <div class="modal-body"> 

      </div> 

       <div styleClass='modal-footer'> 

       </div> 

     </div> 

    </xp:div> 
</xp:div> 
<xp:eventHandler event="onClientLoad" submit="false"> 
    <xp:this.script><![CDATA[jQuery(document).ready(function() {  

});]]></xp:this.script> 
</xp:eventHandler> 

<xp:scriptBlock id="scriptBlock"> 
    <xp:this.value><![CDATA[ 

    // Fill modal with content from link href 
    var id="#{javascript:var id=compositeData.dialogid; getClientId(id)}" 


     x$(id).on("show.bs.modal", function(e) { 
      alert('fires immediately when the show instance method is 
    called') 
      $(this).find(".modal-body").load('./LoginAsAdmin.xsp'); 
     }); 

     x$(id).on('shown.bs.modal', function (e) { 
      //var test = #{javascript:print('==========server side')}; 
      alert('fired when the modal has been made visible') 
     }) 

     x$(id).on('hide.bs.modal', function (e) { 
      alert('fired immediately when the hide instance method has been 
called') 
     }) 

     x$(id).on('hidden.bs.modal', function (e) { 
      alert('fired when the modal has finished being hidden from the 
user ') 
      $(this).removeData('bs.modal'); 
     }) 

     x$(id).on('loaded.bs.modal', function (e) { 
      alert('fired when the modal has loaded content') 
     }) 


]]></xp:this.value> 
</xp:scriptBlock> 

</xp:view> 

난 다음 부트 스트랩 모달

x$("#{id:test}").modal("show") 

를 호출하고있어 메인 페이지 코드입니다 버튼의 여러 클라이언트 오류가 여러 파일을 여러 번 등로드 파일을로드하는 등 jquery 두 번로드하면 실제 페이지를로드하고 내가 부트 스트랩 모달을 호출하면 다시로드되기 때문에. 거기에 모드 jQuery 단일 모드에서 iframe을 사용하지 않고 페이지에서로드 할 수있는 방법은 무엇입니까?

Answer 1

.load() 기능을 사용하면 섹션

로드 페이지 단편

을 보면

을 여러 가지 서명 (당신이 그것을 호출하고 다른 일을하기 위해 다른 매개 변수를 전달할 수있는 방법을)이 .load() 메서드는 $ .get()과 달리 삽입 할 원격 문서의 일부를 지정할 수 있습니다. 이것은 url 매개 변수에 대한 특수 구문을 사용하여 수행됩니다. 하나 이상의 공백 문자가 문자열에 포함되어 있으면 첫 번째 공백 다음의 문자열 부분은로드 할 내용을 결정하는 jQuery 선택기로 간주됩니다.

우리는 페치 문서의 일부만을 사용하는 위의 예를 수정할 수 :

$("#result").load("ajax/test.html #container");

이것은 당신이 가능성이 원하는 것 같다. 당신이 얻으려고 노력하고 표시하고있는 형태가 머리 태그처럼, 대상 요소 외부 의존성 (JS 또는 CSS)가있는 경우는거야,

$(this).find(".modal-body").load('./LoginAsAdmin.xsp #my-form-containg-element');

: 그래서 당신이 뭔가를 할 수 해당 리소스를 부모 페이지에 포함하거나 div 대신 iframe에 대상 URL을로드하여 표시해야합니다.