$ is not defined even after adding link and youtube api not working

Question

This is the markup

<html>
<head>
    <title>Youtube App</title>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="container">
        <header>
            <h1>Search<span>Up<span></h1>
            <p>Search all Youtube videos</p>
        </header>
            <section>
                <form id="searchForm" name="searchForm" onsubmit="return search()">
                    <div class="fieldcontainer">
                        <input type="search" id="query" class="search-field" placeholder="Search Youtube...">
                        <input type="submit" name="search-btn" id="search-btn" value="">
                    </div>
                </form>
                <ul id="results"></ul>
                <div id="buttons"></div>        
            </section>  
            <footer>
                <p>Copyright &copy; 2017, All Rights Reserved</p>
            </footer>
</body>
</html>

and this is the script

$(function(){   
$('searchForm').submit(function(e){
    e.preventDefault();
});
    });
function search(){
    //clear results
    $('#results').html('');
    $('#buttons').html('');

    //Get Form Input
    q = $('#query').val();

    //Run GET Requests on API
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
                part: 'snippet, id',
                q: q,
                type: 'video',
                key: '123'},
            function(data){
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;

            console.log(data);
            }
        )
    }

well the problem is even though i have given the links

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

it still says $ is not defined and MOST importantly "console.log(data);" this is how i load the data from search of the youtube api which should console log but also not working Please help and thank you...

The script tag importing jquery must come before the JS file that needs jQuery. — Nisarg Shah, Aug 06 '17 at 10:56
Possible duplicate of [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — Nisarg Shah, Aug 06 '17 at 11:02

score 1 · Answer 1 · edited Aug 06 '17 at 11:04

1

JS files are loaded synchronously in the browser unless you specify otherwise. Meaning, if you need to use jQuery in your custom JS file, you need to import it before your JS file loads. Your code will get jQuery, if you change the import order of your files as follows:

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

edited Aug 06 '17 at 11:04

Ivan

34,531
8
55
100

answered Aug 06 '17 at 10:58

Nisarg Shah

14,151
6
34
55

hey now its fine but still a problem the youtube api still not working it should console.log some items would u help me in that,... please and thank u... – Shashank Madan Aug 06 '17 at 11:10
I am getting a 403 - maybe because your key is not valid. Did you check that? – Nisarg Shah Aug 06 '17 at 11:16

score 1 · Accepted Answer · answered Aug 06 '17 at 13:53

Here's the working code in Plunker , you can find the index and the script files.
PS: you need to change the api key

index.html

<html>
<head>
    <title>Youtube App</title>


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="container">
        <header>
            <h1>Search<span>Up<span></h1>
            <p>Search all Youtube videos</p>
        </header>
            <section>
                <form id="searchForm" name="searchForm" >
                    <div class="fieldcontainer">
                        <input type="search" id="query" class="search-field" placeholder="Search Youtube...">
                        <input type="button" name="search-btn" id="search-btn" value="submit" onclick="search()">
                    </div>
                </form>
                <ul id="results"></ul>
                <div id="buttons"></div>        
            </section>  
            <footer>
                <p>Copyright &copy; 2017, All Rights Reserved</p>
            </footer>
</body>
</html>

Script.js

function search(){

    //clear results
    $('#results').html('');
    $('#buttons').html('');

    //Get Form Input
    q = $('#query').val();

    //Run GET Requests on API
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
                part: 'snippet, id',
                q: q,
                type: 'video',
                key: '!!your api key!!!'},
        ).done(function( data ) {
                var nextPageToken = data.nextPageToken;
                var prevPageToken = data.prevPageToken;



                var jsonPretty = JSON.stringify(data, null, '\t');

                $("#results").html(jsonPretty);

            console.log(data);   }); }

score 0 · Answer 3 · answered Aug 06 '17 at 10:55

0

<link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="script.js"></script>

use script.js after jquery

answered Aug 06 '17 at 10:55

Neeraj Pathak

759
4
13

$ is not defined even after adding link and youtube api not working

3 Answers3