I am finding it difficult to retrieve data from a web page when that data was initially passed in from the controller layer.
I am using Thymeleaf 3 and Spring boot v1. I have a webMVC controller which is passing an object to the template. The object looks something like this (pseudo-code):
public class Person{
// Nested object retrieved from various data sources
// and passed to the UI
private Address address;
private Job job;
// Form values I want to retrieve from UI
private String formValue1;
private String formValue2;
// getters/setters
}
My html page is divided into two sections. One section displays most of the Person values, while the other section includes a basic form. When the form is submitted, I want the form values plus ALL original values returned to the server.
What I'm finding is that it seems Thymeleaf will only retrieve values which are in the form, which means I have to stretch the form across both sections of the page, even though the user will only fill out one section of the page. So now the html looks as follows:
<html>
<!--header/body/etc -->
<form th:object="${person}" th:action="#{/person/id}" method="post">
<!-- Form Inputs -->
<input type="text" th:field="${person.formValue1}"/>
<input type="text" th:field="${person.formValue2}"/>
<!-- Values not used in form, but included so they will be sent back
to server -->
<input type="text" th:field="${person.address.city}" readonly="readonly"/>
<input type="text" th:field="${person.address.street}"
readonly="readonly"/>
<input type="text" th:field="${person.job.title}" readonly="readonly"/>
</form>
</html>
Additionally, it seems that Thymeleaf can only retrieve values that have the attribute th:field, but th:field is only assignable to the <input/> element (as far as I know), so any long text I have is truncated to the normal length of an input field, which is rather limited.
So I'm wondering if anyone can help with the following questions:
Can Thymeleaf return values which are not within a form (but returned when the form is submitted)
Is th:field the only option I can use for sending data back? (I've successfully displayed data with th:text, but no luck sending anything back).
Thanks.
Can Thymeleaf return values which are not within a form (but returned when the form is submitted)
This is more about how HTML forms and POST in HTTP works here. HTML form will send whole data within and Thymeleaf will bind that data to an object in your controller. So if you want all the values you should in fact wrap it all in a single form - this is a good way to go. If the case is that you don't want to display all the fields you could use hidden fields.
If you still would like to keep the data in separate forms for some reason you could try to work around it:
By using JavaScript to collect data from both forms and send it
Try to name both forms the same. I am not sure about it but it might work
I wouldn't recommend any of those anyway. Try to keep it simple.
Is th:field the only option I can use for sending data back? (I've successfully displayed data with th:text, but no luck sending anything back)
For a long text you can use textarea.
Related
I am trying to do same small service and sometimes I am sending requests to my Rest Api.
I am getting two problems:
How to fill field in form in html using thymeleaf? I have form like this and would like to fill fields with current values (th:value="${}" - not working for me):
<form th:action="#{/offences/edit}" method="post" th:object="${createOffenceForm}"> <input th:field="*{name}" th:value="${currentOffence.name}"/> <input th:field="*{penaltyPoints}" th:value="${currentOffence.penaltyPoints}"/> <input th:field="*{amountOfFine}" th:value="${currentOffence.amountOfFine}"/> <button type="submit">UPDATE</button> </form>
The problem is with loading css styles to html when I redirect to the site with path variable. For example i created html with two buttons. First one is hardcoded:
<a th:href="#{/offences/test}" class="link" style="text-decoration: none"><button class="buttonOK" type="submit">EDIT</button></a>
after redirect my site looks like this (everything works, it should be like that):
`
and here is after second button - redirect with path variable:
<a th:href="#{'/offences/edit/' + ${offence.id}}" class="link" style="text-decoration: none"><button class="buttonOK" type="submit">EDIT</button></a>
and view after load:
For the issue with your form data not being filled, this is because th:field and th:value are not meant to be used at the same time. So th:field ends up overwriting you value.
In your case I would suggest either manualy setting name (and id) or replacing th:object with the a filled version of the bean you want to return and only using th:field
As for the second issue it looks like a faulty fragment return on a post call to me but need to atleast have the controller functions and more complete html to say anything about that. And in general it's advisable to have 1 question per problem and not bundle things.
Ok so i found soultion.
To fill fields in form I only had to add to ModelMap form with fields.
Something like this and thymeleaf autofilled fields in html.
modelMap.addAttribute("createOffenceForm", new CreateOffenceForm(offenceDTO.getName(), offenceDTO.getPenaltyPoints(), offenceDTO.getAmountOfFine()));
Second solution is simple too. When changed mapping in Controller from #GetMapping("/path/{id}") to #GetMapping("/path-{id}") - everything works. There is no other problems with styles...
I understand how to pull out the data attribute in JQuery from an HTML form, but can it be done from within a .cfc controller to which a form is passed?
Page.cfm
<cfform action="controller.cfc" method="getData">
<cfinput name="uploadMyData" type="submit" data-primaryID="123">
</cfform>
Controller.cfc
function getData(rc){
writeDump(rc.uploadMyData.?????(primaryId)????);
}
Not sure if the data attribute is stored in any way in the struct.
I tried a getMetaData on the rc.uploadMyData but just got a list of java functions.
Update
Adrian J. Moreno
Data attributes are just markup that impact the internal data object of the element. They are not part of a form request. You wouldn't submit a form to a CFC file either. Using Ajax, you can read the value from the data attribute and pass it to the server as part of the request's data packet.
So in Page.cfm
<script type="text/javascript">
var otherData = $("#myForm").serialize();
function sendForm(){
var primaryID = $("#submitData").data("primaryID");
jQuery.post("urlpath/controller/",'{"id":'+''+primaryID+'}', function(dataReturn, status){
//I want to get my form and submit the other data as well to the controller
}
}
</script>
<form id="myForm" action="sendForm()">
<input name="uploadMyData" id="submitData" type="submit" data-primaryID="123">
<input name="importantThing" value="#importantVariable#" type="text">
</form>
pass it to the server as part of the request's data packet.
how would I pass them together?
I want this form submission to redirect to another page so I don't see how I couldn't use the controller? The form data should go the newPage.cfc to process it and get it ready for output on newPage.cfm. I'm using framework one but that doesn't change much.
Thanks for the help, what do you think?
Update 2
Ok, now I ask myself why I would want to submit a form with both ajax and coldfusion form submission together? I realize that's not what should be done. I can either
Submit the form via JQuery/Ajax with no page reload, and include the data attribute in the post url and include the serialized form data
Page.cfm
<script type="text/javascript">
var otherData = $("#myForm").serialize();
function sendForm(){
var primaryID = $("#submitData").data("primaryID");
jQuery.post("controller/method/?primaryId="+primaryID+"",otherData, function(dataReturn, status){
//do stuff with dataReturn or do a javascript redirect
}
}
</script>
Controller.cfc
function method(requestContext){
//do stuff with that otherData, all stored in request context. includes the primaryID value i appended to the url
//send it back to the Page.cfm
fw.renderData("rawjson",jsonString,200,"");
}
and if that made it back ok, I could run a function back in my original view with that information. Like display it on the page.
Submit the form traditionally which would result in a page reload. Include a hidden input type with the value that I want to pass.
Page.cfm
<cfform action="controller.method" method="getData">
<cfinput name="uploadMyData" type="submit" value="Submit Form Button">
<cfinput name="primaryID" type="hidden" value="123">
</cfform>
Controller.cfc
function method(requestContext){
//do stuff with requestContext.primaryID
//go to the view method.cfm or do a fw.redirect("new page or back to the page i came from");
}
Why would we want to submit the form twice? just do one or the other.
Matt, I think you're confused about a number of things that are quite basic to HTML, JavaScript and jQuery and have nothing to do with ColdFusion.
Let's start with an HTML Form.
<form id="{{unique_dom_value}}" action="{{uri}}" method="{{http_verb}}">
unique_dom_value: Some string unique to the document. Allows you to reference the entire form object using JavaScript.
uri: The URI to which you submit the form for processing.
http_verb: Defaults to GET, but you should most often use POST.
The URI you're trying to post to in just controller.cfc, but that won't do anything but redirect you to the ColdFusion CFC inspector.
In the context of most MVC frameworks, index.cfm?event=handler.action uses the underlying framework to call a function named action within a CFC named handler. Without a framework, you have to do that manually. So if you have a CFC named controller.cfc and want to send your form data to a function named myFunction, you need to say action="controller.cfc?method=myFunction.
But that's not right either. When you submit a form, the browser expects to load the URI that's found in the action attribute. But your CFC function doesn't respond with HTML, it responds with something else. Maybe a query object, maybe JSON. This is why you would use jQuery.Ajax() to send the form data (including the data attribute values) to the CFC's function, which should return data in JSON. Once you get a response, you can continue processing on the same page or redirect to another page.
However, since you're using Framework One, I would look into the documentation on using renderData() within one of your handler functions.
I am trying to pass a variable from my classic asp page to ssrs. When I put in a literal value for the parameter, such as 296, it works fine. But I want to put in a variable that is sent by the URL so that it works in different ways for different people who are logged in. So, instead of a URL that is http://servername.net/reportserver....rs:Command=Render&Agency=296 (for the agency that is number 296) I want to use a variable that I have set to the agency of the person who has logged in. Let's say the variable is pAgency. I have tried Agency=" #pAgency (I set pAgency = to the logged in person's agency) and all sorts of other combinations, and have searched the web, but find no answer for this. I've even tried session variables but, no go. You must be able to do this but...
Thanks for any help you can give. Cheers!
That is not how a rest URI works to my knowledge. You need to build the string and present it first fully formed, not define a variable on it. You could do somthing in code like (using HTML Form as a base)
In the example below there are four clear things to understand:
A. The 'action' in the form must be the webservice location of a report and do a post to self. (Or you can do an iframe element potentialy but I have not messed with that as much)
B. The 'input' element is text based but you MUST match the id and name to the name of your parameter passing in.
C. The 'select' element gives a user 'option's of save methods to output directly to common types.
D. The 'input' for a type of 'submit' ensure the form will post to itself with the data prescribed.
<!DOCTYPE HTML>
<html>
<head>
<title>SSRS Tester</title>
</head>
<body>
<form id="SSRSRender" action="http:// (reportservername)/ReportServer?/(pathtoreport)" method="post" target="_self">
<H3>Enter some detail for the report to render</H3>
My Variable 'Test': <input type="text" id="Test" name="Test">
<br/>
My outputs:
<select ID="rs:format" name="rs:format" size=1>
<option value="HTML4.0">HTML 4</option>
<option value="IMAGE">Tiff Image</option>
<option value="PDF">PDF</option>
</select>
<br/>
<input type="submit" value="Render Report">
</form>
</body>
</html>
If you want to do more types of input variables to dynamically get SSRS to render as you want outside of the SSRS landing page you need to determine if you want to use:
The service with some front end with scripting like javascript with HTML
Something more easy to control will pre built tools like 'Report Viewer' with ASP.NET or a client application in C# or VB.NET
Create the service proxy yourself in a class library and do the calls in code directly as well as the formatting
Trying to create a rest URI programatically is better done by contacting the service and using built in methods IMHO rather than trying to make a string. It may be a little more of a learning curve but it will help you in the end.
I wish to send a long value from my login.jsp page to the struts action from bean as a hidden field. I have done the mapping etc for the two properties username and password and for them the program works fine. Now I want to send a time value as a hidden property named "requesttime" to store the time of login in a table for security check. But I have not been able to figure out how to do it. Here is the part of the jsp page where I am stuck.
<%long time = System.currentTimeMillis();%>
<html:form action="login">
<bean:message key="login.username"/>
<html:text property="username"/><br/>
<bean:message key="login.password"/>
<html:password property="password"/><br/>
<%--I wish to insert "time" as property "requesttime" as hidden here--%>
<html:submit value="login"/>
</html:form><hr/>
<html:errors/>
Please do not mind my ignorance. And thank you for whatever help you may provide.
Using script you can get the time of login. Now do
< input type="hidden" id="time">
and enter the value you got. Using scriplets would be better.
Then in servlet call the request.getParameter("time") and store as a string or as an integer.
Your choice. Hope this helps.....
I started short time ago with JSP, JSTL, HTML and JavaScript so here is my problem:
I need to set the value of a var the value of an input hidden. Other option is if it possible to compare using
<c:if test="....">
the value of a variable that I sent with the request with the value of the hidden input.
Thanks.
Update
I've been trying but can't make it work.
I have this field that contains the id of and object. I also have the list with the objects so what I have to do is find the object related to that ID.
<input type="text" name="id1" />
but if I do this:
<c:set var="dd" value="${param.id1}" />
<input type="text" value="${dd}" />
The input text is empty but the text related to id1 displays 850 (i.e. the value is dinamic)
Any suggestion why is not working?
Update 2
I need the "multipart/form-data" because in the form I need to upload a picture. I understand how to get the parameters from Java, but since I'm not using the server but the JSP pages, there's any way to do it? Just need to read that input element and save it in a variable.
You can access request parameters by implicit ${param} variable.
E.g. http://example.com/context/page.jsp?foo=bar in combination with
<c:if test="${param.foo == 'bar'}">
The foo's param value is bar!
</c:if>
<c:if test="${param.foo != 'bar'}">
The foo's param value is not bar, it is: ${param.foo}
</c:if>
would show the first condition.
If you actually want to retain some hidden input element in subsequent requests (which wasn't really made clear in your question), then all you basically need to do is:
<input type="hidden" name="foo" value="${param.foo}">
Update: as per your update: you need to give the input element a name as well. Thus, e.g.
<input type="text" name="id1" value="${param.id1}" />
This way it's available by request.getParameter("id1") and inherently also ${param.id1}. Do you see it now?
Update 2: as per your comment here: certainly this is related to enctype="multipart/form-data". With this encoding, the request parameters aren't in the parameter map anymore, but instead in the request body, because of the mixup with binary data (file uploads). It's going to be a long story to explain it all, but basically you need to parse the request yourself. If you're on Servlet 2.5 or older, then the Apache Commons FileUpload is very helpful here. Read especially "User Guide" and "Frequently Asked Questions" over there to see code examples and to learn how to use it the right way (also in MSIE!). You can even decide to abstract the FileUpload away so that you can stick using HttpServletRequest#getParameter() and ${param} the usual way, also see this article.
If you're already on Servlet 3.0, then you can just make use of HttpServletRequest#getParts(). You can even abstract it away so that you can stick using HttpServletRequest#getParameter() and ${param} the usual way, also see this article.
Update 3: Oh, you really don't want to use JSP to do all the processing. There it is not for. It's high time to learn Servlet. Besides, when using a Filter which puts all parameters from the request body back in the request parameter map (as described in the both articles), you also don't necessarily need a Servlet after all.