JavaScript doesn't work with bootstrap 4 + thymeleaf - javascript

I'm developing a web app with Spring Boot, Bootstrap 4 and Thymeleaf.
I want to show a bootstrap alert, and then, it hides automatically after seconds (just like a "sucessfully" notification).
I have found a lot of solutions, but all of then need JavaScript. When I tried to use JS on my project, it doesn't work.
I use a default template, which is used in the others views through layout:decorate="~{default}". In this default template, I have the Bootstrap link and scripts:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
...
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
If a put in any view the following code, it does nothing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">
<head>
...
</head>
<body class="text-center">
<div layout:fragment="content">
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
Purchase
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500)
.slideUp(500, function () {
$("#successalert").slideUp(500);
});
});
});
</script>
...
</div>
</body>
NOTE: This is just an example to check that JS doesn't work. I takes it from this post.
When I run this code, the alert is showed, but it never disappears. I have tried with a lot of scripts and never work.
Could be a compatibility version problem?

Hi I think this post address your problem:
Why does jQuery throw the error `fadeOut is not a function'?
In this line <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> you use the slim version of Jquery not the full-one, this prompt when I click to "Add to Wishlist" link" a TypeError in the Firefox develloper tool console.
TypeError: $(...).fadeTo is not a function, this means that the Jquery javascript object $("#success-alert") doesn't have attached a fadeTo function.
You can get the full minified version here: https://code.jquery.com/
Snippet from https://code.jquery.com
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
PS: If you don't need SRI you can remove integrity and crossorigin attributes.

Related

Display javascript alert as toast

I'm sure this has been asked before but the solutions i found can't work in my case...
(One thing to know: I'm a complete beginner with java/android)
as the title says I'm trying to display a javascript alert as a toast but all the solutions i found use the WebChromeClient and the OnJsAlert problem is, im using WebViewClient and i have overridden a lot of it's stuff... some stuff that the chrome one doesn't support... So, my question is: Is it somehow possible to get the javascript alerts from a page so i can handle them with the normal WebViewClient? Thanks!
Here's a sample code that will work in your html page
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function clickFunction() {
M.toast({html: 'I am a toast!'});
}
</script>
<body>
<a onclick="clickFunction()" class="btn">Toast!</a>
</body>
Reference: https://materializecss.com/toasts.html
I suggest you use this light and simple ToastMaker library which is only 1KB in size.
$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">
<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
<button id="mybutton">Show Toast</button>
Check documentation for more examples.

Javascript function not working. Script positioning issue?

I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.

jQuery.validationEngine reference error?

Everything seems to be referenced correctly however I can't get it to work properly. Strangely it worked once but took 10 seconds before the validation message popped up, didn't change anything and tried again but stop working. The only warning i have is event.returnValue is deprecated. Please use the standard event.preventDefault() instead. in the jQuery library.
<html>
<head>
<link rel="stylesheet" href="jQuery-Validation-Engine-master/css/validationEngine.jquery.css" type="text/css"/>
</head>
<body>
<form id="formID">
<input class="validate[required]" type="text" id="agree" name="agree"/>
</form>
<script src='js/jquery-1.10.2.min.js'></script>
<script src="jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jQuery-Validation-Engine-master/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#formID").validationEngine();
});
</script>
</body>
If there is nothing wrong with the above then it may be something else in my project interfering, but any help would be appreciated.
What is happening, probably, is at the time jQuery is loaded your plugin(s) aren't yet loaded so when you call the validationEngine() method, it's not yet defined. I recommend loading your scripts synchronously with Modernizr and call that method once both scripts have loaded.
If you stick with the Modernizr way all you need to do is include your minimized version of Modernizr in the head and call your scripts like below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Your Document</title>
<!--
following script loads first. nevermind the version, I copied it from a script of mine
-->
<script type="text/javascript" src="js/modernizr.2.6.2.min.js"></script>
</head>
<body>
<form id="formID">
<!-- etc -->
</form>
<script type="text/javascript">
Modernizr.load([
{
// following loads next
load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
complete: function() {
if (!window.jQuery) Modernizr.load('js/jquery-1.10.2.min.js');
// this is your local copy of jQuery, in case you might need a fallback
}
},{
// finally the remaining scripts load
load:[
'jQuery-Validation-Engine-master/js/languages/jquery.validationEngine-en.js',
'jQuery-Validation-Engine-master/js/jquery.validationEngine.js'
],
complete: function() {
// all is loaded. do what you want here.
$("#formID").validationEngine();
}
}]);
</script>
</body>
</html>
In my case as I mentioned above updating to jQuery lib 1.11.0 rid the warning for me. (latest chrome)
Here is how I ended up using the validationEngine if interested:
<form id="formID" />
<button type="submit" value="Save" id="Save" onclick="clicked(event);">Submit Survey</button>
function clicked (e)
{
if (confirm('Are you sure you want to submit?'))
{
if ($("#formID").validationEngine('validate'))
{
my.LocalStorage.save();
}
}
e.preventDefault();
}

Javascript misbehaviour on IAgree function

I have following code:
function iAgree(){
alert("Hello");
jQuery('#openAccount').hide();
jQuery('#submitDetails').show();
}
I am calling it using:
<div class="openAccWraper">
<div class="openAccDetail"> </div>
<div class="questionContact">
<input type="checkbox" name="iAgree" id="iAgree" value="1" />
</div>
</div>
<img src="img/btnSubmitDet.png" border="0" />
I am getting following error:
Uncaught TypeError: object is not a function
I think the problem may be with the iAgree being id as well, and IIRC some (all?) browsers define the global named same as id (if it is possible as identifier). So, iAgree() tries to call DOM object, which obviously fails; and it also explains why renaming solves it.
To check if this is the case put onclick="alert(iAgree); iAgree();" and see if it alerts function or InputElement.
I think the problem is that your code is not being loaded onto the page properly. If you wrap your function code in the head or the body tag of your html, your code should work. e.g.
<body>
<!-- html -->
<!-- load your script at the bottom of the body -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function iAgree(){
alert("Hello");
.........
}
</script>
</body>
Or
<body>
<!-- html -->
<!-- load your script at the bottom of the body-->
<script src="jquery.js" type="text/javascript"></script>
<script src="iAgree.js" type="text/javascript"></script>
</body>
Here's a minimal working fiddle http://jsfiddle.net/SZYH3/2/.

Open lightbox when page loads

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Categories

Resources