Dropzone not working after add 'defer' on js file - javascript

So I have a dropzone control and everything is working just fine.
Code below:
<head runat="server">
<title></title>
<script type="text/javascript" src="/content/js/jquery-1.11.2.min.js" ></script>
<link rel="stylesheet" href="/content/css/dropzone.css" />
<script type="text/javascript" src="/content/js/dropzone.js" ></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("#dZUploadPhoto").dropzone({
url: "/ashx/file-upload.ashx",
sending: function (file, xhr, formData) {
formData.append("type", "employee");
},
success: function (file, response) {
},
acceptedFiles: ".jpeg,.jpg,.png"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div runat="server" id="divFileUploadBackground">
<div id="dZUploadPhoto" class="dropzone">
<div class="dz-default dz-message">Click or drop photo here to upload</div>
</div>
</div>
</form>
</body>
To speed up page load & eliminate render-blocking javascript files, I put 'defer' on every js file and add "DOMContentLoaded" on document.ready as per below:
<head runat="server">
<title></title>
<script type="text/javascript" src="/content/js/jquery-1.11.2.min.js" defer></script>
<link rel="stylesheet" href="/content/css/dropzone.css" />
<script type="text/javascript" src="/content/js/dropzone.js" defer></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("#dZUploadPhoto").dropzone({
url: "/ashx/file-upload.ashx",
sending: function (file, xhr, formData) {
formData.append("type", "employee");
},
success: function (file, response) {
},
acceptedFiles: ".jpeg,.jpg,.png"
});
});
})(jQuery);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div runat="server" id="divFileUploadBackground">
<div id="dZUploadPhoto" class="dropzone">
<div class="dz-default dz-message">Click or drop photo here to upload</div>
</div>
</div>
</form>
</body>
Now, my code is not working with 2 error message:
Uncaught Error: No URL provided.
Uncaught Error: Dropzone already attached.
I've been searching high & low and still don't get it. Can someone enlighten me and show me the way? Where i did wrong?

The problem is that when you include the line:
Dropzone.autoDiscover = false;
Inside the listener for the DOMContentLoaded, this delays the execution of this line to the point that, when its executed, the default dropzone auto discover feature and the default configuration have already been used.
Just move this line outside the listener:
Dropzone.autoDiscover = false;
window.addEventListener('DOMContentLoaded', function () {
/* Rest of the code */
}
In fact dropzone also has a listener for the DOMContentLoaded and runs the auto discover when that event is fired, but since the dropzone library is registered first on that event it triggers before than your script, at least most popular browsers like chrome of firefox do it this way.

Related

Show alert error message when certain condition arises

I have the following code on page load that I use to show an error alert:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request.QueryString["message"] == "noemployees")
AlertDanger.Visible = true;
This is where the error is called. The page reloads and the error is shown.
if (payFitments == null)
{
Response.Redirect("Default?message=noemployees");
}
I have the following markup
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function () {
$(".alert").fadeTo(1500, 0).slideUp(500, function () {
$(this).remove();
});
}, 3000);
});
-------------------------
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
×
<strong>You must have at least one employee to process</strong>
</div>
How do I show this message without having to load the default page again? Not seeing examples on the web that show this clearly.
You're using JQuery remove, which effectively deletes the alert from your DOM. So showing it again without reloading your page is not possible.
But you could use JQuery detach instead. Then you can insert it again with appendTo.
var alert = null;
function showHideAlert() {
if (alert) {
alert.appendTo("body");
alert = null;
} else {
alert = $(".alert").detach();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<button onclick="showHideAlert();">Show/Hide alert</button>
<div class="alert">ALERT!!!</div>
</body>
Try serving a static html file and then using the alert function in Javascript. You can learn that here. Example for a button press:
<html>
<head>
<script>
function onError() {
try {
...
} catch (...) {
var error
error = "button was pressed"
alert(error)
}
}
</script>
</head>
<body>
<button id="myButton" onClick="onError()">do not click</button>
</body>
</html>
<html>
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" /><%-- Also Check Compatible View --%>
<%-- Put all your jQuery... Here I'm showing an example--%>
<script src="//ajax.microsoft.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.setTimeout(function() {
$(".alert").fadeTo(1500, 0).slideUp(500, function() {
$(this).remove();
});
}, 3000);
});
</script>
<form id="form1" runat="server">
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
× <strong>You must have at
least one employee to process</strong>
</div>
</form>
</body>
</html>
Note:- I think you have missed this... put your jQuery code inside your body tag...

How can I get my javascript work in an asp.net cshtml file?

I have a html input for uploading a picture to my ftp, and I want my JS the detect changes on my button.
My cshtml is:
#using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new {
enctype = "multipart/form-data" }))
{
<input id="uploadFile" placeholder="No file..." disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input id="uploadBtn" type="file" class="upload" />
</div>
<input type="submit" title="OK" />
}
and my script is
<head>
<script type="text/javascript" language="javascript">
document.getElementById("uploadBtn").onchange = function ()
{
document.getElementById("uploadFile").value = this.value;
};
</script>
</head>
When I run my code I get the following message:
0x800a138f - JavaScript runtime error: Unable to get property 'onchange' of undefined or null reference
I checked my html and JS in fiddle, everything works great, so I guess that Razor and JS have some problems with each others.
Any tips?
Try this:
1.
<head>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
document.getElementById("uploadBtn").onchange = function ()
{
document.getElementById("uploadFile").value = this.value;
};
});
</script>
</head>
As per #StephenMuecke : Move your script to immediately before the closing </body> tag (as my view it's best way)
<body> .............. .............
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#uploadBtn').on('change', function() {
$("#uploadFile").val($(this).val());
})
}); </script>
</body>
3.If you use separate script (.js file) then try
$(document).on('change','#uploadBtn' ,function() {
$("#uploadFile").val($(this).val());
});

JavaScript runtime error: Object doesn't support property or method 'addEventListener

Am using Asp.Net 2.0, am trying drag and drop files using asp.net.
for this process am using following js's
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
that's why the error comes like this
JavaScript runtime error: Object doesn't support property or method 'addEventListener
am using IE11
so i was used one code
<meta http-equiv="X-UA-Compatible" content="IE=edge;" />
it is not working
and my script is
<script type="text/javascript" language="javascript">
var selectedFiles;
$(document).ready(function () {
alert("");
if (!Modernizr.draganddrop) {
//alert("2");
alert("This browser doesn't support File API and Drag & Drop features of HTML5!");
return;
}
var box;
box = document.getElementById("box");
alert(box);
box.addEventListener("dragenter", OnDragEnter, false);
box.addEventListener("dragover", OnDragOver, false);
box.addEventListener("drop", OnDrop, false);
$("#upload").click(function () {
var data = new FormData();
for (var i = 0; i < selectedFiles.length; i++) {
data.append(selectedFiles[i].name, selectedFiles[i]);
}
$.ajax({
type: "POST",
url: "FileHandler.ashx",
contentType: false,
processData: false,
data: data,
success: function (result) {
alert(result);
},
error: function () {
alert("There was error uploading files!");
}
});
});
});;
function OnDragEnter(e) {
e.stopPropagation();
e.preventDefault();
}
function OnDragOver(e) {
e.stopPropagation();
e.preventDefault();
}
function OnDrop(e) {
e.stopPropagation();
e.preventDefault();
selectedFiles = e.dataTransfer.files;
$("#box").text(selectedFiles.length + " file(s) selected for uploading!");
}
</script>
and my aspx page is
<body>
<form id="form1" runat="server">
<center>
<div id="box">Drag & Drop files from your machine on this box.</div>
<br />
<input id="upload" type="button" value="Upload Selected Files" />
</center>
</form>
But this application drag and drop files is working fine in chrome and firefox
only problem in IE
Suggest me to get a solution.
Thanks in advance.
take out ie11 from your met tag, and instead add the following code. This is explained here.
/* IE11 Fix for SP2010 */
if (typeof UserAgentInfo.strBrowser !== 'undefined' && !window.addEventListener) {
UserAgentInfo.strBrowser=1;
}
What's your document mode set to in IE?
Press F12 and you should see a dropdown with a number or the word edge, make sure it's set to edge. Even though you're using the meta tag to set the document mode if you previously had it set to anything else it will override that.
Edit the plunkr to see where it fails - I don't have jQuery 1.7.2 to hand...but tested in internet explorer 11 and can't see that error. I'm using the click event as it is an easier event to generate in the browser and it is the addEventListener method that is throwing.
http://embed.plnkr.co/Smm421v5In2YYJAJXNTW/preview
<!DOCTYPE html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" />
<head>
<meta charset="utf-8" />
<title></title>
<link data-require="bootstrap-css#3.0.0-rc2" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#3.0.0-rc2" data-semver="3.0.0-rc2" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="box" style="height: 100px; background-color: red">Click area</div>
</body>
</html>
...and in the script...
'use strict';
/* global $ */
console.log("Hey!");
$(document).ready(function() {
var box;
box = document.getElementById("box");
console.log(box);
box.addEventListener("click", OnClick, false);
});
var OnClick = function() {
console.log('in OnClick');
$("#box").text("Clicked");
};
This is due to compatibility issue add below in the web.config file
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=EmulateIE9" />
</customHeaders>
</httpProtocol>
</system.webServer>

JavaScript function called with button onclick, fails with onload

I am trying to use an external JavaScript function in the body tag: <body onload=function()>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script type="text/javascript" src="js/mqttws31.js"></script>
<script type="text/javascript" src="js/Long.min.js"></script>
<script type="text/javascript" src="js/ByteBufferAB.min.js"></script>
<script type="text/javascript" src="js/ProtoBuf.min.js"></script>
<script type="text/javascript" src="js/fs.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>
</head>
<body onload ="heartbeat()">
<h2>A demo for showing the pub/sub between clients and the message broker</h2> <h3>IoTGateway</h3>
Topic :
<input type="text" name="pub"/>
Message:
<input type="text" name="pub"/>
<button onclick="connect()">
Connect
</button>
<br>
<button onclick="publish()">
Publish
</button>
<br>
<h3>BluetoothID</h3> Topic:
<input type="text" name="sub"/>
<button onclick="heartbeat()">
Subscribe
</button>
<br>
<p id = "test"></p>
<p id="sub"></p>
<script>
function heartbeat() {
alert("hello");
try{
MqttPlugin.subscribe({topic: "$EDC/plugin"});
}
catch(err){
alert(err.message);
}
}
/* try{
MqttPlugin.heartbeat({topic: "$EDC/tum/B8:27:EB:A6:A9:8A/HEARTBEAT-V1/mqtt/heartbeat"});
}
catch(err){
alert(err.message);
}*/
function publish() {
MqttPlugin.publish({
topic:"$EDC/plugin",
data:"Mqtt data"
});
}
function subscribe() {
MqttPlugin.subscribe({topic: "$EDC/plugin"});
}
</script>
</body>
</html>
The function heartbeat is called when I call with the event onclick but fails with onload. In case of onload, it throws an error MqttPlugin not defined. Is it because by the time it calls the function, the js files are not loaded? Could someone help me fix this?
I believe that your basic aim here is to subscribe to a topic automatically when the page is loaded. You can either try:
</script>
<style onload="heartbeat()"></style>
</body>
Or try changing the order of imports.
The first suggestion is just an hack not a full proof solution though.
The basic problem is that the heartbeat function is getting called before cordova_plugins.js is getting loaded. So either delaying the function call or loading the file early will do the trick.
Edited:
This jQuery method might just be the solution:
$( window ).load()
Please find documentation here.

How to trigger click event if selector is loaded from external

Do anyone has similar experience? I would like to load an external file into current page by using .load("...") function. After loading, how can I trigger the click on an image in the <div id="tab-3-list">?
The script
$("#tab-3-list img.coupon_list").on("click", function (e) {}
doesn't function. If I embed the content of list.html into the current body, the above script works.
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
External file list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
Try to use event-delegation at this context since you are loading the DOM elements at runtime,
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
try this..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load uses ajax and thus takes sometime to load data from external page. When you are attaching click event to img.coupon_list, it's not even present in DOM ( in page ).
Try this,
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
This is attaching click only when data from load is returned and added to the DOM.
Use event delegation - .on(), and to trigger click event use .trigger()
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>

Categories