I am a beginner with this so it may be basic.
I have included all the files, and try to add a button.
I see the button but when clicked I get this error:
Uncaught ReferenceError: $ is not defined
the code :
<head>
<meta name = "viewport" content="width=device-width, initial-sclase=1">
<title>Create</title>
<link rel="stylesheet" type="text/css" href="Stylesheets/main.css"/>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();">Clickit</button>
<! --- scripsts
<! --- bootstrap js files
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<! --- my java script file
<script src="javascripts/main.js"></script>
</body>
Assuming this is all my code, I also get some other errors on consule like :
util.js:56 Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:56
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
//and this one
Failed to load resource: the server responded with a status of favicon.ico:1
EDIT :
My project has folders structure: Bootstrap->js-> inside jquery.min.js and bootstrap.min.js, all under 1 folder which is my project.
To get bootstrap, go to http://getbootstrap.com/docs/4.1/getting-started/download/. There it tells you what you need to use bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
You can also go to http://getbootstrap.com/docs/4.1/getting-started/introduction/ to get the html tags to put in bootstrap.
I think that's probably the problem. Try with those.
Edit:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="btn btn-success" onclick="$(this).hide();">Clickit</button>
</body>
I'm assuming you wanted that?
Well I guess it is too basic so some of you didn't see, my comment was wrong, it should be closed :
<!-- jquery files -->
Now it works.
Related
I am trying to hook up summernote wysiwyg with Laravel 8, no matter what I do I am getting a constant jquery error. I have tried to use webpack for the scripts and added scripts directly to the page. The order to my scripts should be correct and I am executing the code after the scripts However, the error is a basic error and I can't nail down the issue.
The webpack file is default and I have run npm run dev & prod.
The code listed put into a basic HTML file runs with no errors, there must be something I am doing with Laravel.
jquery.js:4055 Uncaught TypeError: "#summernote".summernote is not a function
App.blade.php
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script type="text/javascript" rel="script" src="{{asset('js/app.js')}}" ></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
//rest of the template is out of the box Laravel base install with auth installed
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
<script type="text/javascript" rel="script" src="{{asset('js/main.js')}}" ></script>
</body>
</html>
Main.js
jQuery(document).ready(function() {
/* $('#summernote').summernote({
placeholder: 'Hello Bootstrap 4',
tabsize: 2,
height: 100 */
// Code still produces the error here
});
});
$('#summernote').summernote({
placeholder: 'Hello Bootstrap 4',
tabsize: 2,
height: 100
});
// Code still produces the error here
Happy to provide more information, help will be greatly appreciated.
This works for me with these
Before the end of </thead>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
Inside <form>
<div id="summernote"></div>
Before the end of </body>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
Jsfiddle Preview
Useful links
Summernote Getting started
Summernote Examples
Issue might be Summernote get loaded before the JQuery library
I found a solution, I cant take credit. An older slightly related Laravel issue had a solution:
Laravel 5.4 Script loading issue
The contributor is #jordan
By isolating the script into a #section and adding $yield('scripts') below the js files solved the problem. Still not sure what Laravel is doing to the scripts as the page loads, but I have a solution. Thanks for all of your help those who contributed, I always value the input and suggestions.
Im building a page using Bootstrap and still feeling my way around. Im trying to load content to a div once the page has finished loading and Im using jQuery .load method. For some reason it always comes back as : load is not a function, even when Ive copied a working example from w3schools.
My code is as follows:
$(document).ready(function(){
$(".carousel-load").load('HTML/avaleht.html');
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="CSS/bootstrap.min.css" >
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<title>ASMRi</title>
</head>
<div class="carousel-load"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Any sort of help is much appreciated!
You're including jQuery two times in your code, and the latter (slim version) doesn't include load() function in it. Since the latter also overrides the former, you get this error.
You need to remove this line from the code:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
To see the difference between the two flavors, this post is a good start.
I'm trying to make a dropdown menu but I get this error:
"Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6"
I found some questions about it here but none of them worked for me. How do I import this popper.js?
edit1:
I just found a way to import with script tag...it was all this time in bootstrap documentation. But, there's one more problem: The code is free of erros but my dropdown button isn't working. I tried every single dropdown in bootstrap documentation, I ctrl+c - ctrl-v all of them and none of them are working, I click on the button and nothing happens :(
!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>About us</title>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Sobre-Nós.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
Check this documentation: https://github.com/FezVrasta/popper.js#installation
There are several ways of installing popper.
Good luck!
I solved my problem, it's just:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
I am using the CDN version of materializecss
<html>
<head>
<!-- css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
</head>
<body>
<!-- page body -->
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
and getting the following error in console
Uncaught TypeError: Cannot read property 'swing' of undefined
at materialize.min.js:6
(anonymous) # materialize.min.js:6
It looks like Materialize uses extend, so you'll need the full version of jQuery - the slim version will not work.
When you use material Design Bootstrap,
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" />
</head>
AND Put Script File at end of "body" section:
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script>
</body>
Don't forget to use uncompressed version of JQuery as mentioned above.
Just change the Jquery.slim to a normal Jquery. It works with me
Use 'jquery-3.5.1.min.js' instead of 'jquery-3.5.1.slim.min.js'.
It worked for me.
Using the updated version of the CDN worked for me. In the MDBootstrap website
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
></script>
This is the follow up of question Grid For HTML app's based on this answer
I've tried to create the data table using https://www.datatables.net/ the js files coming with this added to my existing project folder
and following is my <head> tag
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>AndRemedy</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="jqm.autoComplete-1.5.2-min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<!-- DataTable reference starts here -->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
</head>
But when I run this getting
Uncaught TypeError: Cannot read property 'orientation' of undefined : jquery.mobile-1.0rc1.min.js:45
Note : Am trying to develop a hybrid app using PhoneGap,HTML5
As the error says, there's a TypeError in you jquery.mobil script. You can try to update it with the last version. Don't forget the stylesheet.
If you still have an error, try the uncompressed version.
You are using referencing two jquery files in your script. Only one is needed. Remove the first one and move the rest of the jquery and it's dependency files to the body tag.