html2canvas not working after hosting on godaddy - javascript

i use html2canvas to generate my table as pdf, when i run on my visual studio, it works fine, but after i publish on godaddy, first javascript pop up message appear, but the pdf never downloaded, my adblock plus is disabled and i using chrome and edge to access it, by the way this is also my first time to hosting a web
<head runat="server">
<title></title>
<link rel="stylesheet" href="css/Style.css" />
<script src="jsfiles/html2canvas.min.js"></script>
<script src="jsfiles/pdfmake.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function Export() {
alert("Sabar Ya!!!");
html2canvas(document.getElementById('perubahantarif'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("APPEM.pdf");
alert("Mendownload");
}
});
}
//my table id
<table id="perubahantarif">
//my button
<input type="button" id="btnExport" value="Export" onclick="Export()" class="auto-style2" />
i put all of them inside the same aspx page
i expect the pdf will downloaded like in my local visual studio
the error is that pdf never downloaded when i publish to godaddy

Okay after you updated question and comments, your src attribute works fine
when you are doing locally.
So you need to change them to current directory path, so use these changes in code
(a dot forward slash prefixed)
<script src="./jsfiles/html2canvas.min.js"></script>
<script src="./jsfiles/pdfmake.min.js"></script>
<script type="text/javascript" src="./js/js.js"></script>
<script type="text/javascript" src="./js/jspdf.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Related

The server responded with a status of 404 (Not Found)

I am trying to instantiate a class in one JavaScript file in another HTML file but I keep on getting this error.
Here is the code for the JavaScript file:
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
And here is the code for the HTML. It should be noted that I am also using chessboard.js and chess.js and that everything is saved in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="css/chessboard.css" />
</head>
<body>
<script src="js/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="js/json3.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/chessboard.js"></script>
<script src="class.js"></script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
What is causing this error and how can I fix it?
This could be a result from improper file locations, like #sideroxylon said, js/class.js instead of class.js.
"The HTML <base> tag is used to specify a base URI, or URL, for relative links." https://www.tutorialspoint.com/html/html_base_tag.htm This could be another reason your file is inaccessible.
It could also be from certain URL's being blocked. Try opening Developer Console (CTRL-SHIFT-I or F12) and looking for any errors on your page.
If you're loading over HTTPS any content from an HTTP source may be blocked. Here is your exact code (using online versions of each library) but with the class.js file loaded in as a regular script tag and including the starting <body> tag.
https://jsfiddle.net/ckazwozg/ As you should see, it is working quite well.
Edit: For convenience, here is the raw source code from the JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.js"></script>
<script>
// class.js
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
</script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
I had the same error however what I did was ensure all my files are been saved to the root folder in your case I think that's js(since all your extension points to that location) in my case I've used only the file name after giving it javascript extension (.js) e.g...

change() fires on page loading

Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>

Code text appears instead of executing

I need some helping loading my JavaScript game on Chrome.
I wanted to code the traditional Snake game in JavaScript using a framework called p5.js, and I started with the canvas. The problem happens when I open the JavaScript file in Chrome (which I linked in my index.html file with a script tag).
Instead of the grey canvas appearing, per my JavaScript code, the code itself shows up on the Chrome page. Here's my code, have a look:
HTML
Snake | JS
<body>
<script src="F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src="F:\Code\JS\Snake\sketch.js" type="text/javascript"></script>
</body>
</html>
And here's the JS:
function setup() {
createCanvas(800, 800);
}
function draw() {
background(51);
}
Specs:
Chrome, Windows 10 Anniversary Edition.
P.S. Javascript is enabled, I have checked.
Try these things
1) Test your js code on www.codepen.io/pen/, some javascript doesn't run properly when local. (F:\Code)
2) Try to put your script at the end of the body tag. Attention that the scripts are loaded in the order they appear. Consider the dependencies.
Assuming the path F:\Code\JS\p5\p5-zip\ to your files are correct and you are not working in a zipped folder.
You should have a file like index.html, wich will be the root of your website.
Here's a minimal example, including your scripts:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src = "F:\Code\JS\Snake\sketch.js" type = "text/javascript"></script>
</body>
</html>
Your javascript files should be placed in the bottom of the page,
just before the closing body tag
You must reference your js file in a good order for preventing some dependency issues
If you are able to browse your index.html file, right click on the page -> "show source code" and try to click on your js files reference, if the path is not correct you will have a 404 not found error.

How include an external JS file in a JSP page

I have an spring mvc app where in my main page, I need use an javascript file. I try include the file this way:
<script type="text/javascript" src="js/index.js"></script>
but when I running the application, the system behavior seems like no script is running. T also try this:
<script type="text/javascript" src="<c:url value='js/index.js'/>"></script>
but the result was the same. Someone have any idea why this is happening?
ps.: the entire code of my page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Sair</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>
The script should open my subpages in a pop-up windows, but they are being opened in the browser window.
** UPDATE 1 **
My index.js is:
$(document).ready(function(){
setupPopup();
});
function setupPopup() {
$('a').click(function() {
$('#content').load($(this).attr('href'));
$('#container').append('<div id="cover">');
$('#results').fadeIn(500);
popupPosition();
});
$('#close').click(function() {
$('#results').fadeOut(100);
$('#cover').remove();
});
$(window).bind('resize', popupPosition);
}
function popupPosition() {
if(!$("#results").is(':visible')){ return; }
$("#results").css({
left: ($(window).width() - $('#results').width()) / 2,
top: ($(window).width() - $('#results').width()) / 7,
position:'absolute'
});
$('#results').draggable();
}
but when I running the application, the system behavior seems like no
script is running.
This is because the browser is unable to load the javascript 'index.js' from the specified location. If you open the browser console and go to the 'networks' tab, you will see 404 (resource not found) against it. You cannot specify a relative URL to a JavaScript in a JSP file that way.
You need to provide your folder structure (where index.js is located in your project) and how you have configured web.xml. But if you try the following, it will surely work:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>
And then keep the 'js' folder containing 'index.js' at the same level as 'WEB-INF'.
Check the path of the index file and then make sure that the code is correct.I assume that js is a folder.Post the index.js code.
In hopes of saving others the half hour it cost me to resolve this, VHS's answer needs an update for anyone who has upgraded to Jakarta. The reference needs to be: <script type="text/javascript" src="${jakarta.servlet.jsp.PageContext}/js/index.js"></script>
If "myJavascript.js" is located in same dir as jsp page:
<script type="text/javascript"><%#include file="myJavascript.js" %></script>

SoundManager 2 360Ui Installation

I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>

Categories