I use jsoup for parsing html page and submit form. I need to remove "Back" button before submit form. I use element.remove() method, but then I see that form.formData() has not changed. Requested element has removed from form.children() but exists in form.elements(). Is this a bug or I use wrong way to remove element from form?
public class JsoupCheck {
public static void main(String[] args) {
String html = "<html><body><form action=\"demo\">"
+ "<input type=\"submit\" name=\"buttonSave\" value=\"Save\">"
+ "<input type=\"submit\" name=\"buttonBack\" value=\"Back\">"
+ "<select name=\"selection\">"
+ " <option value=\"value1\">Value 1</option>"
+ " <option value=\"value2\" selected>Value 2</option>"
+ " <option value=\"value3\">Value 3</option>"
+ "</select>"
+ "</form></body></html>";
Document doc = Jsoup.parse(html);
FormElement form = (FormElement) doc.select("form").first();
Element e = form.select("form").first();
System.out.println("=== Original content of form");
System.out.println(e);
System.out.println("=== Original content of form.formData()");
for (Connection.KeyVal i : form.formData()) {
System.out.println(i.key() + "=" + i.value());
}
System.out.println("form.elements().size() = " + form.elements().size());
System.out.println("form.children().size() = " + form.children().size());
e.select("input[name=buttonBack]").remove();
System.out.println();
System.out.println("=== Content of form after remove buttonBack (result: buttonBack removed)");
System.out.println(e);
System.out.println("=== Content of form.formData() after remove buttonBack (result: buttonBack exist)");
for (Connection.KeyVal i : form.formData()) {
System.out.println(i.key() + "=" + i.value());
}
System.out.println("form.elements().size() = " + form.elements().size());
System.out.println("form.children().size() = " + form.children().size());
}
}
Output is:
=== Original content of form
<form action="demo">
<input type="submit" name="buttonSave" value="Save">
<input type="submit" name="buttonBack" value="Back">
<select name="selection"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option></select>
</form>
=== Original content of form.formData()
buttonSave=Save
buttonBack=Back
selection=value2
form.elements().size() = 3
form.children().size() = 3
=== Content of form after remove buttonBack (result: buttonBack removed)
<form action="demo">
<input type="submit" name="buttonSave" value="Save">
<select name="selection"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option></select>
</form>
=== Content of form.formData() after remove buttonBack (result: buttonBack exist)
buttonSave=Save
buttonBack=Back
selection=value2
form.elements().size() = 3
form.children().size() = 2
FormElement is a special kind of node. Besides maintaining a list of all children (inherited from Node), it holds a second internal list of all elements within the form.
public class FormElement extends Element {
private final Elements elements = new Elements();
...
}
When you call Node#remove on a child, it updates the parent's list of children, not the internal list.
Therefore, to really remove an element, you also need to remove it from this internal list:
e.select("input[name=buttonBack]").remove();
form.elements().removeIf(e -> e.attr("name").equals("buttonBack"));
Related
I have a list of objects services in my thymeleaf context, and I have the following at my page:
<select id="inputService" name="idService" size="1">
<option th:each="service : ${services}" th:text="${service.name}" th:value="${service.idService}"/>
</select>
<p id="selectedServiceLimits"></p>
Each object from services contains fields minAmount and maxAmount. How can I print into my p element the these two fields of the selected service in select by javascript? And how can I print these two fields of the option that is selected when document is ready?
Thanks!
<script th:inline="javascript">
/*<![CDATA[*/
function showLimits() {
var services = /*[[${services}]]*/ null;
var selectedIndex = $("#inputService option:selected").index();
var service = services[selectedIndex];
$("#amountLimits").text("Мин. сумма: " + service.amountMin + ", макс. сумма: " + service.amountMax);
}
$(function() { showLimits(); });
/*]]>*/
</script>
<select id="inputService" name="idService" size="1" onChange="showLimits()">
That's the solution
here's an html code. I want to print "Color:" and various color options present. And somehow I want it by using "select name=att1" that means by name tag of select.
<div class="box-body">
<div id="attributeInputs" class="attribute-inputs" data-defcolor="Palm">
<div class="row thinpad-top att1row">
<div class="small-24 columns">
<label for="att1_BA0FEDC6-8BF1-11E4-B816-87E377679EE2">Color:</label>
</div>
<div class="small-24 columns">
<select name="att1" id="att1_BA0FEDC6-8BF1-11E4-B816-87E377679EE2">
<option value="">Please Select Color</option>
<option value="Black">Black</option>
<option value="Palm">Palm</option>
</select>
</div>
I've tried so many jsoup tags. But I'm not able to get required output
I want output something like this:
Please Select Color:
Black
Palm
please help
This code will extract the elements inside the select tag and option tag
String html="<div class=\"box-body\">\n" +
"\n" +
" <div id=\"attributeInputs\" class=\"attribute-inputs\" data-defcolor=\"Palm\">\n" +
"\n" +
" <div class=\"row thinpad-top att1row\">\n" +
" <div class=\"small-24 columns\">\n" +
" <label for=\"att1_BA0FEDC6-8BF1-11E4-B816-87E377679EE2\">Color:</label>\n" +
" </div>\n" +
" <div class=\"small-24 columns\">\n" +
" <select name=\"att1\" id=\"att1_BA0FEDC6-8BF1-11E4-B816-87E377679EE2\">\n" +
" <option value=\"\">Please Select Color</option>\n" +
" <option value=\"Black\">Black</option>\n" +
" <option value=\"Palm\">Palm</option>\n" +
" </select>\n" +
" </div>";
Document doc = Jsoup.parse(html);
Elements links = doc.select("select option");
for (Element link : links) {
String linkText = link.text();
System.out.println(linkText);
}
I have a HTML page with dinamycally changing number of select elements.
<script>
function getValues() {
var selects = document.getElementsByTagName('select'),
arr = Array.prototype.slice.call(selects),
selectValues = arr.map(function (select) {
return select.value;
});
return selectValues;
}
</script>
<script type='text/javascript'>
function moreSelect() {
for (i = 0; i < number; i++) {
// Append a node with a random text
container.appendChild(document.createTextNode("Name " + (i+1) + ": "));
// Create an <input> element, set its type and name attributes
var input = document.createElement("select");
input.name = "name" + (i+1);
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
</script>
<form action="action"method="POST" onsubmit="return getValues;">
More selects (max. 9):<br>
<p>
<input type="number" id="name" name="name" value="0"
min="0" max="9"><br />
<button type="button" onclick="moreSelect()">Add</button>
<br>
<p>
<br>
<div id="container" /></div>
<p>
<br> <br> <input type="submit" value="Go">
</form>
I want to collect this values to a List or an Array before the POST method and give this parameter list to my Java controller like this:
#RequestParam("allValues") List<String> allValues
Edit: I edited it, but doesn't works.
Get all selects, transform them to a real Array by Array.prototype.slice. Now you can use map to get all values. getElementsByTagName returns a HTMLCollection, that does not support map(), etc.
var selects = document.getElementsByTagName('select'),
arr = Array.prototype.slice.call(selects),
selectValues = arr.map(function (select) {
return select.value;
});
Now selectValues is an Array of the select values.
You can add one hidden form parameter say with name "allValues" and using javascript before posting Form, you can add all select values in that parameter.
Here's the scenario. The user fill a form with a certain number of parameters in an html page, then I need to invoke my applet with this specific parameters, possibly within the same page. What's the easiest way to perform this pass?
I'm using the runApplet function, but it's not working. No messages in the JS console and in the Java console.
<html>
<head>
<title>Compila i dati</title>
</head>
<body>
<script src=
"http://www.java.com/js/deployJava.js"></script>
<script>
function runApplet(){
var attributes = { id:'anID', code:'Test', width:1, height:1, codebase: '.'} ;
var parameters = {width:'100', height:'100', code:'Test', archive: 'applet.jar, xyz.jar, abc.jar',
posX: document.forms["form1"]["posX"].value , posY: document.forms["form1"]["posY"].value , heightSign: '300' , widthSign: '600' ,
PDFUrl: 'http://anurl' ,
type:'application/x-java-applet' , scriptable:'false' } ;
deployJava.runApplet(attributes, parameters, 1.6);
}
</script>
<form name = "form1" onsubmit="runApplet()">
<div>
<label for="name">Nome:</label>
<input type="text" name="nome" />
</div>
<div>
<label for="mail">Cognome:</label>
<input type="text" name="cognome" />
</div>
<div>
<label for="msg">X:</label>
<input type="text" name="posX" />
</div>
<div>
<label for="msg">Y:</label>
<input type="text" name="posY" />
</div>
<div class="button">
<button type="submit">Invia</button>
</div>
</form>
</body>
I could try to create an dinamic applet contanier via javascript in this way:
$('#idappletv').empty();
$('#idappletv').hide();
var _xmhlcode = " <script> function javafxEmbed() {" +
"dtjava.embed( " +
"{" +
" id: 'myBrApplet'," +
" url : 'pages/applet/myApplet.jnlp'," +
" placeholder : 'javafx-app-placeholder'," +
" width : 890 ," +
" height : 200," +
" jnlp_content : 'bmFtZT0iQXBwbGV0RnhCcm93c2VyIiAvPg0KICA8dXBkYXRlIGNoZWNrPSJhbHdheXMiLz4NCjwvam5scD4NC=='" +
", params: {param1:'" + param1 + "',param2:'" + param2 + "'}" +
"}," +
"{" +
" javafx : '2.2+'" +
"}," +
"{}" +
");" +
"}" +
"dtjava.addOnloadCallback(javafxEmbed); </" + "script> ";
$('#idappletv').append("<div id='javafx-app-placeholder'></div>");
$('#idappletv').append(_xmhlcode);
dtjava.addOnloadCallback(javafxEmbed);
$('#idappletv').show();
Then when the applet starts you can read the parameter using:
#Override
public void start(Stage primaryStage) {
Parameters params = getParameters();
String param1 = params.getNamed().get("param1");
String param2 = params.getNamed().get("param2");
You can read the parameter "param1 and param2" from your html page.
It should be works.
I used JavaFX with java-webstart (http://docs.oracle.com/javafx/2/deployment/deploy_swing_apps.htm).
Hello I am new to AJAX and JQUERY/JQUERY(UI), I have an application that has 4 tabs (1,2,3,4).
The first tab is enabled and the last 3 tabs are disabled initially. When the user clicks on the next button in the first tab it goes to the second tab. When the user clicks the button in the second tab it should go to the third tab to review or display the details of the information collected in the database, then the user clicks on the button in the third tab it goes to tab 4.
The problem:
Now clicking on the button in the 2nd tab, what I do is a AJAX post that takes all the form data from tab 1 and tab 2 to a Liferay Portlet Controller class in which it collects the data and insert into a database but does not return any data from this function.
The issue is when I click on the NEXT button in the second tab it goes to third tab but only shows the table header information and not the table row data (i.e its empty). The only way it shows this data is when I physically click on refresh the page browser in which goes back to first Tab then I have to go click on tab 1 and tab 2 again to see the data in the table row which is on Tab 3 that was previously inserted into the database.
Here are my code snippets. Can someone please help in how to resolve this issue? Is this suitable way of implementing this solution?
<script type="text/javascript">
$(document).ready(function () {
var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2,3]
});
$("#additem").click(function(e){
//FAULTS
var fault = $('#dd1').val();
var child = $('#childFault').val();
//var childFaultVal = $('#childFault').val;
var how = $('#faultReason').val();
var noteVal = $('#note').val();
var occurenceDate = $('#datepicker').val();
if (fault == ''){
alert("Please select a Stain or Damage");
return false;
}
if (child == ''){
alert("Please select type of "+fault);
return false;
}
if (occurenceDate == ''){
alert("Please select the date that the "+ fault +" occured ");
return false;
}
if (how == ''){
alert("Please select how the incident happened");
return false;
}
$tabs.tabs('enable', 1).tabs("option", "active", 1).tabs('disable', 0);
return false;
});
/* $('#btn-submit').bind('click', function(){ */
$('#btn-submit').click(function(){
//$('#myform').on('submit', function(e){
//$tabs.tabs('enable', 2).tabs("option", "active", 2).tabs('disable', 1);
//FAULTS
var fault = $('#dd1').val();
var childFaultVal = $('#childFault').val;
var how = $('#faultReason').val();
var noteVal = $('#note').val();
var occurenceDate = $('#datepicker').val();
//ITEMS
var itemVal = $('#item').val();
var subitemVal = $('#subItems').val();
var materialVal = $('#material').val();
var locationVal = $('#location').val();
var materialLocVal = $('#materialLoc').val();
if (itemVal == ''){
alert("Please select an Item");
return false;
}
if (subitemVal == ''){
alert("Please select the type of"+itemVal);
return false;
}
if (materialVal == ''){
alert("Please select a material of the "+itemVal);
return false;
}
if (locationVal == ''){
alert("Please a location on the "+itemVal);
return false;
}
if (materialLocVal == ''){
alert("Please select the material location of the"+itemVal);
return false;
}
var form_data = $("form").serialize();
$.ajax({
type: "POST",
url: "<%=renderResponse.encodeURL(reviewClaimURL.toString())%>",
cache: false,
data: form_data,
dataType: "text",
error: function() {
$('#status').text('Update failed. Try again.').slideDown('slow');
},
success: function(response) {
$tabs.tabs('enable', 2).tabs("option", "active", 2).tabs('disable', 1);
},
complete: function() {
setTimeout(function() {
$('#status').slideUp('slow');
}, 3000);
}
});
});
$("#addfault").click(function(){
$tabs.tabs('enable', 0).tabs("option", "active", 0).tabs('disable', 1);
return false;
});
$("#confirm").click(function(){
$tabs.tabs('enable', 3).tabs("option", "active", 3).tabs('disable', 1);
return false;
});
});
HTML CODE TAB 2
<div id="Atab2">
<p id="status"></p>
<div>
<strong> <label>Please Select the Item </label></strong> <select
name="item" id="item"
onChange="<portlet:namespace/>poputlateItemList(this);"
style="width: 200px;">
<option></option>
<c:if test="${itemList != null}">
<c:forEach var="itm" items="${itemList}">
<option value="${itm.text}">
<c:out value="${itm.text}" />
</option>
</c:forEach>
</c:if>
</select>
<div id="<portlet:namespace/>materialText"></div>
<div align="center">
<input type="button" name="btn-submit" class="button"
id="btn-submit" value="NEXT" />
</div>
</div>
</div>
</aui:form>
HTML TAB3
<div id="Atab3">
<div id=someElement>
<p>
<strong>Please review the following items selected. You
could add additional faults or select NEXT to complete your claim</strong>
</p>
<table id="
tfhover" class="tftable" border="1">
<tr>
<th>Fault Selected</th>
<th>Item Selected</th>
<th>Incident Date</th>
<th>Action</th>
</tr>
<c:if test="${newClaimReviewList != null}">
<c:forEach var="review" items="${newClaimReviewList}"
varStatus="theCount">
<%
paragraphID = Helper.getParagraphID();
%>
<c:set var="myCount">${theCount.count + 100}</c:set>
<c:set var="myChildFault">${review.childFault}</c:set>
<c:set var="myItem">${review.item}</c:set>
<c:set var="myIncidentDate">${review.incidentDate}</c:set>
<c:set var="myId">${review.id}</c:set>
<%
String myCountVal = (String) pageContext
.getAttribute("myCount");
String myChildFault = (String) pageContext
.getAttribute("myChildFault");
String myItem = (String) pageContext.getAttribute("myItem");
String myIncidentDate = (String) pageContext
.getAttribute("myIncidentDate");
String myId = (String) pageContext.getAttribute("myId");
String rowName = "my_row_" + myCountVal;
%>
<div class="aui-ctrl-holder" id=<%=paragraphID%>>
<liferay-ui:icon-menu>
<tr id=<%=rowName%>>
<td>${review.childFault}</td>
<td>${review.item}</td>
<td>${review.incidentDate}</td>
<td><liferay-ui:icon-menu>
<%
String taglibUrl = "javascript:"
+ renderResponse.getNamespace()
+ "removeFault('" + myCountVal + "','"
+ myId + "')";
%>
<liferay-ui:icon-delete url="<%=taglibUrl.toString()%>" />
</liferay-ui:icon-menu></td>
</tr>
</liferay-ui:icon-menu>
</div>
</c:forEach>
</c:if>
</table>
</div>
<br /> <br />
<div align="center">
<button id="addfault">ADD FAULT/ITEM</button>
<button id="confirm">NEXT</button>
</div>
</div>
/******************************
*
* #param actionRequest
* #param actionResponse
***********************************/
#SuppressWarnings("unchecked")
#ProcessAction(name = "reviewClaim")
public void postData(ActionRequest actionRequest,ActionResponse actionResponse){
ActionUtil.createReviewClaimDetail(actionRequest,hows,items,claim,policyId);
actionResponse.sendRedirect(viewCreateNewClaim+"?id="+policyId+"&action=review");
}
Here is the code to populate the HTML table
Fault Selected
Item Selected
Incident Date
Action
<c:if test="${newClaimReviewList != null}">
<c:forEach var="review" items="${newClaimReviewList}"
varStatus="theCount">
<%
paragraphID = Helper.getParagraphID();
%>
<c:set var="myCount">${theCount.count + 100}</c:set>
<c:set var="myChildFault">${review.childFault}</c:set>
<c:set var="myItem">${review.item}</c:set>
<c:set var="myIncidentDate">${review.incidentDate}</c:set>
<c:set var="myId">${review.id}</c:set>
<%
String myCountVal = (String) pageContext
.getAttribute("myCount");
String myChildFault = (String) pageContext
.getAttribute("myChildFault");
String myItem = (String) pageContext.getAttribute("myItem");
String myIncidentDate = (String) pageContext
.getAttribute("myIncidentDate");
String myId = (String) pageContext.getAttribute("myId");
String rowName = "my_row_" + myCountVal;
%>
<div class="aui-ctrl-holder" id=<%=paragraphID%>>
<liferay-ui:icon-menu>
<tr id=<%=rowName%>>
<td>${review.childFault}</td>
<td>${review.item}</td>
<td>${review.incidentDate}</td>
<td><liferay-ui:icon-menu>
<%
String taglibUrl = "javascript:"
+ renderResponse.getNamespace()
+ "removeFault('" + myCountVal + "','"
+ myId + "')";
%>
<liferay-ui:icon-delete url="<%=taglibUrl.toString()%>" />
</liferay-ui:icon-menu></td>
</tr>
</liferay-ui:icon-menu>
</div>
</c:forEach>
</c:if>
you need to make another ajax get request to pull the data from before enabling/displaying 3 tab or set the data in model map(on your post call) and retrieve it on 3rd tab.