2013-06-11 15 views
7

मुझे JQuery छवि स्लाइडर बनाने का प्रयास करते समय यह त्रुटि संदेश मिल रहा है।

Uncaught ReferenceError:$ is not defined

यहाँ मेरी नई कोडिंग है (ध्यान दें कि मैं पेज के लिए स्क्रिप्ट स्थानांतरित कर दिया, इस एडोब द्वारा सुझाव दिया गया था।):

<!doctype html> 
<html> 

<head> 
<meta charset="utf-8"> 
<title>Green Cold-Formed Steel | Home</title> 
<style type="text/css"> 

body,td,th { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 10px; 
    color: #000; 
    text-align: left; 
} 
body { 
    background-color: #999; 
} 
a:link { 
    color: #999; 
    text-decoration: none; 
} 
a:visited { 
    text-decoration: none; 
    color: #060; 
} 
a:hover { 
    text-decoration: underline; 
    color: #FFF; 
} 
a:active { 
    text-decoration: none; 
} 
h1 { 
    font-size: 14px; 
    color: #060; 
} 
h2 { 
    font-size: 12px; 
    color: #999; 
} 
h3 { 
    font-size: 9px; 
    color: #FFF; 
} 
#next { 
    background-image: url(Assets/slideshow/r_arrow.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    float: right; 
    height: 500px; 
    width: 100px; 
    position: relative; 
    z-index: 99; 
} 
#slideshowwrapper { 
    display: block; 
    height: 500px; 
    width: 1000px; 
    margin: auto; 
} 
#container { 
    background-color: #FFC; 
    display: block; 
    float: left; 
    height: 500px; 
    width: 1000px; 
    overflow: auto; 
} 
#prev { 
    background-image: url(Assets/slideshow/L_arrow.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    display: block; 
    float: left; 
    height: 500px; 
    width: 100px; 
    position: relative; 
    z-index: 99; 
} 
#slider { 
    display: block; 
    float: left; 
    height: 500px; 
    width: 1000px; 
    overflow: hidden; 
    position: absolute; 
} 
#NavBar { 
    display: block; 
    height: 50px; 
    width: auto; 
    position: relative; 
    padding-bottom: 5px; 
    float: none; 
    vertical-align: middle; 
} 
</style> 
</head> 

<body bgcolor="#999999" text="#000000"> 

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px"> 
    <tr> 
    <th height="132" align="left" scope="col">&nbsp;</th> 
    <th scope="col"><div class="spacer" id="spacer"></div> 
     <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div> 
    <hr></th> 
    <th scope="col">&nbsp;</th> 
    </tr> 
    <tr> 
    <th width="5%" align="left" scope="col">&nbsp;</th> 
    <td width="85%" align="left" valign="top" scope="col"> 
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div> 

    <div id="slideshowwrapper"> 
     <div id="container"> 
     <div class="controller" id="prev"></div> 
     <div id="slider"> 
      <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=   "Hyatt Apartments"> 
      <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas"> 
      <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200"> 
      <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run"> 
      <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof"> 
      <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div> 
     <div class="controller" id="next"></div> 
     </div> 
    </div></td> 
    <th width="10%" scope="col">&nbsp;</th> 
    </tr> 
</table> 
<p>&nbsp;</p> 
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script> 
<script> 
$(function(){ 
     $('#slider').cycle({ 
     fx:  'scrollHorz', 
     speed: 'fast', 

     next: '#next', 
     prev: '#prev' 
    }); 
}); 
</script> 
</body> 
</html> 

मेरे लिए जे एस फ़ोल्डर में फ़ोल्डर पथ मेरी वेबसाइट (स्थानीय रूप से) इस तरह दिखती है: सी: \ उपयोगकर्ता \ एंड्रयू \ डेस्कटॉप \ जीसीएफएस \ जेएस

मैं कोडिंग दुनिया में नया हूं, लेकिन जो मैं हासिल करने की कोशिश कर रहा हूं वह काफी सरल है। जहां तक ​​मुझे पता है कि मुझे एक तैयार कार्य करने की आवश्यकता नहीं है और जावास्क्रिप्ट स्वचालित रूप से चलाना चाहिए। आपकी सहायता के लिए धन्यवाद!

टिप्पणी

से जब मैं करने की कोशिश की इस यह भी

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' }); 
}); 
</script> 
+4

क्या आप वाकई jQuery 1.10 है जहां आपको लगता है कि यह है? – Blazemonger

+0

हां, मैं इस साइट को बनाने के लिए ड्रीमवेवर का उपयोग कर रहा हूं, इसलिए फ़ाइल अनिवार्य रूप से "लिंक" थी और कोड मेरे लिए लिखा गया था। – MasterFuel

+0

(1) जानें कि [नेटवर्क पैनल] (https://developers.google.com/chrome-developer-tools/docs/network) का उपयोग कैसे करें ताकि आप देख सकें कि 'jquery-1.10.1 का अनुरोध करने में कोई त्रुटि है या नहीं .min.js'। (2) जानें [कंसोल] (https://developers.google.com/chrome-developer-tools/docs/console) का उपयोग कैसे करें ताकि आप रैग की सलाह का पालन कर सकें। यह साइट आपकी मदद नहीं कर सकती है जब तक कि आप स्वयं की मदद करना सीखें :) – benastan

उत्तर

9

समाधान:

1) jQuery लोड करने के लिए गूगल CDN का उपयोग करें

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

2) जहाँ तक मुझे साइकिल प्लगइन के बारे में पता है, यह jQuery v1.5- के साथ संगत है v1.7 क्योंकि अधिकांश विधियों को jQuery 1.8+ में बहिष्कृत किया गया था। यही कारण है कि मैंने बिंदु 1 में Google सीडीएन jquery के v1.5 का उपयोग किया है। चक्र प्लगइन पर अधिकांश उदाहरण jquery 1.5 का उपयोग करते हैं।

3) अपने ब्राउज़र कैश को साफ़ करें, यह ज्यादातर बार मुख्य अपराधी है।

4) कृपया कोड का उपयोग कर jQuery की लोडिंग की जांच नीचे

if(typeof jQuery!=='undefined'){ 
    console.log('jQuery Loaded'); 
} 
else{ 
    console.log('not loaded yet'); 
} 

मेजर संपादित करें:

त्रुटि के लिए कारण काफी सरल है:

आप चक्र कहा जाता है jquery लोड होने से पहले विधि।

कॉल चक्र डोम तैयार पर प्लगइन ..

$(document).ready(function(){ 
    $('#slider').cycle({ 
     fx:  'scrollHorz', 
     speed: 'fast', 

     next: '#next', 
     prev: '#prev' 
    }); 
}); 
+0

वह मुद्दा था! हर किसी के समय और मदद के लिए बहुत बहुत धन्यवाद! आप सभी lifesavers हैं! – MasterFuel

+0

यह जानकर खुशी हुई कि यह काम करता है .. :) – writeToBhuwan

9

2 मुद्दों विफल रहा है।

ऐसा लगता है कि आपका jQuery ठीक से लोड नहीं हुआ था।

आप आम तौर पर इस त्रुटि

Uncaught ReferenceError:$ is not defined 

जब jQuery ठीक से अपने पृष्ठ पर शामिल नहीं किया गया है देखते हैं।

CDN से jQuery का उपयोग करके देखें और बदलें

<script src="JS/jquery-1.10.1.min.js"></script> 
से cdn

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

नोट एक साथ

यह आपकी समस्या

का समाधान करना चाहिए: यदि आप फाइल सिस्टम से परीक्षण, आपको उपरोक्त यूआरएल में http: जोड़ने की आवश्यकता है या यह

विफल हो जाएगा

अगला आपकी स्क्रिप्ट फ़ाइल HTML से पहले है। तो DOM Ready हैंडलर में कोड को रखने की आवश्यकता है।

$(function() { 
    $('#slider').cycle({ 
     fx:  'scrollHorz', 
     speed: 'fast', 
     next: '#next', 
     prev: '#prev' 
    }); 
}); 

As far as I know 'Slider' was referenced when I created the div Id.

नहीं ऐसा नहीं है। यदि आपकी स्क्रिप्ट को शरीर से ठीक पहले शामिल किया गया था, तो आप इसे तैयार हैंडलर में संलग्न नहीं कर सकते हैं। लेकिन आपके मामले में यह सिर में मौजूद है।

1) JQuery सही ढंग से लोड किया गया है नहीं हो सकता है: तो जब स्क्रिप्ट चलाने कि विशेष तत्व अभी भी DOM

Check Fiddle

+0

ओह तो आपकी मदद करने के बाद, मैं अभी भी सकारात्मक नहीं देख रहा हूं परिणाम .. ग्रीन शीत-निर्मित स्टील | होम @ सुशांत – MasterFuel

+0

हाँ, यह कोड का एक झुकाव है .. यदि आपने अपना कोड बदल दिया है तो आपको उपर्युक्त प्रश्न को संशोधित करना चाहिए। – benastan

+0

ठीक काम करता है http://jsfiddle.net/sushanth009/UVWwW/ –

3

में मौजूद नहीं है शुरू होता है वहाँ दो मुद्दों हो सकता है। आप क्रोम का उपयोग करके इसका परीक्षण कर सकते हैं। $ या jQuery में कुंजी यह जांचने के लिए कि क्या यह ठीक से लोड हो गया है। Chrome Console

2) यह कुछ JQuery.js में मेरे अनुभव अन्य जे एस पुस्तकालयों, जहां $ समर्थित नहीं किया जाएगा और आप के लिए jQuery बाहर का उपयोग करने के बजाय $ चेक मजबूर हैं के साथ बंडल गया है | पर आधारित है जो जेएस फ़ाइल में नीचे दी गई रेखा जिसे आपने अपनी परियोजना में लोड किया है।

window.jQuery = window.$ = jQuery; 

मुझे लगता है कि http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js का उपयोग करके मेरे लिए काम नहीं किया है, लेकिन मैं प्रयोग किया जाता http://code.jquery.com/jquery-1.7.2.min.js

नीचे अपने कोड में ही हिस्सा है कि मैं संपादित कर दिया है और यह मेरे लिए ठीक काम कर रहा शुरू कर दिया।

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
+0

जैसा कि @Rag उल्लेख किया गया है, मैं jQuery के साथ $ को प्रतिस्थापित करता हूं, त्रुटि अब नहीं आती है ऊपर, हालांकि स्क्रिप्ट अभी भी नहीं चल रहा है। और जब मैं इसे कंसोल में चलाता हूं jQuery को परिभाषित नहीं किया जाता है, तो – MasterFuel

+0

त्रुटि के रूप में वापस आ गया है, अब मेरी त्रुटि संदर्भ त्रुटि: jQuery को परिभाषित नहीं किया गया है आपके सभी धैर्य और दयालुता के लिए धन्यवाद, मुझे पता है और गूंगा हूँ जब यह इस सामान की बात आती है। लेकिन मैं अपनी सबसे कठिन कोशिश कर रहा हूं, आप लोग जो करते हैं उस पर भयानक हैं! – MasterFuel

+0

क्या आप उपरोक्त प्रश्न को संपादित कर सकते हैं जिसे आपने नवीनतम कोड के साथ पोस्ट किया है? – Raghav

1

एक अतिरिक्त के रूप में। यदि आप अपनी .js फ़ाइल में $ (Jquery) का उपयोग कर रहे हैं। तार्किक रूप से सभी libs या ढांचे .js फ़ाइल से पहले होना चाहिए।

<script type="text/javascript" src="jquery-2.1.3.min.js"></script> 
<script type="text/javascript" src="app.js"></script> 
0

मुझे यह समस्या थी लेकिन कारण ऊपर बताए गए परिदृश्यों के कारण बहुत अलग था। मेरी साइट मेरे पुराने एंड्रॉइड (2.2) को छोड़कर हर जगह काम कर रही थी। यह डिवाइस code.jquery.com सीडीएन पर https प्रमाणपत्र को अस्वीकार कर रहा था, इसलिए यह JQuery लोड नहीं कर रहा था। फिक्स को इसके बजाय https Google सीडीएन से JQuery संसाधनों को लोड करना था (ऊपर दिए गए अन्य लोगों द्वारा नामित यूआरएल का उपयोग करना)।

संबंधित मुद्दे

 संबंधित मुद्दे