I'm trying to implement Bryntum Siesta 4.3.2-lite to Sencha ExtJS 6.2 maded application and keep following ExtJS Essentials book.
I've created Siesta Test Runner's index.html and index.js as well.. Collected required Siesta files; js and css through in Siesta/resources folder. When I ran the Test Runner on browser, it gives this error:
siesta-all.js:45330 Uncaught TypeError: Cannot read property 'store' of undefined
at constructor.initComponent (http://nuri/webex/oweb/test/Siesta/js/siesta-all.js:45330:1458463)
I found an answer on Bryntum forums and says don't include ExtJS files to harness. I did the same and commented ExtJS parts but still errors continues. Any advice is welcome.
Some snippets:
Test Runner (index.html);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Siesta Examples</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-neptune/resources/theme-neptune-all.css">
<!-- Siesta CSS -->
<link rel="stylesheet" type="text/css" href="../Siesta/css/siesta-all.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>
<!-- Siesta application -->
<script type="text/javascript" src="../Siesta/js/siesta-all.js"></script>
<!-- Additional Siesta files, not required if you don't use code coverage feature -->
<!-- <script type="text/javascript" src="../siesta-coverage-all.js"></script> -->
<!-- A sample utility class with convenience methods helping you write your tests more efficiently -->
<!-- <script src="lib/Your.Test.Class.js" type="text/javascript"></script> -->
<!-- The test harness -->
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
Harness (index.js);
var harness = new Siesta.Harness.Browser.ExtJS();
harness.configure({
title: 'OWeb Test',
//viewDOM: true,
preload: [
//'../../../webex/build/production/OWeb/app.js',
//'../../../webex/build/production/OWeb/resources/OWeb-all.css',
//'https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-neptune/resources/theme-neptune-all.css',
//'https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js'
]
});
harness.start(
{
group: 'Login',
items: [
'010_login.t.js'
]
}
);
Test file (010_login.t.js);
describe('Testing Login screen', function (t) {
t.it('Should to login', function (t) {
t.chain(
{waitForCQ: 'window[title=Login]'},
{click: '>> textfield[itemId=userName]'},
{type: 'me#adress.com', target:'>> textfield[itemId=userName]'},
{click: '>> textfield[itemId=edtPassword]'},
{type: 'superSecretPass', target:'>> textfield[itemId=edtPassword]'},
{click: '>> button[text=Submit]'},
{waitForCQNotFound: 'window[title=Login]', desc: 'Login window should destroy'}
)
})
});
In your snippet - you are still including the Ext JS library files on the harness HTML page (from cloudflare). You need to remove these files. A sample harness html page can be found here:
https://www.bryntum.com/docs/siesta/#!/guide/siesta_getting_started
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Sample harness</title>
<link rel="stylesheet" type="text/css" href="__SIESTA_FOLDER__/resources/css/siesta-all.css">
<script type="text/javascript" src="__SIESTA_FOLDER__/siesta-all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
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?
Am using a html website template to build an angular project, but am having issues with a custom js script. menu button(to toggle navigation) and some other stuffs in custom.js is not working
i tried linking the scripts files link in index.html, and referenced it in angular.json config file
here is github link to the file https://github.com/donprecious/crtx
here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CREXT | DRD</title>
<!--
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<app-root></app-root>
</div>
<!-- jQuery -->
<!-- <script src="assets/vendors/"></script> -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<script src="assets/vendors/nprogress/nprogress.js"></script>
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts.min.js"></script>
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<script src="assets/vendors/skycons/skycons.js"></script>
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<script src="assets/vendors/DateJS/build/date.js"></script>
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/site.js"></script>
</body>
</html>
Angular.json
"scripts": [
"src/assets/vendors/jquery/dist/jquery.min.js",
"src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
"src/assets/vendors/fastclick/lib/fastclick.js",
"src/assets/vendors/nprogress/nprogress.js",
"src/assets/vendors/Chart.js/dist/Chart.min.js",
"src/assets/vendors/echarts/dist/echarts.min.js",
"src/assets/vendors/gauge.js/dist/gauge.min.js",
"src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
"src/assets/vendors/iCheck/icheck.min.js",
"src/assets/vendors/skycons/skycons.js",
"src/assets/vendors/Flot/jquery.flot.js",
"src/assets/vendors/Flot/jquery.flot.pie.js",
"src/assets/vendors/Flot/jquery.flot.time.js",
"src/assets/vendors/Flot/jquery.flot.stack.js",
"src/assets/vendors/Flot/jquery.flot.resize.js",
"src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
"src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
"src/assets/vendors/flot.curvedlines/curvedLines.js",
"src/assets/vendors/DateJS/build/date.js",
"src/assets/vendors/jqvmap/dist/jquery.vmap.js",
"src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
"src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
"src/assets/vendors/moment/min/moment.min.js",
"src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
"src/assets/js/custom.js",
"src/assets/js/site.js"
]
},
custom.js file
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
this code does not work when i integate the website template, but works when i just click run the template browser
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
it seems that the javascript are rendered,
but when i click on button to toggle menu or any control that as to work with jquery it doesnt work
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?
I got this template from this site: After trying out some templates, they were ok. But trying out this bot template am getting a blank html return on this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>
What could be the issue?
Regards
The template is working fine, the only issue here is that you need to remove following line
document.getElementById("hello-world").innerHTML = content;
I am not sure, why you have added this line. All the messages should be rendered via botui.message.add() method. BotUI will handle content insertion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
// document.getElementById("hello-world").innerHTML = content;
</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');
}
]);