I'm having problems with using checkbox with Thymleaf.
My Form has a List of object "AssignFlag" with name "assignFlagList".
List<AssignFlagForm> assignFlagList;
object AssignFlagForm has 3 fields:
String codeValue;
String codeKey;
public boolean isChecked;
I want to create checkboxes for each AssignFlagForm, and post true value for each AssignFlag that is checked on the screen.
my Thymeleaf template:
<span th:each="assignFlag, stat : *{assignFlagList}">
<input type="checkbox" th:field="*{assignFlagList[__${stat.index}__].isChecked}"
th:value="*{'TRUE'}" style="margin-right: 0;" />
<label th:for="${'assignFlagList' + stat.index + '.isChecked1'}" th:text="${assignFlag.codeKey}" style="font-weight: normal;">
</label>
</span>
and I wrote this referring to the official document of Thymeleaf
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#checkbox-fields
It doesn't work and I don't know why.
Error code is
Error during execution of processor org.thymeleaf.spring5.processor.SpringInputCheckboxFieldTagProcessor
but I still can't figure out.
Could somebody please help me?
Thank you in advance.
Related
I have a HTML textbox having required attribute enabled on it.
Validation is working fine except in one scenario.
When data is binded dynamically, then error message still getting displayed. But if I do any key press on textbox then error message disappears.
How to resolve issue.
Update:
I'm using below code
<input type="text" aria-label="text" [disabled]="isDisable"
#TEXTVALUE="ngModel" [ngClass]="{'invalid-data': TEXTVALUE.invalid && userForm.submitted, 'valid-data': TEXTVALUE.valid && userForm.submitted}" [ngModel]="customernamevalue" name="customername" id="custname"
[required]= "true">
<div style="float:left;"
*ngIf="TEXTVALUE.invalid && (TEXTVALUE.dirty || TEXTVALUE.touched)">
<span style="color: red;"> Name is mandatory field.</span>
</div>
Need help again ;)
I would like to show a photo in my Angular page. These are my steps,
REST API gets a document/record from backend MongoDB. The base64 images are stored as this.
The images/data are loaded into an array {{file_src[i]}} in the component code, then the component HTML will show the image as below
Situations:
If I used "img srcs={{file_src[i]}}", I got insecure operation. My REST API server has CORS enabled. Since the image is base64 data and doesn't have any URL, I don't know it is related to CORS.
I googled around and found the ng-src and data-ng-src directives. Both of them don't work too. Please see my binding error below.
Question: how to show the base64 image in my Angular page?
------Code as requested by Vic--------
<section class="fhirForm">
<fieldset>
<legend class="hd">
<span class="text">Photo</span>
</legend>
<div class="bd" formArrayName="photos">
<div *ngFor="let photo of patFormGroup.controls.photos.controls; let i=index" class="panel panel-default">
<div class="panel-body" [formGroupName]="i">
<label>Description</label>
<input type="text" class="form-control" formControlName="desc">
<label>Photo</label>
<input type="file" size="30" multiple formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input>
<!-- img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /-->
<img data-ng-src={{file_srcs[i]}} alt="" />
<span class="glyphicon glyphicon-remove pull-right" *ngIf="patFormGroup.controls.photos.controls.length > 1" (click)="removePhoto(i)"></span>
</div>
</div>
</div>
</fieldset>
<div class="margin-20">
<a (click)="addPhoto()" style="cursor: default">
<small>Add another photo +</small>
</a>
</div>
</section>
initPhoto(desc?: String, photo?: string) {
//Add new entry on the 1 dimensional array. Allow 1 photo per section
this.file_srcs.push(photo);
console.log("Photo for file_srcs: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
return this.formBuilder.group({
desc: [desc],
photo: [photo]
});
}
Please see the console.log. It showed that this.file_srcs are valid.
------------- Error Message in Chrome -------
------------- UPDATE 1 -----------
If I commented out the "input type=file ..." line above the "img src" as below, I can see the photo. What's wrong with my input? Sorry, I don't remember what is that #input for.
Hence, my issue may not be in the photo, but on the input line ;) Shame on me!!!
<label>Photo</label>
<!-- input type="file" size="30" formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input -->
<img src={{file_srcs[i]}} crossorigin="anonymous" alt="" />
--------- RESOLVED -----------
Thanks a lot for all the help!!!
i. the base64 image isn't the root cause;
ii. the file input "input type=file" was initialized by incorrect supplying the base64 image as the default value. It caused the error - failed to set the value of HtmlInputElement is correct in IE. The error message 'Insecure Operation' may be misleading in Firefox.
Hence, the root cause is not related to the base64 image. I would like to delete this thread a week later.
initPhoto(desc?: String, photo?: string) {
this.file_srcs.push(photo);
console.log("Photo for file_srcs[" + (this.file_srcs.length - 1) + "]: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
return this.formBuilder.group({
desc: [desc],
photo: [""] //This was photo: [photo]. After supplying the default value as "", it works well.
});
Best regards,
Autorun
Fetch the base64 content in your controller like this:
$http.get($scope.user.photo).then(function(response) {
$scope.user.data = response.data;
});
then display it on view
<img data-ng-src="data:image/png;base64,{{user.data}}"/>
I use base64 image a lot and haven't see that error before. Is it caused by the crossorigin attribute?
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAA+0lEQVQ4T6WS3W3CMBSFz40QvDJCu0GYALJB2QBeUFzjCm9AJ0gLMQl9STegG5QNYARG6CsI+SKjpmppSY3w8/10fnwIVzy6lE2SollrbBcAPV8ET2fzOzAXDNYPUrx6wxOT9QjkwL4DnWMvODV5wUAP4EclxbiM+i88meUJMUYA3pSMu987qoRLqwDW+10j0rr/4QV/lrNwxwGClpSD9enPHJXTdD5i4vY+YK2F2BjzElrYdwDN05x/KpelMOGJGB0AIQGboYxvz23hR+apyVcO+jq2HCklll7wcT31rbMbgrBU93FUtcBfbSdZdlOztILlbpWq90jOqR8Au8VfIQFLZecAAAAASUVORK5CYII=";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<img src={{base64}} />
</div>
I want to add Botdetect Captcha to my html file.But in the website of the Botdetect captcha, there is example only for jsp. In this jsp file, <taglib> is used like that:
<%#taglib prefix="botDetect" uri="https://captcha.com/java/jsp"%>
....
<botDetect:captcha id="basicExample" userInputID="captchaCode" />
<div class="validationDiv">
<input name="captchaCode" type="text" id="captchaCode" value="${basicExample.captchaCode}" />
<input type="submit" name="validateCaptchaButton" value="Validate" id="validateCaptchaButton" />
<span class="correct">${basicExample.captchaCorrect}</span>
<span class="incorrect">${basicExample.captchaIncorrect}</span>
</div>
Is there any alternative for <%#taglib> in HTML files. How can I solve this problem?
I'm facing this problem because I use Thymeleaf instead of JSP so I can't use the taglib but I still have "dynamic HTML". I'm answering assuming this is your case.
I saw a possible solution on the help pages here: https://captcha.com/doc/java/jsp-captcha.html at section 2:
<%
// Adding BotDetect Captcha to the page
Captcha captcha = Captcha.load(request, "exampleCaptcha");
captcha.setUserInputID("captchaCode");
String captchaHtml = captcha.getHtml();
out.write(captchaHtml);
%>
This is JSP code but can be easily adapted to Thymeleaf. This in the #Controller that opens the page:
Captcha captcha = Captcha.load(request, "exampleCaptcha");
captcha.setUserInputID("captchaCode");
String captchaHtml = captcha.getHtml();
model.addAttribute("captchaHtml", captchaHtml);
and the html is like
<th:block th:utext="${captchaHtml}"></th:block>
The code for captcha checking is the same as for JSP, but placed in the #Controller that handles the form:
// validate the Captcha to check we're not dealing with a bot
boolean isHuman = captcha.validate(request.getParameter("captchaCode"));
if (isHuman) {
// TODO: Captcha validation passed, perform protected action
} else {
// TODO: Captcha validation failed, show error message
}
To finish you also need to edit web.xml (if you have it) and import the java libs as by the official docs. I'm using Gradle and importing 'com.captcha:botdetect-servlet:4.0.beta3.7'
Warning: your server should be on HTTPS or you might get this error when using version 4.0.beta3.7:
Captcha.UserInputID is not set. Your implementation of BotDetect is
not completely secure yet
<%#taglib prefix="botDetect" uri="https://captcha.com/java/jsp"%>
....
<botDetect:captcha id="basicExample" userInputID="captchaCode" />
<div class="validationDiv">
<input name="captchaCode" type="text" id="captchaCode" value="${basicExample.captchaCode}" />
<input type="submit" name="validateCaptchaButton" value="Validate" id="validateCaptchaButton" />
<span class="correct">${basicExample.captchaCorrect}</span>
<span class="incorrect">${basicExample.captchaIncorrect}</span>
</div>
That is wrong, with HTML (HyperText Markup Language) you have to list the version of HTML in this case it is Doctype HTML so the following one should be correct...
<!DOCTYPE html>
<%#taglib prefix="botDetect" uri="https://captcha.com/java/jsp"%>
....
<botDetect:captcha id="basicExample" userInputID="captchaCode" />
<div class="validationDiv">
<input name="captchaCode" type="text" id="captchaCode" value="${basicExample.captchaCode}" />
<input type="submit" name="validateCaptchaButton" value="Validate" id="validateCaptchaButton" />
<span class="correct">${basicExample.captchaCorrect}</span>
<span class="incorrect">${basicExample.captchaIncorrect}</span>
</div>
I am new to thymeleaf and am converting all my jsp code to thymeleaf.I don't know how to convert this below code to thymeleaf.Do anyone know how to convert the below code to thymeleaf?
<logic:iterate id="id" property="idList" name="sampleForm" indexId="i">
<label for="id<%=i%>">
<bean:write name="id" property="id" />
</label>
</logic:iterate>
Please tell me how to initialize the index value in thymeleaf to be used in some values??
<label th:each="id,status : ${idList}" th:for="|id${status.index}|" th:text="${id.id}"></label>
th:each will iterate over the idList, assign each item to id and create a label for each item. The status of the item can be assigned by adding an extra name, separated by a comma (status in this example).
th:for will set the for attribute of the label. The pipes (|) are used for easy string concatenation.
th:text will set the inner text of the label to the ID.
You can also use it like this:
<label th:each="id : ${idList}" th:for="${'id' + idStat.index}" th:text="{id.id}">
This starts the index from 0
If you want to start the index from 1 use this
<label th:each="id : ${idList}" th:for="${'id' + idStat.count}" th:text="{id.id}">
Check out the Thymeleaf documentation
So I have a form with a submit button and a hidden field. The hidden field holds the value which will be used to query. When the user presses the submit button, the value is supposed to pass to the controller and the controller is supposed to query and then render a new page with the query result. Here is the code,
#{list items:courses, as:'course'}
<li>
${course.CourseCode}
#{form #Courses.detail()}
<div>
<input type="text" name="Code" value = ${course.CourseCode} />
</div>
<div>
<input type="submit" value="Course Detail" />
</div>
#{/form}
</li>
<br />
#{/list}
I was having problems with "Course" not found so I changed the hidden field to text. This is where the weird thing starts. I see only half the value of ${course.CourseCode}. For example, if course code = ICCS 101, I see "ICCS 101" in the list but in the text field I see only ICCS. I have no idea why this is happening.
Here is my controller
public static void detail(String Code){
System.out.println(Code);
List<Course> courses = Course.find("byCourseCode", Code).fetch();
int index = courses.size()-1;
if(index>=0){
Course course = courses.get(index) ;
render(course);
}
else{
notfound();
}
}
Edit::It seems like it truncates everything after the first white space.
In your view the value property of your input tag should be between quotes "..." otherwise everything after the first space will get truncated
<input type="text" name="Code" value="${course.CourseCode}" />