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.
Related
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>
It seems for some reason the items option here doesn't work. I'm sure I'm doing something wrong but can't get the error. Can you help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test jquery</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]'});
});
</script>
</head>
<body>
<div class="div1">
<img src="home-slider-next-button.png" width="26" height="24" alt="test2">
</div>
</body>
</html>
Ok I took a closer look at the tooltip code and see that it seems it doesn't really take the alt attribute for content. It only uses items content as a selector. So my solution, for now, is to use the content option like this:
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]', content:function(){ return $(this).attr('alt'); }});
});
hope it helps others with the same problem.
I know there are similar kind of questions asked and answered as well. But my problem is different. Here is code sample that I am using to load and stylize my content.
$("body").on("click","[data-view]",function(){
var view=$(this).attr("data-view");
$("#mainView").load("pageRouter.php?view="+view).trigger("create");
});
I searched forums and found .trigger("create") is the way to stylize the dynamically loaded content.But it is not helping.
Solution
You are doing it incorrectly, load is asynchronous function so you need to wait for it to load the content before you can enhance the content.
You will need to do this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("create");
});
This will work if you are only loading content but if you are loading a full page, with header and footer then use this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("pagecreate");
});
Read more about lead and its callback here.
Working example:
index.php
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$("#index").load("load.php", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
load.php
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a data-role="button">Button</a>
</div>
I'm trying to use knockout and jquerymobile and can't get it to work.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="/nw/scripts/jquery-1.8.2.js"></script>
<script src="/nw/scripts/knockout-2.1.0.debug.js"></script>
<script src="/nw/scripts/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" href="/nw/scripts/jquery.mobile-1.2.0.css" />
<title>title</title>
</head>
<body>
<div>
<script type="text/javascript">
function AppViewModel() {
this.test = [{ "name": "noam", "age": "36" }, { "name": "yael", "age": "34"}];
}
$(document).ready(function () {
ko.applyBindings(AppViewModel());
});
</script>
<ul data-bind="foreach: test" id="myList">
<li>test <span data-bind="text: name"></span></li>
</ul>
</div>
</body>
</html>
When I run this I get the following error:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
When I comment out the jquerymobile scripts, it works.
Any help would be appriciated
The immediate cause of the problem is the placement of the <script> block where ko.applyBindings is called. The example works as-is if you move the <script> block into the <head> tag, as follows: (also note use of pageinit event and data-role="page" attribute)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<title>title</title>
<script type="text/javascript">
function AppViewModel() {
this.test = [{ "name": "noam", "age": "36" }, { "name": "yael", "age": "34"}];
}
$(document).bind('pageinit', function () {
ko.applyBindings(AppViewModel());
});
</script>
</head>
<body>
<div data-role="page">
<ul data-bind="foreach: test" id="myList">
<li>test <span data-bind="text: name"></span></li>
</ul>
</div>
</body>
</html>
Keep in mind that both jquery mobile and knockout alter the DOM, and the DOM error is symptomatic of a clash between them, where one library has moved a DOM element that the other one has subsequently tried to address.
To get JQM and knockout to work together (which they do), you need to be quite familiar with when/how JQM makes its changes to the DOM. This page might be a good starting point.