Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript Uncaught ReferenceError: jQuery is not defined; Uncaught ReferenceError: $ is not defined [duplicate]

This is my fiddle, http://jsfiddle.net/4vaxE/35/

It work fine in my fiddle.

However, when I transfer it to dreamweaver, it can't work. And I found this two error in my coding.

  1. Uncaught ReferenceError: jQuery is not defined
  2. uncaught referenceerror $ is not defined

I had read before the article related to this two error, and tried to solve according to the method provided, however, it still not working, how can I solve this?

Here is my full coding in dreamweaver

<body>
    <div class="buttons" style="background-color: rgba(0,0,0,.8);">
    <a class="button" id="showdiv1">Div 1</a>
    <a class="button" id="showdiv2">Div 2</a>
    <a class="button" id="showdiv3">Div 3</a>
    <a class="button" id="showdiv4">Div 4</a>
    </div>

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script language="JavaScript" type="text/javascript">
var selectedEffect="explode";
var options = { percent: 100 };
$('#showdiv1').click(function () {
    $('div[id^=div]').hide();

    $('#div1').show( selectedEffect, options, 500, callback );
});
$('#showdiv2').click(function () {
    $('div[id^=div]').hide();
    $('#div2').show( selectedEffect, options, 500, callback );
});

$('#showdiv3').click(function () {
    $('div[id^=div]').hide();
    $('#div3').show( selectedEffect, options, 500, callback );
});

$('#showdiv4').click(function () {
    $('div[id^=div]').hide();
    $('#div4').show( selectedEffect, options, 500, callback );
});

function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };
</script>
</body>
</html>

CSS

<style type="text/css">

.button {
    cursor:pointer;
    display:inline-block;
    margin:10px;
    clip: rect(auto,auto,auto,auto);
}

#div1 {
    background:aqua;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div2 {
    background:blue;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
#div3 {
    background:orange;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}

#div4 {
    background:green;
    padding:20px;
    width:100px;
    text-align:center;
    display:none;
}
a {
    color:aqua;
    -webkit-filter: grayscale(1.0);
}
a:hover {
    color:red;
    -webkit-filter: grayscale(0.0);
}
</style>
like image 505
Soo Avatar asked Jul 25 '14 01:07

Soo


People also ask

How do I fix uncaught ReferenceError is not defined in jQuery?

To solve this error, we simply add the jQuery CDN link or downloaded jQuery path link inside the head section. Example: This example resolves the error by adding the required CDN link inside the <script> tag.

How do I fix reference error in JavaScript?

Reference errors in Javascript are mainly thrown when an attempt is made to reference a variable that does not exist or is out of scope. Therefore, in the majority of cases, a ReferenceError can be fixed by making sure that the referenced variable is defined correctly and is being called in the correct scope.

Why is my jQuery code not working?

You need another <script> tag that imports jquery. js from a local or remote source. Your jQuery code does not work because you are calling an undefined "onclick" method on the the selected div. Change the $("div").

Is not defined in JavaScript error?

A not defined error is when we did not declare the variable and tried to call that variable. In JavaScript, we can declare variables without adding const , let , or var , and we won't get an error of undefined or not defined .


1 Answers

Cause you need to add jQuery library to your file:

jQuery UI is just an addon to jQuery which means that
first you need to include the jQuery library → and then the UI.

<script src="path/to/your/jquery.min.js"></script>
<script src="path/to/your/jquery.ui.min.js"></script>
like image 54
Roko C. Buljan Avatar answered Nov 08 '22 08:11

Roko C. Buljan