I hope some of you have an idea about this. I'm still new to Spring but till this point I could figured out every problem myself. I'm using also Thymeleaf for the templates.
In the Controller the function for #GetMapping works as intended, but the #PostMapping function doesnt return the template which I specified in the return parameter and so the browser shows the wrong page.
The #PostMapping function gets triggered by the ajax statement in the html script.
I get no errors or warnings on server side as well as on client side. So I have no idea were the spot the mistake.
Hope some of you can spot the mistake. Thanks in advance anyway.
Controller:
#Controller
public class SpringController {
#RequestMapping(value="/tank", method = RequestMethod.GET)
public String loadData(Model model){
Tankstelle[] data = TankerAPI.getTankData(lat, lng, 5, sort, type);
model.addAllAttributes(convertdata("name", data));
model.addAllAttributes(convertdata("dist", data));
model.addAllAttributes(convertdata("price", data));
return "home";
}
#RequestMapping(value = "/tank", method = RequestMethod.POST)
public String getChangedData(#RequestBody JSONObject incomingjson) {
lat = Float.parseFloat(incomingjson.get("lat").toString());
lng = Float.parseFloat(incomingjson.get("lng").toString());
BigDecimal biglat = new BigDecimal(lat).setScale(3, RoundingMode.HALF_UP);
BigDecimal biglng = new BigDecimal(lng).setScale(3, RoundingMode.HALF_UP);
lat = biglat.floatValue();
lng = biglng.floatValue();
sort = "price"; //for seeing a difference
System.out.println(incomingjson.get("lat")+" "+incomingjson.get("lng"));
return "test"; //here it should return the template "test" but it return "home"
}
home.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8"/>
<title>guenstigertanken.de</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>...
</style>
</head>
<body onload="getLocation()">
<div class="ueberschriftbox"></div>
<h2 class="header">guenstigertanken.de</h2>
<h2 class="subheader">Wir finden die günstigsten Spritpreise für Sie</h2>
<div class="backrounding">
<div class="steuerelementebox"></div>
<div class="steuerelementespritsorteueberschrift">
<h2>Spritsorte</h2>
<label class="container1">Super E5
<input type="radio" id="E5" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Super E10
<input type="radio" id="E10" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Diesel
<input type="radio" id="Diesel" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
</div>
<div class="steuerelementesortierennachueberschrift">
<h2>Sortieren nach</h2>
<label class="container2">Preis aufsteigend
<input type="radio" checked="checked" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Preis absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Distanz aufsteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label> <label class="container2">Distanz absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2" id="alph">Name alphabetisch
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
</div>
<div class="buttonsbox"></div>
<div class="tabellenbox"></div>
<div class="ueberuns">
<p>Über uns</p>
</div>
<div class="agb">
<p>AGB</p>
</div>
<div class="datenschutz">
<p>Datenschutz</p>
</div>
<div class="impressum">
<p>Impressum</p>
</div>
<div class="left show">
<table id="datatable">
<thead>
<tr> <th>Name</th> <th>Entfernung</th> <th>Preis</th> <th>Favorit</th> </tr>
</thead>
<tbody>
<tr> <td th:text="${name1}">AGIP</td> <td th:text="${dist1}">7km</td> <td th:text="${price1}">1,20€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name2}">Aral</td> <td th:text="${dist2}">12km</td> <td th:text="${price2}">1,23€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name3}">Esso</td> <td th:text="${dist3}">2km</td> <td th:text="${price3}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name4}">Esso</td> <td th:text="${dist4}">10km</td> <td th:text="${price4}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name5}">Esso</td> <td th:text="${dist5}">5km</td> <td th:text="${price5}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name6}">BP</td> <td th:text="${dist6}">13km</td> <td th:text="${price6}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name7}">BP</td> <td th:text="${dist7}">13km</td> <td th:text="${price7}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name8}">BP</td> <td th:text="${dist8}">13km</td> <td th:text="${price8}">1,35€</td> <td><input type="checkbox"></td> </tr>
</tbody>
</table>
</div>
</div>
<a class="cssbuttonfavoriten" href="test.html">Favoriten></a>
<a class="cssbuttonleaderboard" href="test.html">Leaderboard></a>
<a class="cssbuttonstatistiken" href="test.html">Statistiken></a>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
}
}
function showPosition(position) {
var posdata = '{"lat":"'+position.coords.latitude+'","lng":"'+position.coords.longitude+'","typeselect":"'+type+'"}';
$.ajax({
type: 'post',
url: '/tank',
data: JSON.stringify(posdata),
contentType: "application/json; charset=utf-8",
traditional: true,
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
error: function(){
alert("ajax error")
}
});
}
</script>
</body>
</html>
When you make any request through ajax you just receive corresponding response in your callback function:
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
So browser will not show you a new template page. Your page is in "postdata" response
Am getting the below error:
stale element reference: element is not attached to the page document.
When I select a country from the country dropdown the page gets refreshed since we have used 'onchange' attribute, so when i try to locate rest of the fields in the form its throwing me the stated exception.
Note: I have cross verified the locators before and after the page gets loaded,
there is no change in it as most of the locators used are id's.
Here is my HTML,
<form method="post" action="/eClaims/app" name="mainForm" id="mainForm"
accept-charset="utf-8">
<div style="display: none;">
<input type="hidden" name="formids"
value="ifErrors,hasErrors,If,If_0,statusDate1,If_1,If_3,If_5,If_7,If_2,callDate,If_8,If_4,countryList,If_9,If_6,languageList,If_10,If_11,If_12,customerEmail,If_13,If_14,customerTitle,If_15,customerFirstName,If_16,If_17,customerLastName,If_18,customerCompany,If_19,If_20,If_21,customerFaxPhoneCode,customerFaxNumber,If_22,If_23,customerPhoneCode,customerPhoneNumber,If_24,If_25,qualificationSystem,If_26,If_27,caseId,If_28,If_29,productNumber,If_30,If_31,serialNumber,If_32,If_33,If_34,purchaseDate,If_35,If_36,problemDescription,If_37,qualificationAgent,If_38,If_39,If_40,cancelDoaAuth,If_41,Submit_0,If_42,Submit_1,If_43,Submit_2,If_44,If_45,If_46,If_47,Submit_6,Submit_7,Submit_8">
<input type="hidden" name="component" value="mainForm"> <input
type="hidden" name="page" value="DoaAuthorisationForm">
</div>
<table width="100%">
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr class="theme">
<th width="100%" colspan="3">
<h2 class="themeheader">Authorisation to return DOA product</h2>
</th>
</tr>
<tr>
</tr>
<tr>
<td colspan="10"><font color="red">please obtain a valid
proof of purchase from the customer before proceeding with this
form. </font></td>
</tr>
<tr>
<td colspan="3"><hr width="100%"></td>
</tr>
<!-- <tr style="visibility: hidden;">
<td>
<span key="label.status" ></span>
</td>
<td class="inputFormCell">
<span jwcid="statusList" ></span>
</td>
</tr> -->
<tr style="visibility: hidden;">
<td>Status Date</td>
<td class="inputFormCell"><input type="text" name="statusDate1"
value="" title="dd MMM yyyy" id="statusDate1"> <a
href="javascript:calendar_statusDate1.toggle(document.mainForm.statusDate1);"><img
src="/eClaims/app?digest=d1154f8b7bf653ba6128f8cb1f5c8e95&path=%2Forg%2Fapache%2Ftapestry%2Fform%2FDatePickerIcon.png&service=asset"
border="0"></a></td>
</tr>
<tr>
<td>Call Date<font color="red"> *</font>
</td>
<td class="inputFormCell"><input type="text" name="callDate"
value="" title="dd MMM yyyy" id="callDate"> <a
href="javascript:calendar_callDate.toggle(document.mainForm.callDate);"><img
src="/eClaims/app?digest=d1154f8b7bf653ba6128f8cb1f5c8e95&path=%2Forg%2Fapache%2Ftapestry%2Fform%2FDatePickerIcon.png&service=asset"
border="0"></a></td>
</tr>
<tr>
<td>Country<font color="red"> *</font>
</td>
<td class="inputFormCell"><select name="countryList"
id="countryList" style="width: 180px;"
onchange="javascript:onChangeCountry(this);">
<option value="">--please select--</option>
<option value="AF">Afghanistan</option>
<option value="AS">American Samoa</option>
<option value="AU" selected="selected">Australia</option>
<option value="BD">Bangladesh</option>
<option value="WF">Wallis And Futuna</option>
<option value="WS">Samoa</option>
</select></td>
</tr>
<tr>
<td>Language<font color="red"> *</font>
</td>
<td class="inputFormCell"><select name="languageList"
id="languageList" style="width: 180px;">
<option value="" selected="selected">--please select--</option>
<option value="EN">English</option>
</select></td>
</tr>
<tr>
<td>Customer Email<font color="red"> *</font><font color="red">
*</font>
</td>
<td class="inputFormCell"><input type="text"
name="customerEmail" value="" id="customerEmail"></td>
</tr>
<tr>
<td colspan="3">**Fax Number mandatory for 'Save & Fax',
e-Mail mandatory for 'Save & Mail'</td>
</tr>
<tr>
<td class="section_content"><input type="submit"
name="Submit_6" value="[BUTTON.SUBMIT1]" id="submitDummy"
class="primButton" style="visibility: hidden;"></td>
<td class="section_content"><input type="submit"
name="Submit_7" value="[BUTTON.SUBMIT2]" id="submitAuth"
class="primButton" style="visibility: hidden;"></td>
</tr>
<tr>
<td class="section_content"><input type="submit"
name="Submit_8" value="[BUTTON.SUBMIT2]" id="submitMailAuth"
class="primButton" style="visibility: hidden;"></td>
</tr>
</tbody>
</table>
</form>
I have tried the following solutions,
new WebDriverWait(driver, 500)
.ignoring(StaleElementReferenceException.class)
.until(new Predicate<WebDriver>() {
public boolean apply(#Nullable WebDriver driver) {
Select selectLanguage;
try {
selectLanguage = new Select(getWebElement("apj.newdoa.language"));
selectLanguage.selectByValue("EN");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return true;
}
});
2nd Solution,
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout( 120, TimeUnit.SECONDS )
.pollingEvery( 20, TimeUnit.SECONDS )
.ignoring( NoSuchElementException.class, StaleElementReferenceException.class );
// using a customized expected condition
Select foo1 = wait.until(new Function<WebDriver, Select>() {
Select selectLanguage;
public Select apply(WebDriver driver) {
try {
selectLanguage = new Select(getWebElement("apj.newdoa.language"));
logger.info("Value of Option:\t" +selectLanguage.toString());
return selectLanguage = new Select(getWebElement("apj.newdoa.language"));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return selectLanguage;
}
});
foo1.selectByValue("EN");
Thanks in advance
<tr style="background: #D0CDCD;">
<td colspan='2'>
<input type="text" name="mytext1[]">
</td>
<td></td>
<td colspan='2' style="text-align:right;">
<input type="text" name="mytext2[]" id="txt1" onkeyup="sum();">
</td>
</tr>
This is my html code to add dynamic textboxes.
JS Script is follows
<script type="text/javascript">
$(document).ready(function() {
var max_fields= 3;
var x = 1;
$('a').click(function() {
if(x < max_fields){
x++;
$('#myTable #row').append('<tr class="child"><td class="child" colspan="2"><input type="text" name="mytext1[]"></td><td></td><td colspan="2" style="text-align:right;"><input type="text" name="mytext2[]"></td></tr>');
}
});
});
</script>
My problem is that I need to store the dynamically added textbox values to a variable so that I can perform some mathematical operations in that. I don't know how to achieve this. Please help me.
I got the result. I make use of javascript and jQuery
<tr style="background: #D0CDCD;">
<td colspan='2'><input type="text" name="mytext1[]"></td>
<td></td>
<td colspan='2' style="text-align:right;">
<input type="text" class="value_field" name="mytext2[]" >
</td>
</tr>
Function to append
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#myTable #row').append('<tr class="child"><td class="child" colspan="2"><input type="text" name="mytext1[]"></td><td></td><td colspan="2" style="text-align:right;"><input type="text" name="mytext2[]" class="value_field"></td></tr>');
$("input.value_field").blur(function(){
check_value();
});
});
});
$("input.value_field").blur(function(){
check_value();
});
I have tried to implement a progress bar in my application. When I used a numeric text box the progress bar is not progressing forward. How to make it progress using a numeric text box. Thanks.
<form name="ContactInforForm" action="ContactInformation.html" onsubmit="return ValidateRequiredFields()" method="post">
<div>
<table class="forms" style="padding-left:9em">
<tr>
<td>
<h4>Profile Completeness: <span id="completed">20%</span></h4>
</td>
<td>
<div id="profileCompleteness"></div>
</td>
</tr>
<tr>
<td>
Employee Name:
</td>
<td>
<input type="text" name="FName" id="txtFname" />
</td>
</tr>
<tr>
<td>
Employee Id:
</td>
<td>
<input type="text" name="EmpID" id="txtEmpID" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input type="text" name="Age" id="txtAge" />
</td>
</tr>
<tr>
<td>
Contact Phone:
</td>
<td>
<input type="text" name="PrimaryPhone" id="txtPriPhone" />
</td>
<td><span id="PPhoneValidationMsg" style="color:red; font-size:smaller; font-weight:bold; "></span></td>
</tr>
<tr>
<td>
<button style="width:75px;" type="button" id="btnNext" onclick="ValidateRequiredFields();">Submit</button>
</td>
</tr>
</table>
</div>
</form>
<!--Make all the controls into kendo -->
<script>
$(document).ready(function() {
$("#txtFname").kendoMaskedTextBox({
});
$('#txtEmpID').kendoNumericTextBox({
});
$('#txtAge').kendoNumericTextBox({
});
$('#txtDob').kendoDatePicker({
});
$('#txtDesig').kendoMaskedTextBox({});
$('#txtAdd1').kendoMaskedTextBox({
});
$('#txtAdd2').kendoMaskedTextBox({
});
$('#drpStates').kendoDropDownList({
});
$('#drpCountry').kendoDropDownList({
});
$("#txtPriPhone").kendoMaskedTextBox({
mask: "(000)000-0000"
});
$("#btnNext").kendoButton();
var pb = $("#profileCompleteness").kendoProgressBar({
type: "chunk",
chunkCount: 10,
min: 0,
max: 10,
value: 2
}).data("kendoProgressBar");
$(".forms input").change(function() {
var completeness = 2;
$(".forms input").each(function() {
if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
});
</script>
When I changed the kendo numeric text box to masked text box the code seems to work fine. But for my requirement I require numeric textbox.
The default value of a numeric textbox may not be "". Try something like this:
$(".forms input").change(function () {
var completeness = 2;
$(".forms input").each(function () {
if (this.hasClass("k-numerictextbox") && this.value != "0" && this.value != "") {
completeness++;
} else if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
Would be pretty easy to set a break point and see what an empty numeric textbox looks like.
i want to redirect to another url when the form is submitted how can i do it
i am new to ajax so please tell where to add the code which can do it
here is my code
<script type="text/javascript">
function submitForm() {
if ($("#fields_fname").val() == "") {
$("#fields_fname").focus();
alert("The First Name field is required.");
return false;
}
if ($("#fields_lname").val() == "") {
$("#fields_lname").focus();
alert("The Last Name field is required.");
return false;
}
if ($("#fields_email").val() == "") {
$("#fields_email").focus();
alert("The Email field is required.");
return false;
}
if ($("#fields_phone").val() == "") {
$("#fields_phone").focus();
alert("The Phone field is required.");
return false;
}
if ($("#fields_zip").val() == "") {
$("#fields_zip").focus();
alert("The Postal Code field is required.");
return false;
}
if ($("#fields_suffix").val() == "") {
$("#fields_suffix").focus();
alert("The 'I'm Interested In' field is required.");
return false;
}
$.ajax({
url: 'zohoprocess.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 1 submitted successfully');
$.ajax({
url: 'https://app.icontact.com/icp/signup.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 2 submitted successfully');
},
error:function(){
alert("success");
$(".form_result").html('');
return false;
}
});
},
error:function(){
alert("failure");
$(".form_result").html('');
return false;
}
});
return false;
}
</script>
<form id="ContactForm">
<input type="hidden" name="redirect" value="http://tennispronow.com/thanks.html">
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">
<div id="SignUp">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" align="right">
<span class="required">*</span>Email
</td>
<td align="left">
<input type="text" name="fields_email" id="fields_email">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>First Name
</td>
<td align="left">
<input type="text" name="fields_fname" id="fields_fname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Last Name
</td>
<td align="left">
<input type="text" name="fields_lname" id="fields_lname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>What Level Player are you?
</td>
<td align="left">
<select name="fields_prefix" id="fields_prefix">
<option></option>
<option value="Beginner">Beginner</option>
<option value="Upper Beginner">Upper Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>I am Interested in:
</td>
<td align="left">
<select name="fields_suffix" id="fields_suffix">
<option></option>
<option value="Private Lessons">Private Lessons</option>
<option value="Lessons & Equipment">Lessons & Equipment</option>
<option value="Classes">Classes</option>
<option value="Equipment">Equipment</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Other Info:
</td>
<td align="left">
<input type="text" name="fields_fax" id="fields_fax">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Phone
</td>
<td align="left">
<input type="text" name="fields_phone" id="fields_phone">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Postal Code
</td>
<td align="left">
<input type="text" name="fields_zip" id="fields_zip">
</td>
</tr>
<input type="hidden" name="listid" value="42670">
<input type="hidden" name="specialid:42670" value="D1CQ">
<input type="hidden" name="clientid" value="860526">
<input type="hidden" name="formid" value="4668">
<input type="hidden" name="reallistid" value="1">
<input type="hidden" name="doubleopt" value="0">
<tr>
<td></td>
<td><span class="required">*</span> = Required Field</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit" onClick="return submitForm()">
</td>
</tr>
</table>
<div class="form_result"> </div>
</div>
</form>
please check it dont know what to write more
Just add action attribute to the form tag.