How can I use s:property in JavaScript function - java

In my struts2 Application I have a JavaScript function to do the cancel. this method is in the header and only do a window.location to my return URL. Since we did a migration from version 2.0.11 of struts 2.3.8 release, it no longer works. When I look at the generated HTML code we see that fails to interpret the tag s:property because the URL is empty. I do not see what does not work.
in my IDE :
function cancel() {
if (!isModified || (isModified && askConfirmCancel())) {
window.location.replace('<s:property value="#urlBack"/>');
}
}
result with Firebug :
function cancel() {
if (!isModified || (isModified && askConfirmCancel())) {
window.location.replace('');
}
}
in JSP file :
<tr>
<td height="6%"align="center">
<s:submit cssClass="button" key="common.initDelegate.label" align="center" theme="simple"/>
<s:url id="urlBack" action="myAction" includeParams="none" escapeAmp="false">
<s:param name="period.periodId" value="%{period.periodId}"></s:param>
</s:url>
<input type="button" onclick="javascript:cancel()" value="<s:text name="common.button.cancel"/>"/>
</td>
</tr>

<s:property value="#urlBack"/> -- do we need "#" before urlBack. All we need is urlBack property in action class with public String getUrlBack() method. And the variable should get initialized before Action returns the success/result.

First you need to create a variable urlBack then use it for render URL. For example
<s:url var="urlBack" action="myAction" escapeAmp="false">
<s:param name="period.periodId" value="%{period.periodId}"></s:param>
</s:url>
<input type="button" onclick="cancel();" value="<s:text name="common.button.cancel"/>"/>
<script type="text/javascript">
function cancel() {
if (!isModified || (isModified && askConfirmCancel())) {
window.location.replace('<s:property value="#urlBack"/>');
}
}
</script>
also
includeParams by default is none since Struts 2.1.3.
id attribute is replaced by var
javascript: is a protocol for URLs not for JS functions, see this.

Related

Print only html table using javascript

I have the following basic html table with a Java function to print only the table content However the Print button does nothing when clicked,I figure probably the java coding is the issue, however it is not working could I get a third pair of eyes to assist please
<html>
<body>
<table border="1" cellpadding="3" id="printTable">
<tbody><tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody></table>
<br />
<br />
<button>Print me</button>
<script>
function printData()
{
var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click',function(){
printData();
})
</script>
</body>
</html>
When working with javascript, it is often useful to look at your browser's console. After opening this page, mine has the error:
ReferenceError: $ is not defined
$ is a global variable inserted by jQuery. Try adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
to the code. This will include the jQuery library.
The call to the javascript function is not correct. When you're using the '$' symbol it means that you're using JQuery. You have 2 options:
1 - Include the jquery library to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
2 - Call the javascript function directly on the button on the 'onclick' event. This is the best option in your case:
<button onclick="printData()">Print me</button>
Change this var divToPrint=document.getElementById("printTable");
to this var divToPrint=document.getElementById("<%=printTable.ClientID>");
and add jquery library <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Illegal text inside "c:choose" tag: "'

$("#medicine").append('<tr class="hide1 newRow" id="row'+medCurrentIndex+'">'
+'<td>'+medtype[medCurrentIndex]+'</td>'
+'<td>'+medicineName[medCurrentIndex]+'</td>'
+'<td>'+frequency[medCurrentIndex]+'</td>'
+'<td>'+dose[medCurrentIndex]+'</td>'
+'<td>'+quantity[medCurrentIndex]+'</td>'
+'<td>'+numberofDays[medCurrentIndex]+'</td>'
+'<c:choose>'
+'<c:when test="${role eq 'doctor' }">'
+'<td><button class="btn" type="button" name="edit" value="Edit" onclick="editMedRow('+medCurrentIndex+');">Edit</button></td>'
+'<td><button class="btn" type="button" name="delete" value="Delete" onclick="deleteMedRow('+medCurrentIndex+');">Delete</button></td>'
+'</c:when>'
+'<c:otherwise>'
+'<td><input type="text" id="cost" /></td>'
+'</c:otherwise>'
+'</c:choose>'
+'</tr>');
is this code legal to write in javaScript of JSP?
because its giving me following error:
org.apache.jasper.JasperException: Validation error messages from TagLibraryValidator for c in /WEB-INF/views/prescriptionTemporary.jsp79: Illegal text inside "c:choose" tag: "'
Any Java code inside JSP will be evaluated at render time. This means, the server will read the JSP code and will start replacing any scriptlet or custom tag (like JSTL) for the necessary Java code. This can be easily explained by this example:
<script type="text/javascript">
var x = '${x}';
</script>
Or in JSTL form:
<script type="text/javascript">
var x = '<c:out value="${x}" />';
</script>
Assuming x is a request attribute with a value of "Hello World", this will generate this output in HTML:
<script type="text/javascript">
var x = 'Hello World';
</script>
In your case, it will try to convert this part of the code to its JSTL form:
<c:choose>'
<!-- ^ this character is invalid. There must be a <c:when> right after <c:choose>
v this character is also invalid. There must be a <c:when> right after <c:choose> -->
+'<c:when test="${role eq 'doctor' }">'
In short, you should not try to append any kind of Java code (scriptlet, expression language, custom tags like JSTL, etc) from JavaScript.
Writing jstl tags in javascript is not going to work. JQuery's .append(...) method is going to fire on the client side long after jstl tags are parsed.
If your goal is to choose, via jstl, what to append, a significant rewrite is needed.
edit:
Try this:
$("#medicine").append('<tr class="hide1 newRow" id="row'+medCurrentIndex+'">'
+'<td>'+medtype[medCurrentIndex]+'</td>'
+'<td>'+medicineName[medCurrentIndex]+'</td>'
+'<td>'+frequency[medCurrentIndex]+'</td>'
+'<td>'+dose[medCurrentIndex]+'</td>'
+'<td>'+quantity[medCurrentIndex]+'</td>'
+'<td>'+numberofDays[medCurrentIndex]+'</td>'
<c:choose>
<c:when test="${role eq 'doctor' }">
+'<td><button class="btn" type="button" name="edit" value="Edit" onclick="editMedRow('+medCurrentIndex+');">Edit</button></td>'
+'<td><button class="btn" type="button" name="delete" value="Delete" onclick="deleteMedRow('+medCurrentIndex+');">Delete</button></td>'
</c:when>
<c:otherwise>
+'<td><input type="text" id="cost" /></td>'
</c:otherwise>
</c:choose>
+'</tr>');
I want to emphasize that although the above snippet might work, I wouldn't recommend it. A better solution would be to dump ${role} into a global variable or a hidden input and do the decision making from the JS side. Or set the whole append string in jstl. Mixing the two makes this significantly harder to read.

JSTL <c:if> tag - Checking whether Java Bean method returns True

I currently have a .jsp file as follows (partly shown):
<jsp:useBean id="cart" class="edu.unsw.comp9321.assignment1.CartBean"
scope="session" />
<tr>
<td><input type="submit" name="cartBtn" value="Go To Checkout"/></td>
<td><input type="submit" name="cartBtn" value="Remove From Cart"/></td>
<c:if test="${cart.isCartListEmpty eq true}">
<td><input type="submit" name="cartBtn" value="Back To Search"/></td>
</c:if>
</tr>
The bean cart has the code:
public boolean isCartListEmpty(){
if (this.cart.isEmpty())
return true;
return false;
}
The problem is I am getting an error with the following line:
<c:if test="${cart.isCartListEmpty eq true}">
Could someone please tell me the correct way to evaluate whether the bean method is returning true or false?
Thank you for your help.
The EL ${bean.attribute} will try to call the method getAttribute() or isAttribute() of the bean.
So in your case, ${cart.isCartListEmpty} will look for a method getIsCartListEmpty() or isIsCartListEmpty() in your cart.
What you need is thus ${cart.cartListEmpty} to call the appripriate isCartListEmpty() method.
Side notes:
No need to add the eq true part since isCartListEmpty() already returns a boolean.
You can (should?) simplify your isCartListEmpty() method body to return this.cart.isEmpty().

Struts2: values from action are not seen in jsp, but they are seen in the javascript code from jsp

In action I have a variable which has getter on it.
private String myActionVariable = "predefined....";
public String getMyActionVariable () {
return myActionVariable;
}
In jsp, I try to use my variable in this way:
<input type="button" class="styledButton"
onclick="javascript: doAjax('myActionName',false);"
value="${myActionVariable}"
But it is not shown. However, if I output this variable from the javascript code included within the same jsp file:
alert (${myActionVariable})
I will get the value of it....
Any idea please ? ...
You can use a Standard <input/> HTML Tag with an <s:property /> Struts2 Tag for the value, like this:
<input type="button" class="styledButton"
onclick="javascript:doAjax('myActionName',false);"
value="<s:property value="%{myActionVariable}"/>"/>
or a Struts2 Tag directly like this:
<s:submit type="button" cssClass="styledButton"
onclick="javascript: doAjax('myActionName',false);"
value="%{myActionVariable}" />
Note that with Struts2 Tag, class attribute becomes cssClass (and style becomes cssStyle), and that %{} is the right OGNL syntax, instead of ${} (that is JSTL syntax)
EDIT: when using Struts2, forget about JSTL, you won't need them anymore.
You should be using struts2 tag.
<input type="button" class="styledButton" onclick="javascript: doAjax('myActionName',false);" value="${myActionVariable}">
Instead of this, use
<s:submit type="button" cssClass="styledButton" onClick="javascript: doAjax('myActionName',false);" value= "myActionVariable" />

JavaScript in liferay portlets

Am using Liferay portal 6.1.1 CE.
In my liferay portlets jsp page - view.jsp, I have a form with 2 textfields and 2 radio buttons (user can select only one) and a submit button.
When I click on any of the radio buttons, control goes to a script function which is working properly.
Now I want to pass the values of 2 textfields to the script function. I tried a lot, but no use.
How can I achieve this?
Help me..Thanks in advance.
<script>
function dif()
{
}
</script>
<form name="<portlet:namespace/>fm" method="post" action="<%=updateBookURL.toString()%>">
<table>
<tr>
<th>Leave Application</th>
</tr>
<tr>
<td>Employee <font color=red>*</font></td>
<td>
<input type="text" name="<portlet:namespace/>name"/>
<input type="text" name="<portlet:namespace/>eid" />
</tr>
<td>
Date <font color=red>*</font>
<input type="text" id="<portlet:namespace/>fd" name="<portlet:namespace/>
</td>
<td>
<input type="radio" name="<portlet:namespace/>f" id="f" value="1st half" onClick="f()"/>
First Half&=
<input type="radio" name="<portlet:namespace/>f" id="f" value="2ndhalf" onClick="f()"/>
Second Half
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="save data" size="100px"/></td>
</tr>
</table>
</form>
Getting the value of the text in javascript function is nothing new in liferay it is plain old javascript, following are some links and examples which would help you (the code which I have written would go in your custom function you define within the <script> ... </script> tags):
Get input text value using:
var fdTextValue = document.getElementById("<portlet:namespace/>fd").value;
Get input text value using jQuery (the only problem with this is you have to include jQuery library in your portlet or theme, since starting from Liferay-6 you have Alloy UI included by default):
var fdTextValue = $("#<portlet:namespace/>fd").val();
/* or */
var fdTextValue = $("#<portlet:namespace/>fd").attr('value');
Get input text value using Alloy UI of Liferay:
AUI().use(function(A) {
var fdTextValue = A.one('#<portlet:namespace/>fd').get('value');
/* or */
var fdTextValue = A.one('#<portlet:namespace/>fd').val();
});
Some of the following links might also help you using Alloy UI:
Working with Elements and Events with Alloy UI.
Alloy UI API
It is very simple.
on click event of then in js define this function.
<script>
function callFun()
{
// Here you can use jquery easily
var name = $("#name").val();
alert(name);
}
</script>

Categories