Am trying to convert div to image using html2canvas lib , but am keep getting that error
html2canvas.min.js:20 Uncaught (in promise) Error: Element is not attached to a Document
at html2canvas.min.js:20
at html2canvas.min.js:20
at Object.next (html2canvas.min.js:20)
at html2canvas.min.js:20
at new Promise (<anonymous>)
at a (html2canvas.min.js:20)
at Vs (html2canvas.min.js:20)
at html2canvas.min.js:20
at HTMLInputElement.<anonymous> (index4.html:18)
at HTMLInputElement.dispatch (jquery-2.2.4.min.js:3)
I not understand what's wrong with my code , when i run the code on jsfiddle it not give me any error when i run it on my local system it give me error.
code
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="phone">45454565756677</div>
<div id="out_image"></div>
<input type="button" value="Data to Image" id="data_to_image_btn" >
<script>
$(function() {
$("#data_to_image_btn").click(function() {
html2canvas($("#phone"), { // no error with : document.getElementById( but nothing is rendered
onrendered: function(canvas) {
console.log('done ... ');
$("#out_image").append(canvas);
}
});
});
});
</script>
</body>
</html>
Try this:
html2canvas($("#phone")[0]).then((canvas) => {
console.log("done ... ");
$("#out_image").append(canvas);
});
The two changes are: pass the first element of the jquery selection to html2canvas, rather than the selection itself. That gets rid of the error ... but for something to happen it seems that you need to treat the call as a Promise, rather than pass an onrendered callback (that's the second change)
Related
My index like this :
...
<html >
<head>
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
</head>
<body class="header-static">
<div class="page-container">
<!-- this is call header, navigaton, content, footer -->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Content/assets/script/jquery-ui.min.js"></script>
...
<script type="text/javascript">
...
</script>
<script>
$(document).ready(function () {
...
});
</script>
</body>
</html>
If I test pages speed using gtmetrix. And gtmetrix recommendation for Defer parsing of JavaScript. So I try to add async like this :
<script src="/scripts/myapp.min.js" async></script>
<script src="/scripts/myapp-themming.min.js" async></script>
it showing following error,
Uncaught ReferenceError: $ is not defined
If I using defer, it make 3 error like this : Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
How can I solve this error?
First move the two scripts in the <body> into the <head> section at the top (above the 3 dots you have added). This is what #Nijin Koderi meant.
The important thing is making sure that jQuery is ABOVE everything else so it is loaded first.
Secondly - you can't just use async as mentioned in the other answer I gave as you will end up with a race condition.
The reason you get less errors with async is purely down to load speed of resources, you will find that with enough loads you will get different errors depending on which scripts download the fastest.
It is much easier while you are learning this to use defer (in fact I nearly always use defer unless you are loading megabytes of JS or your site needs JS within milliseconds to work)
To quote the answer I gave
The easiest way [to defer parsing of JavaScript] is to add defer
attribute to each JavaScript request.
For better performance (difficult) I would recommend using async
instead as this will start downloading sooner and activate each Script
as soon as it is available.
However this often causes issues with 'race conditions' where scripts
may load out of order (i.e. if you are using jQuery and another script
loads before it that needs jQuery you will get an error).
Try defer first and if performance is good use that.
You have two errors as mentioned above, Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
the first problem can be resolved by adding the following js file on the top before any other js as shown below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
Next Error is for select2. For resolving this issue,add the following stylesheet and js file after jquery.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js">
I am using a SAP UI5 application and trying to export table data into a word document but get an undefined error in document. I am using jquery.wordexport.js as in example here. My html code is as defined below
<head>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
<script>
sap.ui.localResources("odataservice");
var app = new sap.m.App({
initialPage:"idodataservice1"
});
var page = sap.ui.view({
id: "idodataservice1",
viewName: "odataservice.odataservice",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content">Hi</div>
</body>
The div content is having a table shown on screen and is not empty, on click of button I am calling below method
onPressExport: function() {
jQuery(document).ready(function($) {
$("content").wordExport();
});
},
I have added both files at the root level and export document does come in but with text 'undefined' written inside it. Tried checking the id at runtime in console and tried different sub div Ids as well but still get undefined error. Please suggest what could be wrong here or am I missing something.
You don't need the 'ready' event inside the OnPressExport:
onPressExport: function() {
$("content").wordExport();
},
I'm using a asp.net site.
I'm including this script in the header.
<script type="text/javascript">
$('#settings, #agency_text').on('click', function () {
$('#logout').fadeToggle('fast');
});
</script>
then I get this error:
Uncaught TypeError: undefined is not a function
The error means that the jQuery library wasn't loaded (correctly).
First you need to load in the jQuery library to be able to perform jQuery functions.
Add this line above your script in html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
For more info check out this page here: http://www.w3schools.com/jquery/jquery_get_started.asp
add $(document).ready(function(){ });
<script type="text/javascript">
$(document).ready(function(){
$('#settings, #agency_text').on('click', function () {
$('#logout').fadeToggle('fast');
});
});
</script>
I also change my code like this
<script type="text/javascript">
$(document).ready(function(){
$('#settings, #agency').click(function () {
$('#logout').slideToggle('fast');
});
});
</script>
It works with "jquery-1.4.1.min.js" :)
I'm getting this error:
Uncaught TypeError: Object [object Object] has no method 'dialog'
This is my relevant HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/Scripts/modernizr-2.0.6-development-only.js"></script>
</head>
<body>
<div id="deleteConfirmationDialog" title="Confirm Withdrawl">
Are you sure?
</div>
<div class="appl-appliedfor">
<a class="deleteLink" href="/Applicant/WithdrawApplication/2">
<img class="appl-withdrawApplication"
src="/Content/Images/Delete.png" alt="Withdraw Application" />
</a>
</div>
<script src="/Scripts/Prime/jquery-1.8.2.min.js"></script>
<script src="/Scripts/Jqueryui/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/Scripts/OnBoard/jquery-form-min.js"></script>
<script src="/Scripts/Prime/bootstrap.min.js"></script>
<script src="/Scripts/Prime/json2.js"></script>
<script src="/Scripts/Prime/selectivizr-min.js"></script>
<script src="/Scripts/Prime/jquery.cookie.js"></script>
<script src="/Scripts/Prime/jquery.maskedinput-1.3.min.js"></script>
<script src="/Scripts/OnBoard/OnBoardAll.js"></script>
<script src="/Scripts/OnBoard/ApplicantAll.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<script src="/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="/Scripts/jqueryui/jquery.ui.dialog.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#deleteConfirmationDialog').dialog({
autoOpen: false,
modal: true
});
});
$('.deleteLink').click(function(e) {
$('#deleteConfirmationDialog').dialog({
buttons: {
"Yes - Withdraw Application": function() {
$(this).dialog("close");
},
"No - Do Nothing": function() {
e.preventDefault();
$(this).dialog("close");
}
}
});
$('#deleteConfirmationDialog').dialog("open");
});
</script>
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"28b6a62eb1fb42829a3191b7c3e270d4"}
</script>
<script type="text/javascript"
src="http://localhost:61108/d90608e9d0044daf98eb343c1b3769d7/browserLink"
async="async"></script>
</body>
</html>
Everywhere I've searched the error is because you have to include jquery and jquery UI.
I've tried including JQuery UI with and without jquery.ui.dialog. No Luck.
What am I missing? Thanks for reading.
Edit
The error points to the this line:
$(document).ready(function() {
$('#deleteConfirmationDialog').dialog({
if I type $.dialog in the console I get undefined
If I reference jquery.ui.dialog.js there is the following error:
Uncaught TypeError: Object function (a, b) { return new p.fn.init(a, b, c) } has no method 'widget'
otherwise there is no other error.
I get 200 OK's for everything.
I've removed the displayed javascript code in to its own file and referenced it last. I have also moved the function that was outside the document.ready event function to inside this function, still getting the same error.
I can see jquery-ui and jquery in the Sources tab.
I don't understand why I can see jqueryui in the sources tab but typing $.dialog in the console results in undefined
Only code that doesn't use external libraries and code that doesn't use the DOM may be executed directly in a <script> tag.
If you search for DOM Elements directly in a <script> tag without waiting for the Document / DOM to be ready, the elements that you are searching for may not exist yet (in the DOM) or they may be incomplete.
Also using JavaScript methods directly in a <script> tag without waiting for the Document / DOM to be ready, the external files might have not been downloaded yet which means the methods from those external files might not exist yet.
In order to be sure that nothing like that occurs you need to put the code inside an event handler -- this ensures the code will be executed only after the event is triggered. The necessary event is $(document).ready(event_handler_function) also shorthanded as $(event_handler_function)..
To learn about web programming, I'm trying a simple html/javascript/php "product search" page. Here is the index.php file:
<html>
<head>
<title>Product Search</title>
<script type="text/javascript">
function mySubmit() {
alert("submitting...");
var product_type = $('product_type').value;
$.post('product_search.php', { product_type: product_type }, function (data) {
alert("result = " + data);
$('body').html(data);
}
return false;
}
</script>
</head>
<body id="body">
<script type="text/javascript">
mySubmit();
</script>
<form class="form" id="myform" method="post" onsubmit="javascript:return mySubmit();">
Product Type:
<input id="product_type" type="text" name="product_type"/>
<br/><br/>
<input id="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
and the product_search.php file is very small:
<?php
$product_type = $_POST["product_type"];
echo "<h1>$product_type</h1>";
?>
The problem is that it seems like the onsubmit event is never called for the form. I thought it was a JavaScript problem (as in, not allowed to run), but if I run an alert instead of calling mySubmit() when the onsubmit event is called, it works!
Also, am I wrong in thinking that the JavaScript just under the <body id="body"> should be run? It is never run either.
So, for those who didn't read all that: why is my JavaScript function not being run when the onsubmit event is fired?
I get the following parsing errors when I run your code:
Uncaught SyntaxError: Unexpected token return
Uncaught ReferenceError: mySubmit is not defined
You are missing the closing ) on your $.post call, which is breaking the parser. Once you fix that, you'll get the $ is undefined error until you reference jQuery.
http://jsfiddle.net/Z6hJK/
<script type="text/javascript">
mySubmit();
</script>
above function is called but when it is called, even document.getElementById('product_type').value gives error (which might not be enabled on your browser to catch) as it product_type turn out to be null as javascript in body gets executed before browser has fully rendered the page. The moment it is getting called, product_type is not yet rendered.
On click also your function is getting called, but this time may be it is failing as you do not have reference to Jquery. include one.