I might sound strange with this question but I'm very new into those three technologies - Spring, Thymeleaf and Dropzone.
I am currently trying to get a html page resulting from a response from my Spring Controller + Thymeleaf with a request from a Dropzone file upload.
So my Controller receive the file from dropzone, reads it, apply some parsing and return the result as a html page, like a report.
It works as expected if I use a simple form like the one available in Spring tutorial site.
But when I put Dropzone I simply can't get the result from this html page.
I'll leave here my upload html (I've been trying to get the result and print into a div, without success):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My upload form with Dropzone</title>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<script>
Dropzone.options.myDropZone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 1,
paramName: "file",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
var submitButton = document.getElementById("btnStartUpload");
submitButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(file, xhr, form) {
form.append("file", file);
});
this.on("success", function(file, response) {
console.log(response);
$(".result").html(response);
});
}
}
</script>
</head>
<body>
<div id="dropzone">
<form id="myDropZone" class="dropzone" th:action="#{/upload}" method="POST" enctype="multipart/form-data">
<div class="previews"></div>
<button id="btnStartUpload">Submit file!</button>
</form>
</div>
<div id="result" class="result"></div>
</body>
My Controller:
#PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public String uploadFile (#RequestParam("file") MultipartFile file, ModelMap model)
{
try
{
// parse file and insert a collection into attribute, to be used in the 'result' page.
model.addAttribute("fields", /*collection*/);
return "result";
}
catch (IOException e)
{
e.printStackTrace();
return "failed";
}
}
And then my result html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My result page</title>
</head>
<body>
<table>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
</tr>
<th:block th:each="field : ${fields}">
<tr>
<td th:text="${field.name}"></td>
<td th:text="${field.value}"></td>
<td th:text="${field.description}"></td>
</tr>
</th:block>
</table>
</body>
</html>
Related
i am using htmlunit with spring test in order to test all ihm interface from my web application. It works fine with html form (post and get) and with ajax get but i have a problem with ajax post request.
The controller don't received the request. If i replace post by get the junit test case works fine.
this the html view
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Html Unit</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function postTest() {
$.ajax({
type:"post",
data: {
'subject' : 'subject test',
'message' : 'message test'
},
url:"[[#{/test/post}]]",
success: function(data, textStatus, jqXHR){
$("#result").text(data);
}
});
}
</script>
</head>
<body>
<h4 th:text="'Hello to Thymeleaf '+${myParam}">Hello from Thymeleaf</h4>
<button type="button" onClick="postTest()">Test post</button>
<div>
<span>result :</span><span id="result"></span>
</div>
</body>
and the controller
#Controller
public class WelcomeController {
#GetMapping("/")
public String init(Model model) {
model.addAttribute("myParam", "Guillaume");
return "welcome";
}
#PostMapping("/test/post")
public #ResponseBody String post(#RequestParam String subject, #RequestParam String message, Model model) {
return subject + " " + message;
}
}
you can also find the complete code on my github https://github.com/guisimon28/spring-test-htmlunit
Can you help me to find if there is some missing configuration or if its a htmlunig bug or pull request ?
Thanks for All
Guillaume
i am new to coding and i am starting with angular js....
i have a json like below
$scope.data={
"items":
{
"yamaha":
{
"title":"R15",
"description":"sports mode",
"speed":"180kmph"
},
"Tvs":
{
"title":"apache",
"description":"sports mode",
"speed":"150kmph"
}
}
};
now my requirement is to show each value one after other in html.....
Note
As i said i am new,i have googled this and found some info like ng-repeat but i didnt understand how to use this in while implementing.
thanks for your response
ng-repeat will iterate over the data in the given array....here i used key,vakue concept to print object keys and values
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="(k,v) in data.items">
<div><h2>{{k}}</h2>
<p>{{ v.title }}</p>
<p>{{v.description }}</p>
<p>{{v.speed }}</p>
</div>
</div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data={
"items":
{
"yamaha":
{
"title":"R15",
"description":"sports mode",
"speed":"180kmph"
},
"Tvs":
{
"title":"apache",
"description":"sports mode",
"speed":"150kmph"
}
}
};
});
</script>
</html>
I would like check the image whether existing on server file system and the file list was store into database. I want to make a ajax call to doing validation then return the result to screen with append effect. Here is my code, but don't work :( Please help me.
UPDATE: Code is workable, but it's not my expectation, because three thousand record with caused timeout and No append effect. thanks
Controller
public function getImageList()
{
$this->load->model('image_model');
$data['list'] = $this->image_model->get_image();
foreach ($data['list'] as $key){
$result[] = $this->imageValidation($key->filename);
}
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($result));
}
private function imageValidation($imgfile)
{
if(!file_exists(LOCAL_IMG_TEMP.$imgfile))
{
return "<pre>". $imgfile." Not Find"."</pre>";
}
}
View
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title></title>
</head>
<body>
<script>
function makeAjaxCall(){
$.ajax({
type: "POST",
url: "http://127.0.0.1:8888/index.php/ajax/getImageList",
cache: false,
dataType : "json",
success: function(data){
$("p").append(data);
}
});
}
</script>
</script>
<input type='button' id='PostBtn' value='Check Image' onclick='javascript:makeAjaxCall();' />
<p></p>
</body>
</html>
try to use file_exists()
check it
At the moment this is my code:
<!doctype html>
<html ng-app="validation-example">
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<link href="http://docs.angularjs.org/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://docs.angularjs.org/css/font-awesome.css" rel="stylesheet" />
<link href="http://docs.angularjs.org/css/docs.css" rel="stylesheet" />
<link href="StyleSheet.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body style="background-color: teal">
<link href="StyleSheet.css" rel="stylesheet" />
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
Float:
<input type="text" ng-model="length" name="length" smart-float />
{{length}}<br />
<span ng-show="form.length.$error.float">This is not a valid float number!</span>
<br />
<button ng-click="submit()"
ng-disabled="form.$invalid">
Submit</button>
</form>
</div>
</body>
</html>
And js
var app = angular.module('validation-example', []);
function Controller($scope) {
$scope.master = {};
$scope.reset = function () {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.submit = function () {
debugger;
if (form.$invalid)
{
alert("sss");
}
};
}
var FLOAT_REGEXP = /^\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (FLOAT_REGEXP.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
ctrl.$setValidity('float', false);
return undefined;
}
});
}
};
});
And i have the button disabled when the float is invalid. However i want to always enable the submit button and on the server in the function to check if the form is invalid and to pop an alert to the user that the submit is interrupted because we have invalid data. When applying class binding i can "form.$invalid", but if i remove it in order to allow invalid submit then in the function if (form.$invalid) is undefined. How to check in the controller if i have invalid inputs in the form? I can loop through the elements and check for ng-invalid css class but this is the most dumiest think so please suggest a smart solution.
All errors of your form are set to the $scope.formName.$error object. I just inspected the properties set to this object using Chrome's developer tools and found that this object holds all the validation errors in different arrays based on error types. The screenshot below will give you a better idea:
The sample code using which I inspected this is available on jsfiddle
You need to loop through these properties and build the error message you wish to show on the pop-up.
This is the code I am using to add a comment using Ajax call.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile- 1.1.0-rc.1.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js">
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="js/global.js" type="text/javascript"></script>
</head>
<script>
var msgId = window.localStorage.getItem("clickedId");
processLogInData = function(){
var comment = ($("#comment").val());
temp = 'messageId=' + msgId +'&';
temp += 'uniqueId=' + device.uuid + '&';
temp += 'comments=' + comment;
var s= global1 +"rest/Comment/createCommentBO?"+temp;
$.ajax({
url:global1 +"rest/Comment/createCommentBO?",
data: temp,
dataType: 'xml',
timeout: 10000,
async: false,
cache: false,
type: 'POST',
success: function(data){
if($(data).find("isException").text() == "false")
{
//alert('No Exceptions found');
onTrue();
}
else
{
onFalse();
}
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
// alert("Error status :"+textStatus);
// alert("Error type :"+errorThrown);
alert("Error message :"+XMLHttpRequest.responseXML);
$("#messagelist").append( XMLHttpRequest.responseXML);
}
});
}
function onTrue(){
location.replace("comments.html");
}
function onFalse()
{
console.log("onFalse Method");
alert("Unable to create Comment!");
}
function cancel(){
location.replace("comments.html");
}
</script>
<body>
<div data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<img src="images/logo_header.png" alt="Orange"/>
</div>
<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="15" rows="15" name="textarea" id="comment"></textarea>
</form>
<div>
<div class="ui-block-a"><button type="submit" data-theme="d" onclick="cancel();" data-mini="true" data-icon="delete">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a" onclick="processLogInData();" data-mini="true" data-icon="check" >Submit</button></div>
</div>
</div>
</div>
</body>
When I enter special character as content as pass it to Ajax call I am getting an error :( Ajax call works fine with out any special characters...
Is there any way to encode the data before passing it to ajax call???Please help me on this...
Thanks in advance.
(1.)Either you should put your data into a form and serialize it and then send to the server
(2.)Second way is you can use the js inbuilt function encodeURIComponent().