jQueryFileTree jQueryライブラリとの衝突

Question

JSPを使用して結果を表示したいとします。ボタンをクリックしてjQueryでAJAXを使用したとき、その正常に動作します。しかし、今、私は同じページまたは他のページ内でjQueryFileTree関数を追加しようとしていますが、動作しません。私はこのリンクhttps://www.abeautifulsite.net/jquery-file-treeを使用しました。しかし、jqueryライブラリを削除すると、ファイルツリーが表示されますが、ボタンの結果は表示されません。これ以下のように。

<!--<script type="text/javascript" src="<%= sessionBean.getAppBean().getContext() %>/resources/js/jQuery v3.1.0.js"></script>--> 

どのようなヘルプ、どのように私は両方の結果を一緒に表示しますか？私はjqueryライブラリの競合オプションを理解しようとします。しかし、私はjqueryを提出したばかりです。私のコードを見て、私にガイドラインを教えてください。スクリプトタグの開口部は、この

var jq = $.noConflict(); 

noConflict（）メソッドを追加した直後

<script type="text/javascript" src="<%= sessionBean.getAppBean().getContext() %>/resources/js/jQuery v3.1.0.js"></script> 
 

 
<script type="text/javascript"> 
 
    (document).ready(function() { 
 
    jQuery.noConflict(); 
 
    var demo = $('#fileTreeDemo'); 
 
    demo.fileTree({ root: '<%=sessionBean.getDip().getAbsolutePath()%>', 
 
       script: '<%= sessionBean.getAppBean().getContext() %>/pages/jqueryFileTree.jsp', 
 
       folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) { 
 
    alert(file); 
 
    }); 
 
}); 
 
</script> 
 

 
<script type="text/javascript"> 
 

 
    $(document).ready(function() { 
 

 
    loadProjectOverview(); 
 

 
    $("#overviewTab").on('click', function(ev){ 
 

 
    ev.preventDefault(); 
 

 
    loadProjectOverview(); 
 

 
    return false; 
 

 
    }); 
 

 
    function loadProjectOverview(){ 
 

 
    var overviewTab = $("#overviewTab").addClass("active"); 
 
    var metadataTab = $("#metadataTab").removeClass("active"); 
 
    var filesTab = $("#filesTab").removeClass("active"); 
 

 
    var collectionView = $("#collection-view"); 
 
    var filesView = $("#collection-files"); 
 

 
    $.ajax(
 
     " <%=sessionBean.getAppBean().getContext()%>/components/collectionOverview.jsp", { 
 
     type: 'GET', 
 
     contentType: "html", 
 
     success: function(data, textStatus, jqXHR){ 
 
      collectionView.html(data); 
 
      filesView.html(""); 
 
     }, 
 
     error: function(jqXHR, textStatus, errorThrown){ 
 
      alert('Error: ' + textStatus); 
 
     } 
 
     }); 
 
    } 
 

 
    </script> 
 

 
    <div id="pagenavtabs" class="parallax" data-start="250" speed="1" style="position: absolute; left: 0px;"> 
 

 
    <div class="container"> 
 
     <button type="button" class="navbar-toggle collapsed" data-target="#pagenav" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     Seitennavigation 
 
     </button> 
 
     <div id="pagenav" class="collapse navbar-collapse"> 
 

 
      <div id="fileTreeDemo" class="demo"></div> 
 
      <ul class="nav nav-tabs" role="tablist"> 
 
      <li id="overviewTab" role="presentation" class="active"> 
 
       <a data-toggle="tab">Projektübersicht</a> 
 
       </li> 
 
       </ul> 
 
       </div> 
 
       </div> 
 
       </div>

は

Answer 1

あなたが後で使用するために、変数に保存することができますことを、jQueryのへの参照を返します。 。

そのページの 'JQ' JQと '$' を交換してくださいここで私はあなたのjqueryのコードに変更を加えた要素

ex: jq("#EleId").val(); //instead of $("#EleId").val(); 

にアクセスするための$のように機能し、

<script type="text/javascript" src="<%= sessionBean.getAppBean().getContext() %>/resources/js/jQuery v3.1.0.js"></script> 

<script type="text/javascript"> 
    $.noConflict(); 
    var jq = $.noConflict(); 
</script> 

<script type="text/javascript"> 
jq(document).ready(function() { 

    var demo = jq('#fileTreeDemo'); 
    demo.fileTree({ root: '<%=sessionBean.getDip().getAbsolutePath()%>', 
     script: '<%= sessionBean.getAppBean().getContext() %>/pages/jqueryFileTree.jsp', 
     folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) { 
      alert(file); 
     }); 


    loadProjectOverview(); 

    jq("#overviewTab").on('click', function (ev) { 

     ev.preventDefault(); 

     loadProjectOverview(); 

     return false; 

    }); 

    function loadProjectOverview(){ 

     var overviewTab = jq("#overviewTab").addClass("active"); 
     var metadataTab = jq("#metadataTab").removeClass("active"); 
     var filesTab = jq("#filesTab").removeClass("active"); 

     var collectionView = jq("#collection-view"); 
     var filesView = jq("#collection-files"); 

     jq.ajax(
      "<%=sessionBean.getAppBean().getContext()%>/components/collectionOverview.jsp", { 
       type: 'GET', 
       contentType: "html", 
       success: function(data, textStatus, jqXHR){ 
        collectionView.html(data); 
        filesView.html(""); 
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        alert('Error: ' + textStatus); 
       } 
      }); 
    } 
}); 

それを試してみてください

<div id="pagenavtabs" class="parallax" data-start="250" speed="1" style="position: absolute; left: 0px;"> 

<div class="container"> 
    <button type="button" class="navbar-toggle collapsed" data-target="#pagenav" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     Seitennavigation 
    </button> 
    <div id="pagenav" class="collapse navbar-collapse"> 

     <div id="fileTreeDemo" class="demo"></div> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li id="overviewTab" role="presentation" class="active"> 
       <a data-toggle="tab">Projektübersicht</a> 
      </li> 
     </ul> 
    </div> 
</div>