2013-10-24 4 views
0

튜토리얼 here에서 jquery에 웹 위젯을 작성합니다.잡히지 않은 TypeError : 객체 [object Object]의 'jQuery'속성이 함수가 아닙니다.

기본적으로 jQuery가로드되었는지 확인하고 그렇지 않으면로드합니다. 내 위젯은 버튼 하나만 표시하고 onClick은 iframe을로드하는 fancybox를 보여줍니다.

(function() { 

// Localize jQuery variable 
var jQuery; 

/******** Load jQuery if not present *********/ 
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') { 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src", 
     "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
    if (script_tag.readyState) { 
     script_tag.onreadystatechange = function() { // For old versions of IE 
      if (this.readyState == 'complete' || this.readyState == 'loaded') { 
      scriptLoadHandler(); 
      } 
     }; 
    } else { // Other browsers 
     script_tag.onload = scriptLoadHandler; 
    } 
    // Try to find the head, otherwise default to the documentElement 
    (document.getElementsByTagName("head")[0] ||  document.documentElement).appendChild(script_tag); 
} else { 
    // The jQuery version on the window is the one we want to use 
    jQuery = window.jQuery; 
    main(); 
} 

/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
    // Restore $ and window.jQuery to their previous values and store the 
    // new jQuery in our local jQuery variable 
    jQuery = window.jQuery.noConflict(true); 
    // Call our main function 
    main(); 
} 

/******** Our main function ********/ 
function main() { 
    jQuery(document).ready(function($) { 
     // We can use jQuery 1.4.2 here 

     /**** LOAD FANCYBOX ******/ 
     $.getScript("fancyboxURL"); 

     // I also tried loading fancybox here but that didnt work either 
     $(".fancybox").fancybox(); 
    }); 
} 

})(); // We call our anonymous function immediately 

페이지를로드 할 때 아래 오류가 발생합니다.

Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2 
Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js?v=1.0.7:19 
Uncaught TypeError: Property '$' of object [object Object] is not a function 

일부 시도 오류 Property "$" .... 오류에서 오는 파일에서

, 그것은 현재 내가

으로 시도해야 것으로 나타났습니다 다른 스레드에서

$(document).ready(function(){ 
    $(".fancybox").fancybox(); 
}); 

를 읽고

jQuery(function($){ 
    $(".fancybox").fancybox(); 
}); 

하지만 t는 단지 Property "jQuery" of object is not a function을주었습니다.

내가 수동으로 jQuery을 내 html 파일에 포함하면 코드가 제대로 작동한다는 것을 알고 있습니다. 아래

내 HTML 파일 : -

<html> 
<head> 
<!-- IF I UNCOMMENT THE BELOW LINE IT WORKS! Add jQuery library --> 
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>--> 
</head> 
<body> 
<!-- load widget --> 
<script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script> 
<div id="widget-container"></div> 
</body> 
</html> 

내가 크롬에 요소를 검사 할 때 발생하는 마크 업 jQuery를로드되었음을 나타냅니다 보인다.

+0

그런 짓을. – ethree

+0

하지만 jQuery 라이브러리는 위젯 javascript에 포함되어야합니다. 자, 제 질문을 편집하여 자바 스크립트를 보여 주도록하겠습니다. – chongzixin

+0

jQuery를 포함 할 때 ...'$ (document) .ready (..)'코드가 실행될 때 ... jQuery가로드되지 않았을 가능성이 있습니다 .... –

답변

1

는 적어도 세 가지 문제 (아마 더)가있다. 당신은 jQuery.noConflict(true) 사용

true 당신이 jQuery를가로드되기 전에 설정 window.$뿐만 아니라 window.jQuery를 복원 할뿐만 아니라 원하는, jQuery를을 알려줍니다.

jQuery 페이지에로드 된 경우 글로벌 개체 window.jQueryundefined으로 유지됩니다. fancybox를 작동 시키려면 globale 범위에서 jQuery를 사용할 수 있어야하며, 이는 상황에 따라 다릅니다. 이 오류 메시지가 얻을 왜 그게 전부 :

Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js

jQuery 글로벌 범위에 사용할 수없는 위치를 (한 번에, 어딘가 jquery.fancybox-thumbs.js을로드 것을 보여줍니다 그런 다음

Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2

는이 오류 메시지가 위와 같은 이유 일 가능성이 높음) 위의 이유로 jQuery에 할당되지 않은 fancybox에 액세스하려고합니다. 마지막 오류 메시지에 대한

: 당신이 $(document).ready(...)를 호출 할 때이 당신의 게시 된 코드에서 발생하면 jQuery를이 $ ( noConflict)에 할당되어 있지 않기 때문에

Uncaught TypeError: Property '$' of object [object Object] is not a function

, 다음입니다. 그러나 main에있는 jQuery(document).ready(...)이 작동해야합니다 (다른 사람이 후속 오류가 아닌지 확인하기 위해 오류를 순서대로 수정해야 함)

다른 문제를 해결할 때 나타나는 또 다른 문제 facnybox는 당신이 $(".fancybox").fancybox();를 호출 할 때로드되지 않는 거의 모든 경우에, 그래서

$.getScript("fancyboxURL"); 

// I also tried loading fancybox here but that didnt work either 
$(".fancybox").fancybox(); 

$.getScript("fancyboxURL");로드 스크립트 비동기 : 함께.

편집

위젯 코드를 들어 당신이 모든 라이브러리를 직접 호스트 또는 AMD 및 모듈의 로딩 컨텍스트를 생성 할 수 있습니다 로더를 지원하는 라이브러리를 사용하는 것이 좋습니다 것입니다. 나는 우리가 자신의 로더를 가지고 있기 때문에 현재 하나 제안 할 수 있습니다.

또 다른 해결책은 모든 jQuery 플러그인을 직접 호스팅하고 callback 함수로 래핑하는 것입니다. 그런

뭔가 :

myWidgetScript_[some number to avoid conflicts]_[name of you modified script]

그리고 코드에서

function myWidgetScript_s7d8f6_fancybox(jQuery, $) { 
     //the original code that is in the fancybox.js file 
} 
내가 문제를 이해하지 못하는이

jQuery.getScript("modified.fancybox.js", function() { 
     myWidgetScript_s7d8f6_fancybox(jQuery, jQuery); 
     jQuery(".fancybox").fancybox(); 

}); 
+0

와우는 너무 많은 빛을 흘리기에 너무 감사드립니다. 나는 지금 하나씩 이것을 시도하려고 노력할 것이다. 당신이 가진 어떤 힌트도 크게 감사하겠습니다! – chongzixin

+0

내가 살펴 봐야 할 첫 번째 일은 jQuery를 글로벌 범위에서 사용하는 것입니다. – chongzixin

+0

그럼 내가 선택한 라이브러리로는별로 도움이되지 않을 것이지만, 위젯의 경우 AMD 실행 라이브러리를 사용하고로드 할 것을 권장합니다. [requirejs] (http://requirejs.org/docs/whyamd.html) –

0

웹 페이지에서 수행하는 모든 자바 스크립트가 "여기에서 jQuery 1.4.2를 사용할 수 있습니다."섹션에 있는지 확인해야합니다. 해당 섹션 외부에 있으면 브라우저가 jQuery를 인식하지 못합니다.

+0

yup 당신이 언급 한 것처럼 "우리는 여기 jQuery 1.4.2를 사용할 수 있습니다."섹션에서 모든 로딩 작업을 수행했습니다. – chongzixin

0

fancybox 위젯은 jQuery를 사용합니다. 따라서 사용하기 전에 포함시켜야합니다. (가 먼저 어쨌든 있는지 확인 필요)를

그래서 흐름은
  • 위와 같이, fancybox를 초기화 할 수
  • 를 사용하여 문서 준비 fancybox을 포함

    • 가 jQuery를 포함하지 것이다. 이 같은

    뭔가 :

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    
    <script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script> 
    
    <script type="text/javascript"> 
        $(function(){ 
          $(".fancybox").fancybox(); 
        }); 
    </script> 
    
  • +0

    그래, 또는 적어도 내가 그렇게했다고 생각합니다. 위의 코드에서 위의 "jQuery 1.4.2를 사용할 수 있습니다."섹션을 편집하여 더 많이 보여주었습니다. – chongzixin

    0

    이 시도,

    <script> 
        // code to load jquery version 1.4.2 if not exists 
        (window.jQuery && window.jQuery.fn.jquery !== '1.4.2') || 
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><\/script>'); 
    </script> 
    <!-- include your fancybox plugin to work properlly --> 
    <script src="path_of_your_js_folder/fancybox-plugin.js"></script> 
    <script> 
        // code to initialize your fancybox 
        $(document).ready(function(){ 
         $(".fancybox").fancybox(); 
        }); 
    </script> 
    
    +0

    이것은 위젯 코드를위한 최선의 해결책이 아닙니다. 왜냐하면이 모든 HTML 코드가 HTML 코드에 포함되어야하고 나중에 수정할 기회가 없기 때문입니다. –

    관련 문제