HTML does not recognize jQuery (imported or internal)

Question

HTML does not recognize jQuery (imported or internal)

Asked 5 years, 8 months ago

Viewed 1,858 times

0

I’ve researched several topics and I haven’t found the problem. Simply put, the functions I use in jQuery, such as tooltip and Mask, do not work on my page, and by giving F12 in the Chrome browser, informs that jquery is not imported (Uncaught Referenceerror: $ is not defined javascript). I was using jquery on the machine, and I switched to Cdn and the problem persists. I imagine it’s something relatively silly, but I’ve been trying for days to solve the problem.

html:

<!DOCTYPE html>
<html>
<head>
	<title>Semana da Engenharia</title>
	<meta charset="utf-8">
	**<script src="js/js.js" type="text/javascript"></script>**
	**<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>**
	<!-- responsável pelas funções de máscara em jQuery -->
	**<script src="js/jquery.mask.min.js" type="text/javascript"></script>**
	<link rel="stylesheet" type="text/css" href="cssIndex.css">
	<!-- responsável pelas funções em boostrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<!-- responsável por instanciar os icones -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
	<img src="bannerWeek.jpg" id="bannerWeek">

		<div id="divLogin">
			<select required id="comboboxLogin">
				<option value="" disabled selected>Selecione o tipo de usuário</option>
				<option value="administrador">Administrador</option>
				<option value="visitante">Visitante</option>
			</select>
			
			<input type="text" name="senhaUsuario" id="senhaLogin" placeholder="Informe sua senha">
			<span class="iconInPasswordField"><i class="fa fa-lock"></i></span>

			<span id="iconInPasswordField" data-toggle="tooltip"
			title="A sua senha é o seu RA!"><i class="fa fa-info"></i></span>

			<input type="submit" value="ACESSAR" id="btnAcessar" onclick="enviarLogin()">
		</div>

		<span id="edicao2019">6º Edição - 2019</span>
		<span id="unifaeLogo">UNI<span style="color: red">FAE</span></span>
</body>
</html>

javascript:

/*responsavel pela mensagem de ajuda "qual minha senha?"
  o que ele faz realmente?*/

$(document).ready(function(){
	$("#senhaLogin").mask("99999-9");	
    $('[data-toggle="tooltip"]').tooltip();   
});

/* redireciona para a respectiva página de acordo com o usuário*/
function enviarLogin(comboboxLogin) {
	var op = document.getElementById("comboboxLogin").value;

	if(op == "visitante") {
		window.location.href = "userPage.html";
	}
	else
		if (op == "administrador") {
		window.location.href = "admPage.html";
		}
		else
			alert("Informe o tipo de usuário!");
}

Expensive your tags that import the scripts should come last in the document. And the scripts you write should come even after these imported scripts.

– hugocsl

2018/10/26 at 17:46
I put them all after the body (imported and then the js and css I created) and it didn’t work :/ I put them all after the body and it still doesn’t work :/ . . . In addition, new errors appeared: . . . Failed to load resource: net::ERR_FILE_NOT_FOUND /////// jquery.mask.min.js:15 Uncaught TypeError: Cannot set property 'maskWatchers' of undefined /////// at jquery.mask.min.js:15 at jquery.mask.min.js:6 at jquery.mask.min.js:6 ////// bootstrap.min.js:6 Uncaught Error: Bootstrap’s Javascript requires jQuery at bootstrap.min.js:6 //// js.js:4 Uncaught Referenceerror: $ is not defined at js.js:4 //

– Weslley Fillipe

2018/10/26 at 19:17

3 answers

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Yan • 21 points · Answer 1 · 2020-05-04T22:34:44+00:00

I know it’s been a long time since that question was posted, but there could always be someone having the same difficulty. I was having the same problem, and in my case it was a stupid thing... I was simply forgetting to import the core of Jquery (Jquery itself) before importing jquery.mask.min.js. Obviously, without the core of Jquery a library dependent on it would never work...

by Gustavo Sampaio • **1,180** points · Answer 2 · 2018-10-27T12:47:37+00:00

Try to remove the attribute type="text/javascript" of tags script jQuery. This may be what is preventing. In fact, it is not mandatory, as the site says W3schools, because Javascript is the default scripting language.

Withdrawn and adapted from W3schools:

Want to know why we don’t have type="text/javascript" inside the tag <script>?

This is not required in HTML5. Javascript is the default scripting language in HTML5 and all modern browsers!

In an app that I came to develop, and using jQuery, I had not put the attribute type="text/javascript" at the time of importing it, and it worked perfectly.

I hope I’ve helped!

by Darlei Fernando Zillmer • **3,867** points · Answer 3 · 2018-10-26T17:33:11+00:00

Try this way, basically you are calling the file with the functions before adding the library.

<!DOCTYPE html>
<html>
<head>
    <title>Semana da Engenharia</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="cssIndex.css">
    <!-- responsável pelas funções em boostrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- responsável por instanciar os icones -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
    <img src="bannerWeek.jpg" id="bannerWeek">

        <div id="divLogin">
            <select required id="comboboxLogin">
                <option value="" disabled selected>Selecione o tipo de usuário</option>
                <option value="administrador">Administrador</option>
                <option value="visitante">Visitante</option>
            </select>

            <input type="text" name="senhaUsuario" id="senhaLogin" placeholder="Informe sua senha">
            <span class="iconInPasswordField"><i class="fa fa-lock"></i></span>

            <span id="iconInPasswordField" data-toggle="tooltip"
            title="A sua senha é o seu RA!"><i class="fa fa-info"></i></span>

            <input type="submit" value="ACESSAR" id="btnAcessar" onclick="enviarLogin()">
        </div>

        <span id="edicao2019">6º Edição - 2019</span>
        <span id="unifaeLogo">UNI<span style="color: red">FAE</span></span>
</body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.mask.min.js" type="text/javascript"></script> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js" type="text/javascript"></script> -->
    <script src="js/js.js" type="text/javascript"></script>
</html>