I am trying to build an HTML page with Adaptive Card Designer.
I am following the instructions, using the CDN approach per this documentation:
https://www.npmjs.com/package/adaptivecards-designer
Any input is appreciated. Thanks a lot! :)
It is throwing the following error:
Uncaught ReferenceError: ACDesigner is not defined
My HTML file is the following:
<html>
<head>
</head>
<script src="https://unpkg.com/adaptivecards#latest/dist/adaptivecards.min.js"></script>
<script src="https://unpkg.com/adaptive-expressions#4/lib/browser.js"></script>
<script src="https://unpkg.com/adaptivecards-templating#latest/dist/adaptivecards-templating.min.js"></script>
<script src="https://unpkg.com/markdown-it#8.4.0/dist/markdown-it.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script type="text/javascript">
window.onload = function () {
let hostContainers = [];
let designer = new ACDesigner.CardDesigner(hostContainers);
designer.assetPath = "https://unpkg.com/adaptivecards-designer#latest/dist";
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor#0.17.1/min/vs' } });
require(['vs/editor/editor.main'], function () {
designer.monacoModuleLoaded();
});
designer.attachTo(document.getElementById("designerRootHost"));
};
</script>
<body>
<div id="designerRootHost"></div>
</body>
</html>
monaco-editor has impacts on the process of loading modules, please change the order and load adaptivecards-designer first
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
Related
I'm getting an Uncaught ReferenceError when I try to load this script, any suggestions?
index.html:12 Uncaught ReferenceError: mobilenet is not defined
at index.html:12
<html>
<head>
<title>Something else Introduction</title>
<!---- Import Script---->
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript" </script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"</script>
</head>
<body>
<img id="img" crossOrigin src = "https://i.imgur.com/e5KD2lt.jpg">
<h1 id="message">Hello, I'm a simple web page!</h1>
<script>
mobilenet.load().then(net => {
console.log('Model loaded to memory!')
const theImage = document.getElementById('img')
net.classify(theImage).then(result=> {
document.getElementById('message').innerText = `
Detected: ${result[0].className}
Probability: ${result[0].Probability}
`
})
})
</script>
</body>
</html>
The script tags are missing closing brackets
Just change in your <head> tags as the following:
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript"></script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"></script>
Additional suggestion:
Use your <script> tags at the end of <body> tag and not in the <head> or just simply use async attribute. It will help the page load performance. Read further in this answer for longer explanation.
I hope this helps!
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
I get this exception trace:
TypeError: element.get is not a function
at link (http://localhost:9071/js/class-editor-canvas-directive.js:6:33)
at invokeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8841:9)
at nodeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8335:11)
at compositeLinkFn (http://localhost:9071/bower_components/angular/angular.js:7731:13)
at compositeLinkFn (http://localhost:9071/bower_components/angular/angular.js:7734:13)
at publicLinkFn (http://localhost:9071/bower_components/angular/angular.js:7611:30)
at http://localhost:9071/bower_components/angular-ui-router/release/angular-ui-router.js:4026:9
at invokeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8841:9)
at nodeLinkFn (http://localhost:9071/bower_components/angular/angular.js:8335:11)
at compositeLinkFn (http://localhost:9071/bower_components/angular/angular.js:7731:13)
I'm trying to run an app based on angular.js and paper.js under electron. It works fine running on the web and using chrome as the UI. However, I also want to support a standalone UI using an electron wrapper.
The error above occurs on the last line below:
jModeller.directive('classEditor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
paper.setup(element.get(0));
When running on electron, the debugger reveals that the type of 'element' is:
element: JQLite[1]
> 0: canvas
length: 1
__proto__: Object[0]
But when running under chrome, the debugger shows the type of 'element' to be:
element: jQuery.fn.init[1]
0: canvas
context: canvas
length: 1
__proto__: jQuery[0]
Why the difference? And is there some expression I can use instead of element.get(0) to get this angular directive running under electron?
=====
Some more details.
Here is the 'main.js' that is running under electron:
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;
var express = require('express');
var expressApp = express();
expressApp.use('/', express.static('../assets'));
expressApp.listen(9071);
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 600,
width: 800
});
mainWindow.loadUrl('http://localhost:9071/#/');
});
So you can see I am serving up the application on port 9071, then just using electron to browse to that on localhost.
Within the index.html, all the javascript libraries are loaded:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" class="no-js" lang="en" ng-app="jModeller" id="ng-app">
<head>
<meta charset="UTF-8">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/ng-sortable/dist//ng-sortable.min.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script>
<script src="bower_components/rfc6570/rfc6570.js"></script>
<script src="bower_components/angular-hal/angular-hal.js"></script>
<script src="bower_components/angular-slugify/angular-slugify.js"></script>
<script src="bower_components/ng-table/dist/ng-table.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
<script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script>
<script src="bower_components/angular-prompt/dist/angular-prompt.js"></script>
<script src="bower_components/angular-breadcrumb/dist/angular-breadcrumb.min.js"></script>
<script src="bower_components/highcharts/highcharts.js"></script>
<script src="bower_components/highcharts/highcharts-3d.js"></script>
<script src="bower_components/highcharts/modules/exporting.js"></script>
<script src="bower_components/underscore.string/lib/underscore.string.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/angular-toggle-switch/angular-toggle-switch.js"></script>
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/angular-progress-arc/angular-progress-arc.min.js"></script>
<script src="bower_components/angular-highcharts-directive/src/directives/highchart.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="bower_components/angular-async-series/dist/angular-async-series.min.js"></script>
<script src="bower_components/angular-ui-grid/ui-grid.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/ng-csv/build/ng-csv.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="bower_components/paper/dist/paper-full.min.js"></script>
Quite a lot of libraries, and certainly not all are needed. I just cut this list from another project I was working on. The problem seems to be though, that jquery does not get loaded correctly and made available to angular.
I can see under the dev tools network tab though that 'jquery.js' is succesfully loaded with a 200 status, when index.html is loaded.
It works if I include jquery this way:
<script type="text/javascript">
window.$ = window.jQuery = require(__dirname+'/js/jquery.js');
</script>
Apparently this is a known issue with jquery and electron.
I cant get this simple angular app to work. I know I am probably doing something silly. If anyone can help I would greatly appreciate it.When I run it I'm getting the following error:
0x800a139e - JavaScript runtime error: [ng:areq] Argument 'timesheetListCtrl' is not a function, got undefined
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<!-- Style sheets -->
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="timesheetManagement">
<div class="container">
<div ng-include="'app/HTML/timesheetListView.html'"></div>
</div>
<!-- Library Scripts -->
<script src="scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- Application Script -->
<script src="app/app.js"></script>
<!-- Services -->
<script src="common/common.services.js"></script>
<script src="common/timesheetResource.js"></script>
<!-- Product Controllers -->
<script src="app/HTML/"></script>
</body>
</html>
timesheetListView.html
<div class="panel panel-primary"
ng-controller="timesheetListCtrl as vm">
<div class="panel-heading"
style="font-size:large">
Product List
</div>
app.js
(function () {
"use strict";
var timesheetManagement = angular
.module("timesheetManagement",
["common.services"]);
}());
timesheetListCtrl.js
(function () {
"use strict";
angular
.module("timesheetManagement")
.controller("timesheetListCtrl",
["timesheetResource", timesheetListCtrl]);
function timesheetListCtrl(timesheetResource) {
var vm = this;
timesheetResource.query(function (data) {
vm.timesheets = data
});
}
}());
So, it turns out you have to include timesheetListCtrl.js in index.html