I'd like to create form in specific way. The form should be able to render itself based on received data, should be used like that:
<form action="#" th:action="#{/blahblah}" th:formDefinition="${formDef}" th:object="${formData}"method="post">
This should render the necessary input elements in some way, fill in the data etc. Is there a way how to achieve this in Thymeleaf?
Nope there is no such way in pure thymeleaf which you can do this.
But you have an option to do something like this using fragments.
Create a th:fragment which takes the parameters formDef and formData
In the fragment, create a loop and geenrate the form as you want dynamically
Call the fragment using th:include with the real parameters in the places where you need the form to get generated.
Use Apache Freemaker to create templates in Netbeans IDE. Using this templates, auto-generate your forms from your Entities. This allows you to apply the principle of DRY.....Dont Repeat Yourself in your SDLC.
For more infor, watch the below clip on how they have applied the principle:
https://nofluffjuststuff.com/blog/reza_rahman/2015/01/vaadin_cdi_and_java_ee
Related
We are currently looking to experiment with modern frontend frameworks like react on an MVC4 project. We use data annotations in our models and we have a lot of forms that use unobtrusive validation on the UI.
The main thing is finding a way to use react to generate the content while still being able to make use of features like unobtrusive validation. As I understand it, it really is just a bunch of data-val attributes dynamically generated when using HTML helpers like TextAreaFor, ValidationMessageFor with the attributes getting values from the data annotations in the model classes.
I've tried several things including
ReactDOM.render(
#using (Html.BeginForm("xyz", "xyz", FormMethod.Post))
{
#Html.TextBoxFor(x => x.Email)
which results in the input box not being editable for some reason.
I'd prefer to do something more like
ReactDOM.render(
<form><input type="text" data-val="#Model.datannotations[1].val" /></form>
Is that possible? How does one get the data-val values from the model anyway? What is the best way to achieve this?
it should not be possible.
These are two differents ways to delvelop the ui.
The razor way is preprocessing the markup code in server side to fill it.
And react works in another flow using the lifecycle methods, you should have already loaded the data-anotations values for accessing it on render.
Therefore, to make this works you have to run razor engine first to fill the markup and next using react engine.
I don't recommend use this approach because it's too hard to develop on it and the developers team have to keep that flow in mind while they are developing
Note this
ReactDOM.render(<ComponentMustHaveJSX/>)
I am volunteering on a website-based project that is trying to make all pages fully operable JavaScript free before adding any JavaScript for enhancements, and I was asked to investigate whether or not a particular scenario could be handled purely through HTML/CSS.
What we have is a form that is populated to help us filter a list of tickets that are displayed on the screen after a page update through a GET action, which itself works fine, but the concern with the current implementation is that the URL cannot be made into a permanent link. The request, however, to keep the permanent link as minimal as possible, is to only send GET parameters for fields that are populated with something (so, suppressing GET parameters for fields that are blank) instead of having a different GET parameter for each form field on the page.
I have thought of several ways that could be done, most including JavaScript (example: create fields with ids but no names and a hidden field w/ name that uses JS to grab the data from the fields), but also one that would be a POST action with a redirect back to the GET with a human readable string that could be permanently used. The lead dev, however would prefer not to go through the POST/redirect method if at all possible.
That being said, I'm trying to make sure I cover all my bases and ask experts their thoughts on this before I strongly push for the POST/redirect solution: Is there a way using only HTML & CSS to directly suppress GET parameters of a form for fields that are blank without using a POST/redirect?
No, suppressing fields from being submitted in an HTML form with method of "GET" is not possible without using JavaScript, or instead submitting the form with a POST method and using a server side function to minimize the form.
What fields are submitted are defined by the HTML specification and HTML and CSS alone cannot modify this behavior and still have the browser be compliant with the standards.
No, you cannot programmatically suppress any default browser behavior without using some kind of client scripting language, like JavaScript.
As a side note, you say "JavaScript for enhancements", but JavaScript is not used for enhancements these days. And no one in the real world would except a decent front-end without the use of JavaScript. I would suggest you simply use JavaScript.
I do not think you can avoid Javascript here to pre process before submission to eliminate unchanged /empty form fields.
I am new to HTML and still trying to understand some concepts. Here it is one that I do not understand at all. After trying HTML form I noticed that if I have a form with attribute name I can access that form the following way document.attribute_name or document[attribute_name]. However if I try to do the same on a div for instance, it does not work. Can somebody please explain me why is this so.
Also, I was wondering if it good practice to use a form when using AJAX. Let say that I have some fields inside a form but I am using ajax and the form never is "posted" as I am using AJAX to change field's contents.
Thanks in advance!
Usually a form has the name attribute in order for you to be able to pass a value to a PHP/ AJAX script.
When writing THE FORM :
<FORM action = 'addDetailsToDatabase.php' method = 'post' >
<input name ='myName'>
<button type = 'submit'>
</form>
When you submit this form it will post the input field value that has the name attribute 'myName' to the addDetailsToDatabase.php script. So now whatever has been entered and submitted in the input you can use in your PHP script.
TAGS do not generally have a need for a name attribute. (I am saying generally need just incase theiris some library out there that uses this I have never seen a name attribut on a div tag.
The best way to get a div is to get it by ID . document.getElementByID('yourdivid') - Javascript.
Your div will look like this
You can use AJAX to post a form to be be run by a PHP script and this has the added benefit of the whole page not being refreshed.
Anwsering the second part its hard what you are asking. With Ajax you can make your page as dynamic as you want
You can select from the database and echo wherever you want the options are limitless (almost). The best thing to do is to learn HTML = SIMPLE Learn CSS =SIMPLE. Then learn some simple JQUERY or javascript. If your dealing with forms and databases learn how to post a form to PHP script and store in a database and then retrieve using the select statement (prepared statements will set you up for years to come try and avoid old SQL tutorials)
Once you get this learn your AJAX to fill the gaps
I want to create an html page which contains a text box. When I am given input and the Enter key is pressed, I want it to go to another html page and display the typed keyword.
How can I do this?
I think you need to use a server-side scripting language to facilitate the manipulation of the inputted data on the form, so that it gets "saved" and displayed in the other html page. I suggest you try reading about PHP, and then turn to handling information in Web Forms...just a thought!
You can use Javascript for that. Check this Tutorial : How do I pass variables between two pages? (GET method)
If I write
<form wicket:id="form" id="form>
or even
<form wicket:id="form>...
Then the rendered HTML shows the id 'form' appended with different numbers whenever the page is refreshed e.g.
<form id="form7"....
Is there a way to disable this behavior of the Wicket framework?
We set markup ids by hand extensively on our project to ease automatic testing with Selenium testing framework. It definitely works.
Component.setOutputMarkupId(true); // write id attribute of element to html
Component.setMarkupId("someid"); // id attribute of element is "someid"
This is the behavior you want in most cases when using wicket. The dynamic id is meant to prevent id collisions when Ajax behaviors are added to components or added to ajax responses for refreshing. For any of these situations, you really need both the client response and the server side state to be in cahoots. If there are external js resources you need the id of a component for dom lookup, then I would suggest adding a custom wicket component behavior that would then generate the js call to a function passing in the generated id.
I realize what I'm going to describe leads you more into the forest of Wicket. But I have been more than happy with the ajaxy stuff that Wicket opens up for you out of the box.
This is Wicket desing feature. You can use class for linking styles and components.
<form wicket:id="form" id="form>
Also you can to try (I never did it) setMarkupId . I'm not sure that it good way.
It has been a while since I worked with Wicket, but I remember that when wicket uses ajax elements, its ids are auto-generated (the id of the tag, not the wicket:id). You can control the id of the tag when not using and ajax element. In your case, since there is no code, I would guess that you will have to change any AjaxButton or Ajax* from your form.
Yes you can write custom JavaScript... you just need to implement it according to the 'Wicket way'. You can decorate components, Ajax calls etc. with custom JavaScript, then it all plays nicely.