I'm trying to call the M.toast() function in Googles materializecss, but I get an error message:
Uncaught ReferenceError: M is not defined
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" type="text/css" href="styles/materialize.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script type="text/javascript" src="scripts/jquery-3.3.1.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script>
</head>
<body>
<form action="#">
<button class="waves-effect waves-light btn" id="submit" type="submit" name="submit">
Submit
</button>
</form>
<script type="text/javascript" src="scripts/register.js"></script>
</body>
</html>
register.js
(function() {
'use strict';
$('form').submit(
function(e) {
let $radio = $("input:radio[name='myradio']");
if (!$radio.is(':checked')) {
e.preventDefault();
toast();
return false;
}
});
function toast() {
M.toast({html: 'Bitte alle Felder auswählen!'});
}
})();
Did I forget to include something or what is the matter?
Solution: updated MaterializeCSS to version 1.0.0
Related
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
There is a nice solution here for How to make a On/Off button in Ionic
Here's a demo from Codepen
and the code pasted here:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
$scope.someFunction = function(){
alert('I am pressed')
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
My question is how to execute someFunction() on the same ng-click event of the Confirm button which could be like this ng-click="someFunction() && button.clicked=!button.clicked" ?
Instead of using the ; separator, you could move all the logic into someFunction(), and set that function as the expression to the ng-click attribute:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.buttonOn = false;
$scope.someFunction = function() {
$scope.buttonOn = (!$scope.buttonOn);
alert('I am pressed');
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-click="someFunction()" ng-class="buttonOn?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
</body>
</head>
</html>
This is the contents of my main.js:
function initialize() {
console.log("Initialized!");
// Do other stuff to render the map
renderMap();
}
For some reason, this is throwing the error Uncaught TypeError: window.initialize is not a function in the browser.
However, if I change my code to:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
<script>
function initialize() {
console.log("Initialized!")
}
</script>
</body>
</head>
</html>
and main.js just contains
renderMap()
then everything works. What gives?
hi i try to run the basic example of jspanel 2 but the weight is overflow
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsPanel</title>
<link href="src/jsPanel.css" rel="stylesheet">
<link href="src/font-awesome.css" rel="stylesheet">
<link href="src/jquery-ui.min.css" rel="stylesheet" />
<link href="src/styles.css" rel="stylesheet">
<script src="src/jquery-2.1.1.min.js"></script>
<script src="src/jquery-ui-1.11.0.min.js"></script>
<script src="src/jquery.ui.touch-punch.min.js"></script>
<script src="src/jquery.jspanel.js"></script>
<script>
$(document).ready(function(){
$('#sample-basic' ).click(function(){
$.jsPanel();
});
});
</script>
</head>
<body>
<button id="sample-basic" type="button" class="btn btn-primary btn-xs">Try it</button>
</body>
</html>
this is the pluggin
http://jspanel.de/
any jsfiddle example?
Here is the link to your code working in jsfiddle: http://jsfiddle.net/czqa7gu8/
Just apply your css... Or ask what you really need from your css code.