I know this question probably has been asked before, but I can't seem to find the awnser on it.
I'm trying to call a servlet method when a page is loaded, at this moment it's an endless loop cause every time the servlet posts the response the page gets reloaded and calls the servlet again which then calls reloads the page again etc etc..
I'm collecting an ID from the url which I then use in the servlet to collect the data I need.
Here is the code I'm currently using.
<form style="display:none;" action="ServletC" method="POST">
<input type="hidden" name="hdn_parameter" value="<%= request.getParameter("productID")%>"/>
<input type="submit" id="btn_loadform" name="loadform" style="display: none;"/>
<script>
document.getElementById('btn_loadform').click();
</script>
</form>
and I got a couple pieces of code like this throughout the page
<img id="picture_img" class="" style="width:300px;" src="${ImageResponse}" />
The following code is on my servlet
if (request.getParameter("loadform") != null)
{
int productID = Integer.parseInt(request.getParameter("hdn_parameter"));
String link = "PictureDetail.jsp?productID=" + Integer.toString(productID);
Product p = null;
try
{
p = DBConnect.getProduct(productID);
}
catch (SQLException ex)
{
Logger.getLogger(ServletC.class.getName()).log(Level.SEVERE, null, ex);
}
request.setAttribute("ImageResponse", p.getPath());
request.setAttribute("TitleResponse", p.getName());
request.setAttribute("DescriptionResponse", p.getDescription());
request.setAttribute("PriceResponse", p.getPrice());
loaded = true;
RequestDispatcher dis = request.getRequestDispatcher(link);
dis.forward(request, response);
}
could anyone help me on what I should do now to make this happen without refreshing the page so it will work smoothly.
Thanks in advance.
The request that goes out on click of that button is a proper http request and its response would naturally repaint the page. You will have to form an AJAX request on button click, parse the response on success and then do something on the page (with the parsed response data).
Related
I have a Spring Application and Server Side Rendering with Thymeleaf as Templating language.
A button sends a get or post request to the controller in Spring, which puts some message to the view, which is rendered into the HTML file and send back to the client. The message should be optional. Thats why the template must also be able to be called without the message.
Next i want the client browser to scroll down to the part of the page where this message is rendered into, which is normally very easy. You would just have to append the id of the element to the url like following example.
https://stackoverflow.com/#footer
In this example the browser scrolls down to the footer of the page.
Below is what i tried. Unfortunately it doesnt't work like that. Spring/Thymeleaf tries to find a index#messagebox template which can't be found. Hence a Whitelabel Error Page error is thrown/shown.
Page.html
<section>
<h2>Form to send request</h2>
<form action="showmessage" method="get">
<input type="submit" value="Click for message">
</form>
</section>
Controller.java
#GetMapping("showmessage")
public ModelAndView showMessage(){
return new ModelAndView("index#messagebox",Map.of("optionalmessage","Some message that is optioal"));
}
src/main/resources/templates/index.html
<body>
<h1>Index Page</h1>
<div id="messagebox" th:fragment="message" th:with="optionalmessage=${optionalmessage}">
<p th:if="${optionalmessage!=null}">[[${optionalmessage}]]</p>
</div>
</body>
The problem can be solved with Flashmessages and Redirects. The html basically keeps the same. If the message attribute is set, you render it.
src/main/resources/templates/index.html
<div th:if="${msg}">
<div class="message" >
<p>[[${msg}]]</p>
</div>
</div>
The most important changes had to be made in the controller. First a parameter of type RedirectAttributes is added to the Controller that handles the request.
If wanted the message is added with the RedirectAttributes.addFlashAttribute function as shown below. Finally a redirect is returned, which contains the needed tag. A second controller is also needed that handles the Get Request of the Redirect with a Model as input parameter and returns the needed Template. The #tag is simply passed throuhg to the client browser.
Controller.java
#GetMapping("showMessage")
public String postNotification(RedirectAttributes redirectAttributes) {
redirectAttributes.addFlashAttribute("optinalMessage", "Hello I am an optional message");
return "redirect:/index#footer";
}
#GetMapping("index")
public String getIndex(Model model) {
return "index";
}
You add id in URL by using ?id=value.
And in controller #RequestMapping("/path/{id}")
to access that variable #PathVariable
We have a mobile app which shows an html page with some javascript in a webviewer.
In this page we have a form. IT looks something like:
<form method="get" action = "" id="mainform">
<input name="EXAMPLE_NAME" id"EXAMPLE_NAME" placeholder="" type="text" maxlength="35"/>
</form>
So far so good. The user is able to view this input and fill it in with data. They then press a button on the xaml page which calls a function that does:
Browser.Eval("submitMainForm()")
In the javascript on the page we have that function, which looks like:
function submitMainForm() {
var x = document.getElementById("mainForm").submit();
}
Back in the C# code we have handlers for the resulting navigation. They look like:
async void OnNavigating(object sender, WebNavigatingEventArgs e)
{
and
void OnNavigated(object sender, WebNavigatedEventArgs e)
{
This works well in iOS and Android. We get the WebNavigatingEventArgs in the handler, and the value from the field that we are showing in the webviewer (inside of mainform) are stored in there.
So, for example, e.Url in the OnNavigating and OnNavigated handlers would look something like:
"file:///storage/emulated/0/Android/data/com.example.exampleapp/files/Example.html?EXAMPLE_NAME=Test"
We parse this string to get the values we care about (Test, in this case), and all is well.
On UWP, however, things work a lot less well. On Navigating is never called at all, and the call to OnNavigated just has "about:blank" stored in its WebNavigateEventArgs url value.
Does anyone know what might be going on here, and/or have a way that I can fix it? I need a way to get the results from my call to the get form as I do in the other 2 platforms, rather than "about:blank". Ideally, I'd also like to get the OnNavigated call, but the important thing is the data.
Thanks for your assistance
For html form submitting, you need add the action url that used to received parameter. For example:
<form id="Myform" action="HomePage.html">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
When you invoke submit, the firstname lastname field will be sended to HomePage.html page. I create HomePage that Build Action is Content in native uwp project.
Please note you could not create html in forms project. Otherwise the webview could get navigate to the right url.
This is code sample please check.
I have the following dojo (ver 1.9) code:
require(["dojo/dom", "dojo/on", "dojo/request", "dojo/dom-form"],
function(dom, on, request, domForm){
var form = dom.byId('user_login');
var selectedTabId = showIdOfSelectedTab();
// Attach the onsubmit event handler of the form
on(form, "submit", function(evt){
// prevent the page from navigating after submit
evt.stopPropagation();
evt.preventDefault();
// Post the data to the server
request.post("login1.php", {
// Send the username and password
data: domForm.toObject("user_login"),
// Wait 2 seconds for a response
timeout: 2000
}).then(function(response) {
dom.byId(selectedTabId).innerHTML = response;
});
});
}
);
And html below:
<form name="user_login" id="user_login">
User name: <input type="text" name="user_name" id="user_name" /><br />
Password: <input type="password" name="user_password" id="user_password" /><br />
<button id="submitbutton" name="submitbutton">Submit</button>
</form>
I want to make the above dojo code as generic by sending the post action (login1.php) and the form id (i.e., user_login). I tried several ways but I could not achieve it.
Please let me know if any of you have idea.
Thanks in advance.
-Uday
This is the demo drom the dojo Tutorial right?
http://dojotoolkit.org/documentation/tutorials/1.9/ajax/
Did you get any Errormessages?
So let's see.
Have you load the dojo libary correct? If not, the widgets can't be loaded.
Must be somthing like:
src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js">
Check the path to the login1.php.
If it's in another Folder than your code the path must be something like "../myfolder /myphp/login1.php"
Regards, Miriam
I have a form that on submit doesn't reach the controller method (I put a breakpoint there)
[HttpPost]
public ActionResult SaveBilling( FormCollection fc )
{
...
}
the frontend code is something like this
<form action="/PersonSettings/SaveBilling" method="post" >
...
<input type='submit' value="save" />
</form>
any ideas ?
not sure if it is a route handler problem because it does reach the GET version if i go to /PersonSettings/SaveBilling in browser but the post method just yields a blank page and doesnt go into the code
Rewrite your view as:
#using (Html.BeginForm("SaveBilling", "PersonSettings", FormMethod.Post))
{
....
<input type='submit' value="save" />
}
Is this controller in any area or not?
I realize this has been solved, but I thought I'd tack on another possible cause: Having the [ValidateAntiForgeryToken] attribute on your method without an #Html.AntiForgeryToken() in your code will create the same problem.
Turns out it was a routing related issue after all , I have some complex routes and the default mvc route was catching things that should have gone through the default mvc route with areas.
Was able to recreate the issue by having explicit parameters for my function instead of a formcollection, so that might have been the issue ohwell.
use form and define action path.
<form id="subscriptionForm" action="/Category/Create" method="post">
--your div
</form >
Now use script to serialize the form
<script type="text/javascript">
$('#Save').click(function () {
var form = $("#subscriptionForm");
var url = form.attr("action");
var formData = form.serialize();
$.post(url, formData, function (data) {
$("#msg").html(data);
});
})
</script>
Now you can reach your controller action.
Sometimes using a network sniffing tool like Fiddler is helpful to see what's wrong when the request is sent and it seems not reaching the server.
I am trying to transition to next state of a WebFlow using Ajax requests. But it stays in the same state and returns the GSP as response for that state while I am expecting the GSP for the next state.
Following is the WebFlow code:
def gettingStartedAjaxFlow = {
flow1 {
on("next") {
println "flow1"
}.to("flow2")
on("skip").to("flow2")
}
flow2 {
on("next") {
println "flow2"
}.to("flow3")
on("skip").to("flow3")
}
flow3 {
on("next"){
println "flow3"
}.to("finish")
on("skip").to("finish")
finish {
redirect(action:"index")
}
}
}
Following is the Ajax call I am making for the state transition:
$.ajax({
type: "POST",
url: "/UN/user/gettingStartedAjax",
success: function(data) {
$("#wizardDiv").html(data);
}
});
The GSPs for each state (flow1, flow2, flow3) contains a a code fragment having remoteForm & required next and skip submit buttons to transition to next state and as a result update the "wizardDiv" div. Following is the GSP fragment for flow1 state:
<g:formRemote name="flow1Form" url="[controller:'user', action:'gettingStartedAjax']" update="wizardDiv">
<p>You are in flow 1</p>
<g:submitButton name="next" value="Next Flow" />
<g:submitButton name="skip" value="Skip Flow" />
</g:formRemote>
I'm stuck on the same problem, Nearly figured it out,
what you need to do, is send back the Grails webflow "_flowExecutionKey" that keeps
track of the current state,
I'm sure you've seen this, as its the only decent result Google finds.
I send an ajax request to an action, which populates a template and sends it back
with an input tag,
<input id="flowExecutionKey" name="_flowExecutionKey" value="${request.flowExecutionKey}" size="100"/>
But you could try send a temple back marked up like JSON with the "_flowExecutionKey" along with the data you want to send back,
That's my two cents
As well as keeping track of the execution (as Daxon posted), you'll need to make sure your buttons are named _eventId_next and _eventId_skip. g:submitbutton is normally clever enough to do this for you but it might not be inside of a remoteForm.
Also, my web flow code uses the parameter execution, not flowExecutionKey - which version of Grails are you using?
Here a solution that works in grails 2.5.3 at least for one single action. The id and name of the button are automatically modified to include "eventId" as prefix but this still did not work for me unless I added _event_id manually as input parameter. However, I'm not sure how this can work for multiple possible events.
<g:formRemote name="flow1Form" url="[controller:'user', action:'gettingStartedAjax']" update="wizardDiv">
<input type="hidden" id="execution" name="execution" value="${request.flowExecutionKey}"/>
<input type="hidden" id="_eventId" name="_eventId" value="next"/>
<fieldset class="form">
</fieldset>
<fieldset class="buttons">
<g:submitButton name="next" value="Next flow"/>
</fieldset>
</g:formRemote>