Under a struts framework, there is a need to change the value of JavaBeans Property when the page is load. Is it possible to access the JavaBeans Property in JSP using JavaScript? The JSP code sample is below:
<logic:present name="obj">
<logic:iterate id="data" name="obj">
<tr>
<td width="50%" valign="top" bgcolor="#C9C9C9">
<logic:present name="data" property="description">
<span class="mediumBlackBold"><b>
<script type="text/javascript">
<!-- try to modify the value of description for each data -->
</script>
<jsp:getProperty name="data" property="description" />
</b></span>
</logic:present>
</td>
</tr>
</logic:iterate>
JSP is server side and JS is browser side, all JS can do is just change the value show up in the HTML.
1.remove your script tag in the iterate tag because there is no need to insert so many script tag in html.
2.add a script tag in the bottom of html and use JS to get all the description value and change whatever value you want.Here is just a JQuery based sample code:
$(".mediumBlackBold>b").each(function(){
var old_value = $(this).text();
var new_value = .....
$(this).text(new_value);
});
Related
Hello i have a problem... Suppose that i have a table whit two textBox and one button.. when i click the button i must read the value of a textBox and create a directory in a specific path and the directory must be named like the value that i read on the TextBox
I've tryed this code but it dosn't work :(
file = directory.php
<?php
$idCantiere = $_POST["idCantiere"];
$codiceCommessa = $_POST["codiceCommessa"];
echo("Registrazione avvenuta");
chdir("../inserimento");
opendir(".");
mkdir("../inserimento/prova/".$idCantiere);
?>
file prova.html
<table method="POST" action="directory.php">
<tr>
<td bgcolor="#B2E5FB">Cantiere</td>
<td colspan="11"> <input type="text" id="idCantiere"></td>
</tr>
<tr>
<td bgcolor="#B2E5FB">Codice Commessa</td>
<td colspan="11"> <input type="text" id="codiceCommessa"></td>
</tr>
<tr><td><button name="insAffidatario" type="submit" onclick="directory.php">Inserisci Affidatario</button></td></tr>
</table>
The problem with your code and it is a specific one; is that you used <table></table> for what should be a form, it should be <form></form>.
Then you used ID's instead of name attributes. You need to add name="idCantiere" and name="codiceCommessa" to their respective inputs.
You may also want to remove onclick="directory.php" here. The "action" already takes care of that.
Side note: Place your table inside the form and not outside. <form> cannot be made child of <table>.
Also make sure that the paths (and folders) correspond and that they are writeable with proper group/user permissions.
Error reporting will be of help also.
http://php.net/manual/en/function.error-reporting.php
and set to catch and display.
I have my key values in java script inside my jsp like below
<script type="text/javascript">
var GROUP_OWNER_ID={7000000000000002551:"ABC",7000000000000004565:"ABCD"}
Now i will get the key(GROUP_OWNER_ID will have 7000000000000002551) from ACtion class using below in jsp
<s:iterator value="vipSegmentLookup" >
<tr>
<td class="table-db-results"><s:property value="GROUP_OWNER_ID"/></td>
</tr>
</s:iterator>
I want to get the corresponding value of that key and display in front end.ie i want to display ABC in front end through jsp.
How can i achieve this.
I wrote a code for retrieving data from database table and displaying it. The entire table is passed as arraylist through servlet to jsp page. Inside the jsp.. first only name is displayed in dropdown box. The objective was to choose a name from dropdown , and rest of the data corresponding to the name is displayed after the name is chosen. Arraylist has been passed correctly. Dropdown is working fine.
but javascript code to display the rest is not working. please help.code below iv shown only for one field. ie,for id.
output page with dropdown
<body>
<form action="Servletname" method="post" name="searchdatabase">
<%int i=0;
ArrayList<Cust> newlist=(ArrayList<Cust>) request.getAttribute("CusList");
if(newlist.size()>0){
%>
<table>
<tr>
<td> name :</td>
<td>
<select id="selectUsers" name="users" onChange='Choice();'>
<option> </option>
<%for(Cust c:newlist){ %>
<option value="<%=c.getCustId()%>"> <%=c.getName() %></option>
<%}%>
</select>
</td></tr>
<tr>
<td> id :</td>
<td>
<input type="text" id="ids" name="id" >
</td></tr>
</table>
</form>
<script type="text/javascript">
function Choice() {
//x = document.getElementById("users");
y = document.getElementById("selectUsers");
x=y.selectedIndex;
Cust c1= newlist.get(y.selectedIndex);
document.getElementById("ids").value =c.getCustId();
}
</script>
<%} %>
</body>
There are a few problems with your code.
First of all, scriptlets are deprecated and should be avoided. Use JSTL instead.
Secondly, your JavaScript code has no visibility of any of the variables used in your Java code. The Java is executed on the server, then some text (the HTML response) is sent to the browser. If it contains JavaScript, the browser runs the JavaScript.
I've rewritten what you're trying to achieve using JSTL instead of scriptlets for flow control and changing the JavaScript to get what you seem to be attempting:
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<form action="Servletname" method="post" name="searchdatabase">
<c:if test="${not empty CusList}">
<table>
<tr>
<td> name :</td>
<td>
<select id="selectUsers" name="users" onChange='Choice();'>
<option> </option>
<c:forEach items="${CusList}" var="c">
<option value="${c.custId}"> <c:out value="${c.name}" /></option>
</c:forEach>
</select>
</td></tr>
<tr>
<td> id :</td>
<td>
<input type="text" id="ids" name="id" value="${CusList[0].custId}" >
</td></tr>
</table>
<!-- Note that I've moved the closing form tag and put it outside of this c:if block
because putting it here means it will only be output if your List is not empty -->
<script type="text/javascript">
function Choice() {
var y = document.getElementById("selectUsers");
var x = y.selectedIndex;
document.getElementById("ids").value = y.children[x].value;
}
</script>
</c:if>
</form><!-- outside of c:if because the opening tag is also outside of c:if -->
</body>
Edit:
I've just reread the question and realised that I haven't addressed your additional need of populating other inputs with other attributes of the customer.
As I said above, JavaScript has no visibility of data which is on the server, including your List of Customer objects. There are a few options available to you, but these are the two I would recommend:
Use HTML5 Data Attributes
HTML5 introduced data-* attributes for elements which can be accessed via your scripts. For example, you could do something like this:
<c:forEach items="${CusList}" var="c">
<option
value="${c.custId}"
data-surname="<c:out value="${c.surname}" />"
data-tel="<c:out value="${c.tel}" />"><!-- etc -->
<c:out value="${c.name}" />
</option>
</c:forEach>
Then in the JavaScript:
function Choice() {
var y = document.getElementById("selectUsers");
var x = y.selectedIndex;
var opt = y.children[x];
document.getElementById("ids").value = opt.value;
document.getElementById("surname").value = opt.dataset.surname;
document.getElementById("tel").value = opt.dataset.tel;
// etc
}
The downside of this approach is that if you have a large list with a high number of attributes you want to make available, that's a lot of text in the response.
Use AJAX
You could make an AJAX call in response to the select change and have the server return the customer data encoded in JSON format. The JavaScript would then decode the JSON and populate the elements with the correct values.
You'd need to research how to do this (there are plenty of tutorials available) but the steps in response to your select changing would be:
Disable the select box to prevent another change before you get the AJAX response from the server
Show some sort of throbber to indicate to the user that the data is being loaded
Make an AJAX request indicating the ID of the selected customer
The server responds with a JSON-encoded version of the corresponding customer object.
Update the inputs using the JSON data.
Hide the throbber and re-enable the select element.
The downside of this approach is that you'll need to learn how to properly use AJAX, including adding code to deal with errors (e.g., if the user loses network connectivity and you get no response from server to your AJAX request, you need to show an error message and have some sort of "retry" mechanism).
I'm trying to get a variable in JS code to be displayed within a DIV within a table. I've cut the code down for simplicity just trying to get this working properly.
Firebug is reporting:
document.getElementById("valuelabel") is null
Here is the code:
<table>
<tbody>
<tr>
<td>
Value:
</td>
<td>
<div id="valuelabel"></div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
var mktValue = "12000";
document.getElementById("valuelabel").value = mktValue;
</script>
The mktValue will be a dynamically assigned numeric value; a textbox entry from another form. I just put "12000" in for testing purposes.
Within Firebug, it's shows the following for the dynamically assigned value.
var mktValue = '120700';
Thanks..
Divs don't have a "value", they do however have "innerHTML"
document.getElementById("valuelabel").innerHTML = mktValue;
div elements don't have a value (only form fields do). You can set the div's content via textContent (just text) or via innerHTML (HTML):
document.getElementById("target1").textContent = "This is normal text, <and> aren't special here.";
document.getElementById("target2").innerHTML = "This is HTML text, so <strong>tags</strong> are rendered as elements.";
<div id="target1"></div>
<div id="target2"></div>
you can use jquery to insert value into the specific id by using
$("#valuelabel").html(mktValue)
I have a Spring MVC application, use JSP+JQuery for view, and what I need is to, based on combo box selection (which gets me an index of element in list) to populate text field.
listProduct - list of products that is in the model
<form:form method="POST" commandName="productForm" name="insertRacun">
<table>
<tr>
<td class="ui-widget">Product:</td>
<td><form:select path="productListId" id="productCombobox">
<form:options items="${listProduct}"itemLabel="name" itemValue="productId"/>
</form:select>
</td>
<td class="ui-widget">Product price:</td>
<td><form:input path="priceList"
class="ui-widget ui-widget-content" id="priceInput" />
</td>
<script type="text/javascript">
var comboIndex = $("#productCombobox").val();
$("#priceInput").val(${listProduct[comboIndex].price})
});
</script>
My question is: When i put number in listProduct[] i.e. listProduct[0] it works just fine and price field gets populated, but when i want put "comboIndex" in brackets, it does nothing.
If there is another solution (not using JQuery), please post it
You are mixing client and server side code. You cannot pass a JS variable to your server code, as your server code is parsed before the page has been served up to the client.
You will need to pass the price corresponding to a particular product ID to the client by other means.
The relevant code (probably in a change event handler) should reference productCombobox selectedIndex instead:
var comboIndex = $("#productCombobox").attr("selectedIndex"); //
$("#priceInput").val(${listProduct[comboIndex].price});