I am new to Thymeleaf.I am having a Spring-Boot app which used Thymeleaf component in view pages.
Now while using eclipse code assist I came across few thymeleaf tag/attributes namely th:form,th:formaction.
Once I change my above code to following format :
Its stopped working.My webpage is not getting submitted to server.
So,I wanted to understand the following things:
What is the use of th:form tag?
What is the difference between th:action and th:formaction tag?
The ´th:action´ and ´th:formaction´ tags will create the html tags action and formaction. This question is not really related to Thymeleaf but the html tags itself.
The action tag can be placed onto a form to specify the url to pass the form to. In your first example submitting the form will send a POST request to /saveStudent.
The second example is not valid HTML that's why the form will not submit. formaction can be used to override the action attribute of the form within the form. It can be used on input tags:
<form th:action="#{/saveStudent}" th:object="${user}" method="post">
<table>
<tr>
<td>Enter Your name</td>
<td><input type="text" th:field="*{userName}"/></td>
<td><input type="submit" value="Submit"/></td>
<td><input th:formaction="#{/saveSomewhereElse}" type="submit" value="Submit to other url"/></td>
</tr>
</table>
</form>
In this example the default action is to submit to /saveStudent but if someone clicks the second submit button the form will submit to /saveSomewhereElse.
In general you probably will need just the action tag in 99% of the cases.
Related
I need to create a form that by clicking on it will redirect to another website with special 'inputs' tags values.
something like:
<form action="http://example.com" method="post">
<input type="hidden" name="val1" value="something">
<input type="hidden" name="val2" value="else">
<input type="submit" name="submit" value="Go">
</form>
The custom HTML feature that I find will put it inside an iframe, and it looks bad. Is there a way to do it that will look 'normal'?
If you utilize Wix Code you can develop that inside your Wix page without the need of any html forms.
Simple solution:
- Add the form input elements you need on your page
- Add a button to click on
- Add av event handler to the button and grab the values from the input fields
- Send that data to any site or redirect the user to the site you want using wixLocation.to("url") with the query parameters you might need from the form.
Is it possible to create Ajax-only form in Dojo? I need to make AJAX request on button click/ENTER, but not to refresh the whole page.
This is my simple dialog content:
<div id="myDialog">
<table>
<tr>
<td>Name</td>
<td><input name="name" type="text"/></td>
</tr>
<tr>
<td>Owner</td>
<td><input name="owner" type="text"/></td>
</tr>
</table>
<div class="buttons">
<button class='ok'>OK</button>
<button class='cancel'>Cancel</button>
</div>
</div>
I convert it to form:
form = new Form({action: okAction, method: ''}, dojo.byId('myDialog'))
The problem is, that after creating the Dojo form my actions on buttons are no longer called, instead clicking any of them or pressing ENTER causes page refresh.
Is it possible to bind AJAX request with form, instead of whole page submit? In JSF2 it is functioning so.
I'm not a fan of using forms in AJAX applications, but I'd like to use Dojo validation.
The action property means you submit the page, causing a complete page refresh (depending on the return value of your okAction). If you want to create a client-side form submit, you need to use the onSubmit event handler, for example:
form.onSubmit = function(event) {
// Do this stuff
};
Your event handler will probably contain an AJAX request, like the one #James Jithin describes in his answer.
You can read more about the event handlers at the API documentation.
You can GET or POST the form using dojo. See the form attribute set during the xhr call.
dojo.xhrPost
Here, you can pass the id of the form and get it submitted to the server. Then on the onLoad, you can decide what to do with the response.
I have an issue with my portlet and I don't know exactly how to solve it.
My portlet adds or retrieves info from liferay's DB by inserting a name in 2 text fields.
After pressing the submit button, I see the response from the server, a JSON response like this:
{"id":301,"name":"Pepo"}
If a user correctly inserted or if the search throws a good result. I have to go back in the browser to see the portal again.
How can I use AJAX to pass the following URL dynamically from the portlet to the server without refreshing the page afterwards?
http://localhost:8080/c/portal/json_service?serviceClassName=com.liferay.test.service.TrabajadorServiceUtil&serviceMethodName=findByName&servletContextName=TrabajadorPlugin-portlet&serviceParameters=[param1]¶m1=NameInsertedByUser
Now I'm using the <form> tag like this:
<%
//Shows "New Employee" in the text field when portlet is rendered, or gets the user input and pass it as a param to the URL
PortletPreferences prefs = renderRequest.getPreferences();
String employee = (String)prefs.getValue("name", "New Employee");
%>
<form id="postForm" method="post" action="http://localhost:8080/c/portal/json_service">
<input name="serviceClassName" type="hidden" value="com.liferay.test.service.TrabajadorServiceUtil" />
<input name="serviceMethodName" type="hidden" value="create" />
<input name="servletContextName" type="hidden" value="TrabajadorPlugin-portlet" />
<input name="serviceParameters" type="hidden" value="[param]" />
<input name="param" type="text" value="<%=employee%>" />
<input type="submit" value="Submit"/>
</form>
I understand how AJAX works, but I need some help to create my function in order to achieve the URL to be correctly sent to the server for both GET and POST requests. This is my first try with AJAX.
Thank you very much, hope somebody understands my problem and could help me.
First of all, I see no point at all to use JSON services here. Just write ordinary portlet with MVC Controller, and in controller write action handling for corresponding actions (storing data, searching etc).
In controller you can directly call static methods like create or findByName from java class com.liferay.test.service.TrabajadorServiceUtil (or TrabajadorLocalServiceUtil) - that's how people usually do it.
If for some reason you really must use JSON, you should of course do these actions with AJAX calls - and render results using JavaScript.
Updating after question update:
The easiest and most correct way to send AJAX requests in Liferay would be to use AlloyUI JS framework that's a part of Liferay. You can read more on how to send AJAX requests with it here: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/4733559
In order to accomplish your goal I'd suggest implementing processAction(ActionRequest actRequest, ActionResponse actResponse) method in your controller/portlet.
In order to actually send data to it you'll have to have actionURL, which you can create using for example portlet:actionURL tag:
<portlet:actionURL /> or with Java code PortletURL actionUrl = portletResponse.createActionURL();
Then just submit your form using POST to this URL, and in actionRequest you'll have your parameters.
I am trying to implement a simple "Virtuemart Only" search in one of the custom modules on a site.
What I'd like is to be able to insert the search tags into an existing table in a mod_custom module. The problem is, I have no idea how to code an <INPUT> tag to work with VM.
Every Google search I've done returns solutions centered on either (1) installing the VM Advanced Search module, (2) using the basic VM Search module, or (3) using Modules Anywhere to load one of the previously mentioned modules into an existing space. Problem is, the site I'm working on doesn't need another module taking up space. It really just needs a simple <INPUT> field in a particular location that sends queries to VM.
Edit: To clarify my purpose, here is a partial of the source code I want to insert the search into:
<table id="product-search" class="product-search">
<tbody>
<tr>
<td></td>
<td><span class="search-title">Order Online</span></td>
</tr>
<tr>
<td><img src="shopping-cart.png" /></td>
<td><**SEARCH CODE HERE**></td>
</tr>
etc... etc...
So you can see, it's just a simple table with some icons, phone numbers, etc., with the search <input> (hopefully) inserted in the middle of it.
I'm guessing I just need to add some stupidly simple code like:
<form action="administrator/components/com_virtuemart/html/shop.search.php" method="get">
Product Search: <input type="text" name="fname" /><input type="submit" value="Submit" />
</form>
Of course, I just get an error trying to directly access that particular script, so I'm wondering: Any VM gurus know how to code this?
You're not going to be able to just insert a tag in to a mod_custom module, that's not how it works. Did you try the VM Advanced Search Module?
http://extensions.joomla.org/extensions/extension-specific/virtuemart-extensions/virtuemart-products-search/8396
This takes the VM Adv search and puts it in a module. It should do what you need.
I managed to figure it out by scouring the page source for sites I know using VM (should have thought of that in the first place). The code is:
<div class="virtuemart_advsearch">
<form name="adv_search" method="post" action="http://www.mywebsite.com">
<input type="hidden" value="shop.browse" name="page"/>
<input type="hidden" value="com_virtuemart" name="option"/>
<input type="hidden" value="9999" name="Itemid"/>
<input type="text" size="20" name="keyword1" class="inputbox"/>
<input type="submit" value="Search" name="search" class="button search"/>
</form>
</div>
The <div> isn't really necessary, but it keeps things neatly divided for now. This is not the cleanest implementation, but it'll do for now.
If you want to search product only in your site then it will be better if you use default product search module in virtue mart. It will work fine.
I have a legacy HTML form that I want to make into a Spring form. Do I need to switch all of the form tags to Spring form tags or could I mix and match them as I please?
In other words, something like this:
<form:form modelAttribute="mymodel" action="/somecontroller/someaction" method="post">
<input type="text" name="something" value="">
</form:form>
instead of this (using only Spring form tags):
<form:form modelAttribute="mymodel" action="/somecontroller/someaction" method="post">
<form:input path="something" />
</form:form>
You can use regular <input /> elements within a <form:form /> without any problems. This is the conventional way to add submit buttons to a Spring form.
See here for more information.