I am trying to integrate jQuery ClockPicker into my react app, but it won't work.
I have possibly tried the all possible ways without success. jQuery itself works well, but the ClockPicker doesn't.
It gives me an error:
Uncaught TypeError: clockpicker.clockpicker is not a function
These are my HTML and CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="The Brring Web Client">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" integrity="sha256-lBtf6tZ+SwE/sNMR7JFtCyD44snM3H2FrkB/W400cJA=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-87DrmpqHRiY8hPLIr7ByqhPIywuSsjuQAfMXAE0sMUpY3BM7nXjf+mLIUSvhDArs" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
This is the function where I initialize the ClockPicker:
import * as $ from "jquery";
class example {
... other staff
initializeTimePicker() {
jQuery(function($) {
let clockpicker = $(".clockpicker");
clockpicker.clockpicker();
});
}
}
export default new CallUtil();
And finally, I call this function in another component's componentDidMount lifecycle:
import CallUtil from 'some_folder'
componentDidMount(): void {
CallUtil.initializeTimePicker();
}
What have I done wrong?
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?
I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?
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>
I want to make a fresh angular project with angular material. Installed everything with bower install, imported all the necessary files in my index.html. But styles aren't applied.
My index file
<!DOCTYPE html>
<html lang="en" ng-app="yathzee" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Yathzee app</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="assets/libs/bower_components/angular-material/angular-material.min.css">
<link type="text/css" rel="stylesheet" href="assets/libs/bower_components/angular-material/layouts/angular-material.layouts.min.css">
</head>
<body>
<script src="assets/libs/bower_components/angular/angular.min.js"></script>
<script src="assets/libs/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="assets/libs/bower_components/angular-material/angular-material.min.js"></script>
<script src="dashboard-environment-configuration.js"></script>
<script src="app.js"></script>
<script src="app/shared/menu.Controller.js"></script>
<div ng-controller="menuController" ng-cloak="" class="navBardemoBasicUsage">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="vm.currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<main ng-view></main>
</md-content></div>
</body>
</html>
App.js
'use strict';
// Declare app level module which depends on views, and components
var yathzee = angular.module('yathzee', ['ngMaterial','dashboard-environment-configuration', 'ngAnimate','ngAria']);
yathzee.config(['$mdThemingProvider',
function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('red')
.accentPalette('amber');
}
]);
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?