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.
Related
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.
Trying to make the #intro_title bounce when the document is ready. I loaded both the jQuery and jQuery UI libraries and I still get "Uncaught TypeError: $(...).effect is not a function". I suspect that this is an issue with importing the jQuery UI library so...
I tried loading the libraries at the end of the body, head, html, etc. and changed "src" to "href" but I get the same result each time. I even tried both Google's and jQuery's hosted libraries only to meet the same result.
lodge_101.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lodge_101_main.css">
<head>
<title>Scipio Lodge 101</title>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1 id="intro_title">WELCOME TO LODGE 101</h1>
<script src="lodge_101_main.js"></script>
</body>
</html>
lodge_101_main.js
$(document).ready(function() {
$("#intro_title").effect("bounce", { times:3 }, "slow");
});
Why does this continue to happen and how can I fix it? I'm still new to programming so please be very critical of my work, thank you!
you have to load the jquery library before the jquery ui. just change your script tags position. move the jquery script tag at the first position.
<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>
Try defining jquery before jquery-ui.
I'm a newbie to programming and I want to ask something about Javascript.
How to make this script is displayed when the page is loaded?
I want to make "1 people online" with this jQuery pop up.
$(document).ready(function() {
$.sticky('1 user seen this hotel!');
});
Can you all tell me how to use it and how to modify it?
I get this function from http://www.jqueryrain.com/?uOBwr_rL
Please help me.
Thanks, gbu
Sample HTML Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="sticky.min.js"></script>
<link rel="stylesheet" href="sticky.min.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.sticky('The page has loaded!');
});
</script>
</body>
</html>
Please make sure you save this html content as HTML page in the same directory as your sticky.min.js & sticky.min.css files.
If you don't need the sticky functionality (i.e. if it's okay for a user to close the window), you can use an alert:
$(document).ready(function() {
alert('1 user seen this hotel!');
});
Or the jquery dialog: http://jqueryui.com/dialog/
I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.
So here's my html code (Important part is in the triple quotations):
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
"""<script type="text/javascript" src="ToDoApp.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>"""
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list">
<ol></ol>
</div>
<div class = "counter">
<h4>Things to do:</h4>
</div>
<div class = "comment"></div>
</body>
</html>
and my .css connection is working perfectly, but my .js/jquery connection is just not functioning. I've tried looking up correct html syntax for including a link, and I tried alternating among a few different links to the jquery library. Is there something I'm missing here, have I put the link in the wrong place, or is the syntax funky? Thanks in advance for any help.
If your ToDoApp.js relies on jQuery then you will need to change the order of your code.
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="ToDoApp.js"></script>
Otherewise, the code that you have supplied shows not reliance on jQuery.
The best way I have found to debug issues with JS or CSS files not being included, is to monitor the network traffic with your browsers Debugging tools.. In IE, press F12, and then click on the Network tab. Click 'Start Capturing' and re-navigate to the page.
If a 404 is returned, the path is probably wrong.. From here, you can look at the path the application actually tried to request its file from.
Other errors require different investigations. If you don't even see the file show up in the requests list, then check the Console tab to see if the browser has logged any messages that may pertain to the situation. As per Jeff's answer, if the problem is that something in your ToDoApp.js relies on jQuery, then you will see messages in the console that point to that issue, such as $ is undefined.