2011-04-05 7 views
1

jQuery에 문제가 있습니다. 이걸 사용하여 접을 수있는 트 리뷰를 만들었습니다. http://docs.jquery.com/Plugins/Treeview 문제는 생성 된 HTML과 함께 사용해야한다는 것이 었습니다. 그래서 또 다른 jQuery 스크립트를 만들어서 HTML을 트리 뷰 스크립트와 호환되도록 편집했다. HTML은 특정 클래스와 함께 li과 ul을 가져야하지만 생성 된 HTML은 LI가있는 빈 UL뿐입니다. 이것은 파이어 폭스에서 잘 작동jQuery 객체가 지원되지 않는 메소드 오류

$(document).ready(function() { 
    loadPage(); 
}); 

function loadPage() { 

    //Loop through all wanted li-elements 
    $('div.treeContent ul li').each(function(index) { 

     //If the li doesn't have an ul-element, we replace it's content with a span around the original content 
     $(this).not($(this).has('ul')).wrapInner('<span class="file" />'); 

     //If there are ul-elements available 
     if($(this).has('ul').length > 0) { 
      var el = null; 
      for(var i=0; i<$(this).contents().size() && el==null; i++) { 
       el = $(this).contents().eq(i); //We take the i-element 
       var text = el.text(); //We take the textnode out of it. 
       if(text.length < 1 || text.match(/^\s+$/)) { 
        //The text doesn't contain anything, or only whitespaces. Let's take the next element! 
        el = null; 
       } 
      } 
      if(el.is('a')) { 
       el.wrap('<span class="folder"/>'); 
      } 
      else { 
       //If the el-var is filled with something NOT empty and NOT only containing spaces: 
       text = '<span class="folder">' + text + '</span>'; //We change the textnode. 
       el.replaceWith(text); //We put the textnode back into it. 
      } 
     } 
    }); 

    /* 
    * Since the scripts were loading at the same time and this is unwanted 
    * I open the other one when document is ready 
    */ 
    $(document).ready(function(){ 
     $("#treeMenu").treeview(); 
    }); 
} 

function openPathMenu() { 
    //First we get the current URL to look for 
    var pathname = window.location.href; 
    var splittedPath = pathname.split("xenit.eu"); 
    //Now the first element of splittedPath will contain the part BEFORE xenit.eu, the second one will contain the part we are looking for! 
    var URL = splittedPath[1]; 

    //Next we are going to try to find this URL in our tree 
    $('ul.treeview').find('a').each(function() { //Look for the a-elements in the tree 
     if($(this).attr('href') == URL) { //Check whether the href-attribute is equal to the URL we're looking for 
      $(this).addClass('selected'); 
      $(this).parents('li.expandable').each(function() { //Look for li.expandable parents and put them on expanded. 
       $(this).children("div.hitarea").click(); //By clicking on them. 
      }) 
     } 
    }) 
} 

(이 아주 잘 문서화 나는 이렇게 이해 추측) : 당신은 여기 내 스크립트를 볼 수 있습니다. IE8 및 Chrome에서 확인한 결과 오류가 발생하는 것처럼 보였습니다. IE8은 나에게 "개체는이 속성이나 메서드 Collaps.js, 14 줄 9 문자를 지원하지 않습니다."그리고 크롬은 나에게 "Uncaught TypeError : Object #에는 메서드가 없습니다."가 있습니다. " 그래서 그들은 jQuery 객체를 인식하지 못하는 것 같습니다. 또는 그런 것.

나는 물건이로드 된 방식으로 무언가를해야한다는 의혹이있었습니다. 당신이 볼 수 있듯이 Collapse.js 전에 treeview 스크립트로드에 문제가있었습니다. html은 Collaps.js로 포맷해야하기 때문에 당연히 작동하지 않습니다. 그렇지 않으면 treeview 스크립트가 작동하지 않습니다.

treeview-script에서 나는 몇 가지를 변경했습니다 : 페이지를로드 할 때 스크립트가 전체 트리를 닫으려고했기 때문에 li를 닫기위한 함수와 .each()를 추가하여 모든 li을 닫았습니다. "treeview"-function.

"함수"끝에 Collaps.js : openPathMenu()에서 함수를 호출하기 위해 다른 $ (document) .ready()를 추가했습니다. (현재 URL에서 트리를 열려면) 이것이 문제를 일으킬 수 있다고 생각했지만,이 문제를 주석으로 처리하면 여전히 작동하지 않습니다. 여기 :

당신은 내가 ("기능 (설정) 트 리뷰"의 끝에서) 다음 treeview.js에 추가 한, 이러한 기능을 볼 수 있습니다

//Close all the collapsable li's in the ul.treeview 
      $("ul.treeview").children("li.collapsable").each(function() { 
       closeElement($(this), true); 
      }) 

      /* 
      * @Author: Trinorae 
      * A function to close a certain li.collapsable element (and all it's children) 
      * parameters: 
      *  el: li.collapsable element to close 
      *  childrenToo: close all children too? 
      */ 
      function closeElement(el, childrenToo) { 
       if(childrenToo) { 
        //Search all "ul li.collapsable"-children of our element 
        var liCollapsers = el.children("ul").children("li.collapsable"); 
        if(liCollapsers.length > 0) { //If there are "ul li.collapsable"-children 
         liCollapsers.each(function() { 
          closeElement($(this)); //Close them too 
         }) 
        } 
       } 
       el.children("div." + CLASSES.hitarea).click(); //Close the element! 
      } 

      //Do something after everything is loaded: 
      $(document).ready(function(){ 
       openPathMenu(); 
      }); 

를하는 것이 중요 할 것입니다 경우 나 ' m jQuery를 사용하여 1.5.1 나는 이것을 Drupal 6 웹 사이트에서 실행 중이다. 이 짧은 HTML로 내 scipt (부분적으로)를 로컬로 시도했습니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
      <title>A Collapsible test</title> 
      <script src="files/js/jQuery.js"></script> 
      <script src="files/js/Collaps.js"></script> 
      <script src="files/js/treeview.js"></script> 
      <link href="files/css/treeview.css" rel="stylesheet" /> 
     </head> 
     <body> 
      <div class="treeContent"> 
       <ul id="treeMenu"> 
        <li> 
         <a title="About document models and metadata" href="/nl/?q=fred/1.3/manual/About%20document%20models%20and%20metadata.html">About document models and metadata</a> 
        </li> 
        <li> 
         <a title="Google" href="http://www.google.be" target="main">About Fred</a> 
        </li> 
        <li> 
         <a title="Advanced user functions" href="/nl/?q=fred/1.3/manual/Advanced%20user%20functions.html">Advanced user functions</a> 
         <ul> 
          <li> 
           <a title="Browse as user" href="/nl/?q=fred/1.3/manual/Browse%20as%20user.html">Browse as user</a> 
          </li> 
          <li> 
           <a title="Data dictionary" href="/nl/?q=fred/1.3/manual/Data%20dictionary.html">Data dictionary</a> 
          </li> 
         </ul> 
        </li> 
//And so on.. 

완벽하게 실행됩니다. "openPathMenu()"가 작동하는지 실제로 테스트 할 수는 없지만 상관 없다고 생각합니다. 요점은 이것이 처음에로드되고 내 스크립트로 HTML을 편집하여 treeview가 작동한다는 것입니다!

그래서 나는

누군가가 내가 잘못했고, 도움이 될 수 있습니다 뭔가를보고 희망을 ..이 너무 드루팔 문제가 될 수 두려워 해요. (전 jQuery를 사용하지 않았기 때문에 어리석은 짓을하는 것이 가능합니다.) 어리석은 긴 설명을 위해 실례합니다. 그러나 그것을 더 짧게 설명하는 방법을 알지 못했습니다.

+0

잘못된 댓글 .. – StefK

답변

0

문제는 jQuery를 새 버전으로 업그레이드하면 해결됩니다. 나는 이미이 일을하고 있다고 생각했지만, 드루팔 (Drupal은 IE, 크롬, 사파리에서 다른 파일 (/ 위치)을 Firefox에서 사용하는 것 같습니다. 드루팔 (Drupal은 큰 문제를 만드는 것처럼 보입니다. 수동으로 파일을 덮어 쓰면 갑자기 작동합니다!

일부 다른 모듈은 이전 jQuery 버전에 의존 할 수 있으므로 Drupal에서 jQuery 파일을 덮어 쓰는 것은 까다로운 작업 일 수 있습니다. 예 : 내보기 - 모듈은 jQuery를 사용하여 사용하기가 편하기 때문에 완전히 망가져 있지만 자바 스크립트를 사용 중지하여 해결할 수 있으므로이 모듈에서 살 수 있습니다.

관련 문제