I am trying to make a full page dropzone using Dropzone.js using the following code.
However, when dragging files onto the body of the document, they are not picked up by Dropzone and are instead opened by the web browser.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="dropzone-5.7.0\dropzone-5.7.0\dist\dropzone.js"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var myDropzone = new Dropzone(document.body, {
url: "/test/"
});
});
</script>
</body>
</html>
Reading this post help me understand something new, thus this is a simple report.
By putting the <!DOCTYPE html> tag into html, you tell the browser to run in a standard html mode.
Back to this case, since you have a body with nothing, it is zero height which cant drop file. If you remove the <!DOCTYPE html> tag, the body will as height as the browser client. Welcome to the Quirks mode.
Related
WHAT is problem in linking javascript code to html code???
my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PARUL</title>
<script src="script.js"></script>
<script>
console.log(x)
</script>
</head>
<body></body>
</html>
my javascript code:
var x="hello world";
You have already linked your HTML code with your JS file.
Follow these steps :
Right click on your mouse and you will get the option Inspect at the bottom.
Click on it and you will get the developer tool having multiple tabs in it like Elements,Console,etc.
You just need to click on the Console tab. Then you will able to see the output which you have given the statement console.log("")
I am creating a website, I am using a NodeJS server. In my public folder I have a script named website.js and it has the jQuery code to give a console.log when the h1 is clicked. (Code Below). But when I click on the h1 in the browser it does not work. The file is loaded properly, gives no 404 error and my CSS stylesheet works fine.
Further Testing: I did a simple test to see if it would give back the text when I called the variable (test code below) it responds with: "" (two quotation marks) so it must not be recognizing it.
//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
console.log("Clicked");
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/javascripts/website.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>
<h1 id="testh1">TEST</h1>
</body>
</html>
You need to load jQuery before your script.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
You need to wait for the DOM to be ready before accessing any elements in it. You can either do it with the following code:
$(document).ready(function() {
$("#testh1").on("click", function(){
console.log("Clicked");
});
});
or by putting your <script>s at the bottom of the <body> instead of in the <head>.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
</body>
You're getting an empty string in your test code because your #testh1 element hasn't been loaded yet.
I have an HTML page that calls a JS file. Within that JS file I need to know what the URL of the HTML page is.
So far I have this.
HTML -
<!doctype html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Within my main.js I have the following:
$(function() {
$ = jQuery;
window.remoteUser = "%globals_server_REMOTE_USER%";
window.targetURL = "%globals_asset_url%";
console.log(document.referrer);
});
I thought document.referrer would return the URL of the html page. However it returns a blank line in the console.
Any help would be great. Thanks
Try this,
console.log(document.URL);
OR
console.log(window.location.href);
since i read that it doesn't work in some versions of firefox
location.href used to get url the of page.
jQuery(document).ready(function(){
jQuery("#url1").html(location.href);
});
DEMO
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??
I was wondering, how I get the content of a loaded script, stylesheet, ... bye an accessing an id set on the element.
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<script id="test" src="test.txt" type="text/isis-template"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$('#test').GET_CONTENT_OF_LOADED_FILE
});
</script>
</head>
<body>
</body>
</html>
Background: I want to load HTML templates (e.g. for mustach, knockout), but don't want to write them into the page, I'd rather have them in a seperate file. Now I saw that I can load any file with the script or link tag, so I was testing if I can load them like this....
Any comments why this might be a bad idea or how it can be done better are appreciated.
Try using load()
$(function () {
$('#test').load('yourfolder/test.html', function(resp){
alert(resp);
});
});
If you have already load the contents in some html element
contents = $('#test').html();
So you want the content of text/isis-template file when document is ready?
You are lucky because this file doesn't fall for CORS but mine(the answer i was looking for and came here today) do.
Well just do ajax!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$.ajax({ url: "test.html"})
.done(function(cont) {
var GET_CONTENT_OF_LOADED_FILE=cont;
});
});
</script>
</head>
<body></body>
</html>
If you use debug tools and see the network activity, you will see that it does not load the external files (since it is not a text/javascript, and the browser does not know how to handle it)
(wrong test on my part, was testing local files)
So you only have a tag there with an id and an external resource in the src attribute. Treat it as just metadata.
You will have to manually load the resources
something like this
// load external template resources
$('script[type="text/isis-template"]').each(function(){
$(this).load(this.src);
});
For actual use you would need to make sure the templates are loaded before you try using them..