2014-10-23 2 views
1

joomla를 부트 스트랩과 함께 사용하는 사이트가 있습니다. 템플릿에서 index.php 파일에 JHtml::_('jquery.framework'); 과 함께 jquery를로드하려고 시도하고 기사 내의 jquery를 사용하면 오류가 발생합니다. 줌라 문서에 joomla bootstrap jquery trouble

:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Evenementen</title> 
</head> 
<body> 
<div class="inleidingevenement"> 
<H2> INSCHRIJVEN VOOR DE EVENEMENTEN </H2> 
<p> Hieronder kun je je aanmelden voor de evenementen. Wanneer je status op "Aanwezig" staat, ben je aangemeld voor het desbetreffende evenement. </p> 
</div> 
<button id="button" class="btn"> </button> 

<script src="templates/templatename/js/status.js"> </script> 

및 status.js는 :

// JavaScript Document 
$(document).ready(function(){ 

$("#button").click(
    function() { 
     $("#button").addClass("btn-primary"); 
    } 
    ); 
}); 

는 오류

Uncaught TypeError: undefined is not a function

그것이 지칭 광고 코드 첫 행이다에게 준다 $(document.....

내가 joomla e.d.없이 다른 파일에서 이것을 시도 할 때. 그것은 잘 작동합니다. jquery가 예상대로로드되지 않는 이유는 무엇입니까?

<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <base href="https://localhost/index.php/leden/evenementen" /> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="author" content="Super User" /> 
    <meta name="description" content="templatename" /> 
    <meta name="generator" content="Joomla! - Open Source Content Management" /> 
    <title>Evenementen</title> 
    <link href="https://localhost/index.php/leden/evenementen" rel="canonical" /> 
    <link href="/templates/templatename/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> 
    <link rel="stylesheet" href="/media/jui/css/bootstrap.min.css" type="text/css" /> 
    <link rel="stylesheet" href="/media/jui/css/bootstrap-responsive.min.css" type="text/css" /> 
    <link rel="stylesheet" href="/media/jui/css/bootstrap-extended.css" type="text/css" /> 
    <link rel="stylesheet" href="/media/system/css/frontediting.css" type="text/css" /> 
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script> 
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script> 
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script> 
    <script src="/media/system/js/caption.js" type="text/javascript"></script> 
    <script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="/media/system/js/frontediting.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
jQuery(window).on('load', function() { 
      new JCaption('img.caption'); 
     }); 
jQuery(document).ready(function(){ 
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"}); 
}); 
jQuery(document).ready(function() 
     { 
      jQuery('.hasPopover').popover({"html": true,"trigger": "hover focus","container": "body"}); 
     }); 
window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new XMLHttpRequest():new  ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r){r.open("GET","./",true);r.send(null)}},840000); 
    </script> 
    <!--[if lt IE 9]> 
    <script src="/media/jui/js/html5.js"></script> 
<![endif]--> 
<link href="/templates/templatename/css/custom.css" rel="stylesheet" type="text/css" > 
<script src="/templates/templatename/js/global.js"></script> 
</head> 

답변

0

달러 별칭은 MooTools에서 사용할 수 있으므로 아마 jQuery 용으로 예약되지 않았습니다. 이 시도 :

jQuery(document).ready(function($) { ... 

또는 속기 :

jQuery(function($) { ... 

이는 jQuery를 객체를 생성하고 내부 사용할 수 있도록 인수로 달러 별칭을 전달합니다.

또 다른 가능성은 jQuery가 이미로드되어 있고 (부트 스트랩이 이에 따라 결정됨) 두 배가되었을 가능성이 있습니다. 이것은 일을 부순다. 페이지 소스를 확인하고로드되는 jQuery의 인스턴스가 하나만 있는지 확인하십시오.

+0

고마워요! 이것은 효과가 있었다. –

0

정확한 해결책은 아니지만 어떤 상황에서는 저에게 도움이됩니다.

var interval = setInterval(function(){ 
if(typeof $!="undefined"){ //check whether jQuery is loaded or not 

    $("#button").click(
    function() { 
     $("#button").addClass("btn-primary"); 
    } 
    ); 
    clearInterval(interval); 
} 
},500) 

여기 jquery가 아직로드되지 않았다고 가정합니다.