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>
Related
I have a jsp and when it loads it's throwing $(...).idleTimeout is not a function in the console and for this rest of the scripts are not working in that jsp. I have included the jquery and scripts in my jsp as below :
I have tried to include different versions of jquery , but that didn't work either.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/NBO/assets/js/manageRoles.js${asset_id}"></script>
<script type="text/javascript" src="/NBO/assets/js/manageGuestUserMain.js${asset_id}"></script>
<link href="/NBO/assets/css/updateCredentials.css${asset_id}" rel="stylesheet" type="text/css" />
<link href="/NBO/assets/css/manageRoles.css${asset_id}" rel="stylesheet" type="text/css" />
I have found the reason for the error. It's because the JSP was importing the jquery through , and the JSP was defined the in spring tiles view name and the tiles was extending a default definition which had some jquery already. Since there were multiple jquery import , it was failing. I simply commented the jquery import in my JSP i.e. and it worked smooth.
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.
I am facing some issues. I am trying to open the confirmation box using javascript click event but getting the following error.
Uncaught TypeError: this.getUID is not a function
at Confirmation.init (VM8904 bootstrap-confirmation.js:151)
at new Confirmation (VM8904 bootstrap-confirmation.js:16)
at HTMLSpanElement.<anonymous> (VM8904 bootstrap-confirmation.js:427)
at Function.each (VM8902 jquery.js:2)
at m.fn.init.each (VM8902 jquery.js:2)
at m.fn.init.$.fn.confirmation (VM8904 bootstrap-confirmation.js:419)
at getConirmation (VM8906:19)
at HTMLDivElement.onclick (VM8987:14)
I am explaining my code below.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div onclick="getConirmation();">
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="top"></span></p>
</div>
<script>
function getConirmation() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
}
</script>
</body>
</html>
Here I need when user will click on that icon the confirmation box will open on the top of that icon. Here is my plunkr code. Please help me to resolve this issue.
It seems you are using bootstrap version 3.0 + and bootstrap-confirmation doesn't support 3.0 version. So you can either downgrade your bootstrap version or use another library from here.
Bug description here.
Reading I've been testing your Plunker code, and the main problem is with the jQuery and Bootstrap versions you're using. According to boostraps-confirmation documentation, you need...
jQuery >= 1.9
Bootstrap Popover >= 3.2 (included in bootstrap.js)
I've changed to this...
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
... and works without problems.
On the other hand, to use this plugin you don't need to create the onClick event in the element where you want to apply it. Just execute the plugin to apply it to all elements that have data-toggle='confirmation'.
Putting all together...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="bottom"></span></p>
</div>
<script>
$(document).ready(function() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
});
});
</script>
</body>
</html>
NOTE: I leave the CDN just to show the versions I've used. Of course, you can download the libraries to your project if you prefer it.
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.
Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>