I got the example from the official xterm site
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<script src="node_modules/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body>
</html>
but I always got a "Uncaught ReferenceError: Terminal is not defined"
How I can define Terminal?
Related
I am wanting to experiment with the jsPDF library but I can't seem to get it to load.
From my Visual Studio MVC _Layout.cshtml page.....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<main role="main">
#RenderBody()
</main>
#RenderSection("Scripts", required: false)
</body>
</html>
From my Visual Studio MVC pdf.cshtml page...
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form id="form1">
<div class="btnExport">
<img id="pdfBtn" src="/images/pdf.jpg" style="height: 30px;" />
</div>
</form>
#section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.es.min.js">
</script>
<script type="text/javascript">
const doc = new jsPDF();
$("#pdfBtn").click(function () {
doc.fromHTML($('#form1')[0], 15, 15, {
width: 170
}, function () {
doc.save('sample-file.pdf');
});
</script>
}
I am receiving the following error messages in the browser console...
I've tried several variations/combinations of the variable declaration (as taken from the documentation on the jsPDF GitHub site) but to no avail. Any assistance is greatly appreciated.
I have setup Angular 2 with ASP.NET core, using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
I followed the standard setup but the App.component.html is duplicating the html and body tags.
When Pressing Control U (to view source) the html looks like:
<html>
<head>
....
</head>
<body>
<app>
<html>
<head>
<style>
...
</style>
</head>
</app>
</body>
</html>
</app>
...
</body>
</html>
redacted
None of my components have html or body tags in them. the only one that has html or body tag is the initial page
My _Layout.cshtml html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - HotSnail</title>
<base href="/" />
<script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
<script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="~/content/modules/animate/animate.css" rel="stylesheet" />
<link href="~/content/global.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
My Index.cshtml
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
The above code is what should be served, now the first bit of angular should be the app.component
app.component.html
<ribbon></ribbon>
<div id="content">
<router-outlet></router-outlet>
</div>
ribbon.component.html:
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>
This is all the components that should be injected on the first page
UPDATE*
So I have done some more research and it seems to be a known bug. As it says here:
https://github.com/aspnet/JavaScriptServices/issues/662
I cant quiet figure out their hacky solution
Here is hacky code that fixes this:
return requestZone.run>(() =>
platform.serializeModule(AppModule)).then(html => { resolve({ html:
html.slice(27, html.length - 14).replace('', '') }); },
reject);
Also in index.cshtml I advice changing app to div because we already
have app tag returned from Universal.
Loading...
I'm not sure where that code would go..
UPDATE
This also happens in the DEFAULT project created when doing
dotnet new angular
Does anyone know who maintains these templates as I'd like to post a bug with the development team
Same problem for angular 5.
I fixed it like in suggestion from last comment on https://github.com/aspnet/JavaScriptServices/issues/662 (last comment by salarcode):
boot.server.ts file change the code to this:
resolve({
html: (() => {
let apphtml = state.renderToString();
apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
return apphtml;
})()});
I feel kinda silly asking this question but I have tried everything I know and even consulted the api docs all to no avail.
My question is how to fix:
Uncaught TypeError: Cannot read property 'v0' of null
What I am doing is compiling a dart based chrome app with dart2js using dart-sdk version 1.10 I have also tried dart-sdk version 1.9 with the same result.
All of my code is located at:
https://github.com/dragonloverlord/Pages
I am building my project in pycharm community edition 4.5 with the dart plugin if that matters.
I have tried using 'build mode=debug' but no different message was given I had the source maps set up as well but nothing changed.
The os that I am building on is linux ubuntu 15.04
I have found the solution to the issue and it's actually very simple!
All you have to do is move the dart scripts to the body of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</body>
</html>
Compared to having them in the head of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
A very simple fix that is often forgotten!
Also adding defer to the dart script will fix the issue like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart" defer></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
What do I do to eliminate the double code that's happening?
In about.html.erb I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | <%= #title %></title>
</head>
<body>
<h1>Pages#about</h1>
<p>Find me in app/views/pages/about.html.erb</p>
</body>
</html>
In the browser at localhost:3000/pages/about
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />
<script src="/javascripts/application.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="ra/NXpqBo1ccudzQ2HGHoo3OrZB2bLX732MQl+EJHU4=" name="csrf-token" />
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | About</title>
</head>
<body>
<h1>Pages#about</h1>
<p>Find me in app/views/pages/about.html.erb</p>
</body>
</html>
</body>
</html>
The duplicate is part of app/views/layouts/application.html.erb
I've got it working in all other browsers tested -- Mac Chrome & Firefox, but it fails in Safari. Here is the current source: http://eventchampion.heroku.com
<!DOCTYPE html>
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>EventChampion</title>
<meta name="google-site-verification" content="4ZMUXRmgofgl5Z8oVXF6RbhGNrwJkieaDhmqZOeU_Mw" />
<link href="/assets/application-1c9609bc58b1e77c196de29021583379.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-55cd299d6f8fe22d8853de1220f2c546.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="j8Q8B/apM+we+Kv8NK5bdN216GVpw6zIMYWNWQmHRt0=" name="csrf-token" />
</head>
<body>
<p class='notice'></p>
<p class='alert'></p>
<div id='janrainEngageEmbed'><a class="rpxnow" href="https://EventChampion.rpxnow.com/openid/v2/signin?token_url=%23%3Fauthenticity_token%3Dj8Q8B%252FapM%252Bwe%252BKv8NK5bdN216GVpw6zIMYWNWQmHRt0%253D">Sign In</a></div>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.haml</p>
<script src="https://rpxnow.com/openid/v2/widget" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
RPXNOW.token_url = 'http://eventchampion.heroku.com/users/sign_in?authenticity_token=j8Q8B%2FapM%2Bwe%2BKv8NK5bdN216GVpw6zIMYWNWQmHRt0%3D';
RPXNOW.realm = 'EventChampion';
RPXNOW.overlay = true;
//]]>
</script>
</body>
</html>
I changed a config setting from app_name = "AppName" to app_name = "appname" solved