Im trying to do a simple dropzone file uploader. Im not interested in the server side as Im not doing this seriously, just trying the js for the front end. Everything seems ok, the load bar works fine, but then it always show the X image and then I get this insanely long message that contains html.
This confuses me because from the examples ive seen, if there is an error it will display the string from the js. I dont know why it's showing this long message.
Does it have anything to do with the "action" or "file" type?
A screenshot is here
https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13310379_496643860530613_5508631554600071626_n.jpg?oh=1c25de2a0cb0957a68c1e8e2905b52df&oe=57DC5CA0https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13310379_496643860530613_5508631554600071626_n.jpg?oh=1c25de2a0cb0957a68c1e8e2905b52df&oe=57DC5CA0
Edit:
My HTML is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="assets/js/dropzone.js"></script>
<script src="assets/js/dropzone-amd-module.js"></script>
<link href="assets/css/dropzone.css" type="text/css" rel="stylesheet" />
<link href="assets/css/basic.css" type="text/css" rel="stylesheet" />
<link href="assets/css/Style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="dropzone">
<form action="/file-upload" class="dropzone dz-clickable" id="demo-upload">
<div class="dz-default">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
</div>
</body>
</html>
My bad, didn't know you were using the default Dropzone.js. I'd remove the downvote if I could but it's locked in now.
Try
<form action="UploadImages" class="dropzone">
</form>
Remove the <div id="dropzone"> too. You already specify dropzone for the form, so wrapping it in a div with id of dropzone makes no sense.
jsFiddle: http://jsfiddle.net/3zhyg73u/85/ so you can compare your code and see why it's not working.
sorry, Im pretty new to this but i think it's because the errorMessage from the error event receive's a string containing HTML when a failed post request is sent out. you can change the message by doing this. this isn't the best method but it works :/ ohh and i was using jquery for this particular project
var myDropzone = new Dropzone('#icDropZone', {
url: "/file/post",
error: function(response, errorMessage, xhrObj) {
if(response.status === "error") {
$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});
$('.dropzone .dz-preview .dz-error-message').attr('style','display:block;opacity:1;top: 150px;background:#D44F4F;');
$('.dropzone .dz-preview .dz-error-message span').html('Error uploading image')
}
}
});
Related
I'm trying to achieve the following:
A simple Java Spring application, after receiving a GET request, sends me an HTML page with a form. When the button is pressed in this form, there is a POST request with an XML content sent back to the Spring app, which, in turn, responds with an HTML page. I would like to be able to display this response as a proper page in a browser, including all the scripts being downloaded and fully functional.
The form HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="UTF-8" />
<title>Request Report Form</title>
</head>
<body>
<form method="post" action="">
<script>
function sendXml()
{
event.preventDefault();
const request = '<?xml version="1.0" encoding="UTF-8"?>\n' +
<!-- skip -->
$.ajax({
type: 'POST',
url: url,
dataType: 'html',
data: request,
contentType: 'application/xml;'
}).done(function (data) {
$("html").html(data);
}).fail(function (data) {
$("html").html(data.responseText);
});
}
</script>
</form>
</body>
</html>
The $("html").html(data); part above is supposed to replace the current page's content with the content received from the server, as far as I understand. But the page is not being displayed. There is an error message in the browser's console: "TypeError: n.head is null", it seems to have to do with JQuery, see the image link.
My questions are, why does JQuery kicks in and what is it trying to do? And how do I fix this error?
I don't know much about frontend side of development, so please go easy on me ;-)
Edit
Just realised that my first question is moot, I am trying to display the response page using JQuery, so obviously, it kicks in at that point. But the call fails for some reason.
The content of the response from the server that I'd like to see rendered by the browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Report</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body data-user="eyJjaGFydCI6eyJyZW5kZXJUbyI6IlByb2dyZXNzIiwidHlwZSI6ImNvbHVtbiJ9LCJzZXJpZXMiOlt7Im5hbWUiOiJQcm9ncmVzcyIsImRhdGEiOlsxLDEsMCwwLDAsMCwwLDAsMCwwXX1dLCJ0aXRsZSI6eyJ0ZXh0IjoiUHJvZ3Jlc3MifSwieEF4aXMiOlt7InR5cGUiOiJsaW5lYXIiLCJjYXRlZ29yaWVzIjpbIlJlZ2lzdGVyZWQ8YnI+KDQuNi4xMykiLCJTZXNzaW9uIDE8YnI+KDEyLjcuMTUpIiwiU2Vzc2lvbiAyIiwiU2Vzc2lvbiAzIiwiU2Vzc2lvbiA0IiwiU2Vzc2lvbiA1IiwiU2Vzc2lvbiA2IiwiU2Vzc2lvbiA3IiwiU2Vzc2lvbiA4IiwiRmluaXNoZWQiXX1dLCJ5QXhpcyI6W3sidGl0bGUiOnsidGV4dCI6IlNlc3Npb24gU3RhcnRlZCJ9LCJtaW4iOjB9XX0=">
<div id="wrap">
<div class="container">
<div class="report"></div>
</div>
</div>
<script>
window.onload = function (event) {
event.preventDefault();
$(".report").append("<div class='chart'><div id='Progress'><img src='staticMedia/img/loader.gif' /></div></div>");
userData = $("body").data("user"); // get user report data
var chart = new Highcharts.Chart(JSON.parse(atob(userData)));
// destroys legend if only 1 series
if (chart.series.length < 2) {
chart.legend.destroy();
}
}
</script>
</body>
</html>
Found an answer here: stackoverflow.com/a/11984907/3182810. Replacing
$("html").html(data);
in the form with
document.open();
document.write(data);
document.close();
does the trick.
I have spent HOURS trying to get any new timepicker to work (previously used https://github.com/weareoutman/clockpicker which was great but always went off screen on mobile phones).
Most seem to be for Bootstrap 2.x and I cannot get any to work. Finally got https://github.com/Eonasdan/bootstrap-datetimepicker going (not great on a mobile but...)
My problem is I have lots of tiny input fields for dates so I need to get rid of the glyphicon and just onclick on the input field itself.
I have included my little test page in case anyone else is struggling. I did not realize that I needed moment.js and that cost me a very irritating 30 minutes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/moment.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<form class="form">
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false, minuteStepping:5,
});
});
</script>
</div>
</div>
</html>
EDIT: This is beyond weird. Got rid of the glyphicon. Put the other span around the input. Works but with a big ugly border. Tried disabling the input-group-addon class by changing it to adxxdon and worked perfectly (well no rounded corners). I then tried without that class and it stopped working. So looks like some sort of regex within span is going on.
I am well at the end of my JS/CSS ability. If anyone has a tidier solution I would be grateful.
It's easy. Just refer to the documentation :)
http://eonasdan.github.io/bootstrap-datetimepicker/#example6
According to the documentation this should be no big deal.
Just use one property in javascript as below
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false,
minuteStepping:5,
allowInputToggle: true
});
});
</script>
allowInputToggle: true //if this property is set true, this will allow opening
of datetimepicker dropdown on both icon click as well
as on input field click.
Use
allowInputToggle : true;
Default: false
If true, the picker will show on textbox focus and icon click when
used in a button group.
So here's my html code (Important part is in the triple quotations):
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
"""<script type="text/javascript" src="ToDoApp.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>"""
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list">
<ol></ol>
</div>
<div class = "counter">
<h4>Things to do:</h4>
</div>
<div class = "comment"></div>
</body>
</html>
and my .css connection is working perfectly, but my .js/jquery connection is just not functioning. I've tried looking up correct html syntax for including a link, and I tried alternating among a few different links to the jquery library. Is there something I'm missing here, have I put the link in the wrong place, or is the syntax funky? Thanks in advance for any help.
If your ToDoApp.js relies on jQuery then you will need to change the order of your code.
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="ToDoApp.js"></script>
Otherewise, the code that you have supplied shows not reliance on jQuery.
The best way I have found to debug issues with JS or CSS files not being included, is to monitor the network traffic with your browsers Debugging tools.. In IE, press F12, and then click on the Network tab. Click 'Start Capturing' and re-navigate to the page.
If a 404 is returned, the path is probably wrong.. From here, you can look at the path the application actually tried to request its file from.
Other errors require different investigations. If you don't even see the file show up in the requests list, then check the Console tab to see if the browser has logged any messages that may pertain to the situation. As per Jeff's answer, if the problem is that something in your ToDoApp.js relies on jQuery, then you will see messages in the console that point to that issue, such as $ is undefined.
I'm working with a blog and I wanted to place a JQuery scroll bar into my div box for the main content area. I'm kind of new to JS but I think I missed something. The devs provided a script but I don't believe its correct. Just a side note: all the libraries are loaded before the script so I don't believe that's where the problem is. Here is what I current have (MINUS all the Sql crap):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../css/Styles.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="BKlayer2">
<img src="../Images/BKlayer2.png" />
<div class="InnerContent1">
<img src="../Images/innerContent1.png" />
</div>
<div class="innerContent2">
<img src="../Images/innerContent2.png" />
</div>
<div class="Feedback">
<img src="../Images/Feedblockbk.png" />
</div>
<div id="blog_Posts">
<?php do { ?> Updated on: <?php echo $row_displayBehaviors['formatted']; ?><br />
<br />
<?php echo $row_displayBehaviors['title']; ?>
<br />
<br />
<?php echo $row_displayBehaviors['blog_entry']; ?>
<p> </p>
<?php } while ($row_displayBehaviors = mysql_fetch_assoc($displayBehaviors)); ?>
</div>
<?php
mysql_free_result($getArchives);
mysql_free_result($displayBehaviors);
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".blog_Posts").mCustomScrollbar();
theme:"light"
});
})(jQuery);
</script>
</body>
</html>
I changed .content to .blog_Posts because that's the div box I'm trying to apply this too. I checked all other css and additional info to make sure .content was not referenced anywhere else.
After uploading scripts and all other relevant information to my server, I checked in firebug to find out the problem.
Now firebug is giving me this error:
TypeError: $(...).mCustomScrollbar is not a function
[Break On This Error]
$(".blog_Posts").mCustomScrollbar();
I think firebug said it better than I could. I didn't see a function defined here. I'm not exactly sure what the function would be if it has to be included.
It sounds to me like you haven't included the jQuery plugin script.
mCustomScrollbar is not a part of jQuery, you'll need to reference the plugin.
This sounds like the plugin you are talking about, include the script reference from there:
http://manos.malihu.gr/jquery-custom-content-scroller/
I figured it out. Just if anyone wants to know:
I did it by working backwards on the demo script and figuring it out. Basically what I didn't do was have the CSS lined up and I also didn't have the scripts in the correct directories.
As for the proper script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".body,.content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
basically I added in the .body in and changed .content so it corresponded to my main styles sheet. You really don't need any css on your page other than this:
<style>
body>.mCustomScrollBox>.mCSB_scrollTools{top:2%; height:96%;}
</style>
That's the key I was missing.
I have to create a modal window to display a popup or a modal window to get the feedback from the user for our intranet. This window should have a checkbox which says "do not ask this question again".
I tried creating this window using jquery but I dont understand how to do it. I even tried to google it but not getting proper answers. Can anyone please help me with this.
I am new to jquery.I have seen many sites where they have created modal windows but they use php and I cant. Please help me with jquery, jsp or javascript code for this purpose.
A screenshot from the use case document is attached.
Any help is appreciated. Thanks in advance.
p.s. I am using websphere portal.
Sorry the image wasnt allowed..
The below mentioned code also doenst work. Plz help.
<html>
<head>
<%#page session="false" contentType="text/html" pageEncoding="ISO-8859-1" import="java.util.*,javax.portlet.*,com.ibm.accessitservicesfeedbackpopup.*" %>
<%# taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%#taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" prefix="portlet-client-model" %>
<portlet:defineObjects/>
<link rel="stylesheet" type="text/css" href="<%= renderRequest.getContextPath() %>/style.css"/>
<link rel="stylesheet" type="text/css" href="<%= renderRequest.getContextPath() %>/jqModal.css"/>
<script language="javascript" type="text/javascript" src="<%= renderRequest.getContextPath() %>/jqModal.js"></script>
<script language="javascript" type="text/javascript">
function confirm(msg,callback) {
$('#confirm')
.jqmShow()
.find('p.jqmConfirmMsg')
.html(msg)
.end()
.find(':submit:visible')
.click(function(){
if(this.value == 'yes')
(typeof callback == 'string') ?
window.location.href = callback :
callback();
$('#confirm').jqmHide();
});
}
$().ready(function() {
$('#confirm').jqm({overlay: 88, modal: true, trigger: false});
// trigger a confirm whenever links of class alert are pressed.
$('a.confirm').click(function() {
confirm('About to visit: '+this.href+' !',this.href);
return false;
});
});
</script>
</head>
<body>
view (confirm)
<!-- Confirm Dialog -->
<div class="jqmWindow" id="confirm">
<div id="ex3b" class="jqmConfirmWindow">
<div class="jqmConfirmTitle clearfix">
<em>Close</em>
</div>
<div class="jqmConfirmContent">
<p class="jqmConfirmMsg"></p>
<p>Continue?</p>
</div>
<input type="submit" value="no" />
<input type="submit" value="yes" />
</div>
</div>
</body>
</html>
There is nice jQuery dialog you can use. Just download jQuery and jquery ui (both js and css) and include to your project. It works prefectlly.