I've created a jsp page. In that when i select 1 check-box or both check-box or none, the corresponding text-boxes and list-box must be displayed in the same page.
For that i tried of calling a javascipt function when i click the checkbox. The javascript function contain code to display the textboxes. But it didn't work.
Since I'm doing this project in struts, I don't know how to get check-box value. And calling of JavaScript function works. But didn't enter into jsp code in JavaScript function.
My code is
<tr>
<td>SEJ:</td>
<td>SEJ 1:<html:checkbox property="sej1" value="on" onclick="checkbox_trial()"></html:checkbox></td>
<td>SEJ 2:<html:checkbox property="sej2" value="on" onclick="checkbox_trial()"></html:checkbox></td>
</tr>
<script type="text/javascript">
function checkbox_trial()
{
<% if(request.getParameter("sej1")=="on"){
%>
<tr><td>SEJ1 Age<html:text property="sej1_age"></html:text></td></tr>
<tr><td>SEJ1 DOI<html:text property="sej1_doi"></html:text></td></tr>
<%}
else if(request.getParameter("sej2")=="on"){%>
<tr><td>SEJ2 Age<html:text property="sej2_age"></html:text></td></tr>
<tr><td>SEJ2 DOI<html:text property="sej2_doi"></html:text></td></tr>
<%}
else if((request.getParameter("sej1")=="on")&&(request.getParameter("sej2")=="on")){%>
<tr><td>SEJ1 Age<html:text property="sej1_age"></html:text></td></tr>
<tr><td>SEJ1 DOI<html:text property="sej1_doi"></html:text></td></tr>
<tr><td>SEJ2 Age<html:text property="sej2_age"></html:text></td></tr>
<tr><td>SEJ2 DOI<html:text property="sej2_doi"></html:text></td></tr>
<%}
else{%>
NOTHING <% } %>
}
This is how it works: Java/JSP runs at webserver, produces HTML/CSS/JS, webserver sends it to webbrowser, webbrowser runs HTML/CSS/JS. Not Java/JSP. Rightclick the page in webbrowser and choose View Source. If Java/JSP has done its job right, you shouldn't see any line of it in there.
If you want to invoke Java/JSP code using JavaScript, you've got to invoke another HTTP request to the webserver so that it can execute the Java/JSP code based on the specific request. You can do that by either submitting the form or firing an asynchronous (ajaxical) request.
Given the skills shown as far and the fact that you're using Struts, I think ajax is going to be a bit too complex. I'd suggest to just submit the form on click of the checkbox
<input type="checkbox" name="show" value="true" onclick="submit()" />
and then let JSP conditionally display the input fields (just a JSTL example since I don't do Struts)
<c:if test="${param.show == 'true'}">
<input type="text" />
<select />
</c:if>
Update: you've by the way another major problem in the code. You can't compare string values by == in Java code (you can do so in EL only). In Java code you need to use equals() method. Otherwise they will be compared by reference instead of by value. I'd suggest to learn basic Java as well.
Related
Hello I'm developing a Java web application on Eclipse using servlets in tomcat 8.
How can I access in one of the .jsp pages java instances onclick?
The onclick event will be triggered by the user and I need to change the value of a variable in my Java code.
The onclick will have a unique id which I will use to change the info on the variable.
There are several ways to do that. Let's go with the basic one.
Your jsp page should have an HTML form tag that will enclose the element that will fire the click event.
<html>
<body>
<form action="https://myip/app/myjsp.jsp" method="post">
<input type="hidden" name="clickValue" id="clickValue"/>
<input type="button" value="click me" onClick="fireClick('<%= uniqueVal %>')" id="btn1"/>
<script type="text/javascript">
function fireClick(uniqueID){
document.getElementById('clickValue').value=uniqueID;
document.forms[0].submit();
}
</script>
</form>
<% String passedValue = request.getParameter("clickValue")%>
</body>
</html>
Of course, this is the most simple way to do so, many things to be considered with modern web development like using AJAX and even to use a java web framework or JSF.
fiddling : https://jsfiddle.net/w3rhceg2/
Make an ajax request to your servlet.
I am running into an issue when converting an ASPX page to a controller (ASCX). My JavaScript isn't finding a textbox in a hidden div and its not firing an onclick event either. However it works perfectly fine in the ASPX page.
My JavaScript is..
function FireEditClickButton() {
document.getElementById("btnFireEdit").click();
}
Its supposed to fire this button that is in a hidden div along with the next piece)
<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click" />
Then with this JavaScript
function GetSelection() {
var c = document.getElementById("tbRA");
c.innerText = checkListBox.GetSelectedValues();
UpdateText();
}
gets called everytime the checklistbox has values.
Both errors are saying that they are null but they are right here in a hidden div
<div style="visibility: hidden">
<asp:TextBox ID="tbRA" runat="server"></asp:TextBox>
<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click" />
</div>
So why would this be happening since it works completely fine in the ASPX page? would it have to do with the WebUserControl not using a form tag?
Thanks
Your javascript cannot find the button because in the rendered HTML it no longer has id="btnFireEdit" but instead an id based on the name of the usercontrol (e.g. id="myctrlname_btnFireEdit").
You have two choices... either update the javascript to include the name of the usercontrol...
document.getElementById("myctrlname_btnFireEdit").click();
document.getElementById("<%=btnFireEdit.ClientID%>").click();
(Note, the 2nd of these two lines will only work if the javascript is part of the usercontrol itself. It will not work if the javascript is in an external .js file or the parent page)
Or use the ClientIDMode attribute of the <asp:Button> and set the value to Static. This will make the rendered HTML use id="btnFireEdit"...
<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click"
ClientIDMode="Static" />
When using nested controls (or pages nested in a master page), by default the ID on the client side will be different than on the server. ASP.NET does this by default to help ensure that all ID's on the client are unique. However, you can prevent this using one of two ways.
The first option is to change the ClientIDMode to static. You can do this at the control, page, web.config, or machine.config levels. The web.config technique is shown below. The ID on the client will then match the ID on the server.
<configuration>
<system.web>
<pages clientIDMode="static" />
</system.Web>
</configuration>
The second option is to use inline C# code to embed the ID into your JavaScript, but this only works if the JavaScript is embedded on an ASP.NET page or control and not in a separate script file. The C# expression will be evaluated and therefore the ID on the client will be embedded into the JavaScript.
document.getElementById('<%= btnFireEdit.ClientId %>');
There is a third option, and that is to figure out what the ID will be on the client and then manually put that in the JavaScript, like this:
document.getElementById("myctrlname_btnFireEdit").click();
However, that is a bad idea. If you ever rename either myctrlname or btnFireEdit then your client side code will fail at runtime. And it's always better to fail at compile time than runtime.
I have a method Processsots which I am trying to invoke from submit button, But when I diasble by OnClick element. it is not calling the method. Any one help me how to call the method after disabling the submit button as well
<table>
<tr>
<td width=150> </td>
<td width="1999">
<h1 ALIGN='Left'>Please click on the Button to process Sots feed file</h1>
<form name="sotstestorderfoler" >
<br>
<input type="submit" name="username" value="Process Feed File" onclick="this.disabled='disabled';>
</form>
</td>
</tr>
</table>
<%
if ( request.getParameter("username") != null ) {
Processsots();
}
%>
(Code tried with onsubmit)
<form name="sotstestorderfoler" method="post" onsubmit="foo()" >
<script type="text/javascript">
function foo() {
sotstestorderfoler.username.disabled=true; <%Processsots();%> return true;
}
</script>
</form>
I would use the onsubmit of the form to disable your button, like these answers illustrate:
https://stackoverflow.com/a/12944611/2047962
https://stackoverflow.com/a/19696817/2047962
Realize that JSP code is server-side and JavaScript is client-side, so they can't directly interact with each other.
You are mixing JSP code and JavaScript. The JSP code is only executed on the server. When your browser requests your webpage, JSP code is executed in order to build your webpage. That means that it starts writing out things like <script type="text/javascript"> and function foo() into a stream to send back to the browser. When it reaches <%Processsots();%>, it doesn't simply write out that text, it calls your method Processsots(). It will then write out the return value of Processots(). This means that your method is already executed before users even see your page or try to push the submit button.
This is a mistake that many new JSP programmers make; your JSP code cannot be executed while your JavaScript is executing. The only way for JavaScript code to interact with JSP code is via HTTP requests, usually in the form of an AJAX call or a form submit.
Instead of trying to call a JSP method in the JavaScript, you must have the form submit to a Servlet that can then call Processsots() and return the result as an HTTP response.
i have a String var in class
String message;
private int checkConstraints()
int a = 0;
if (docProcessId==0) {
a++;
message = "<script language=\"javascript\"> alert('Please Select Doc Process Name'); </script>";
}else if (refTypeName.equals("")) {
a++;
message = "<script> alert('Enter Reference Type Name!');</script>";
}
return a;
}
actually i am doing like this but when this method is called not equals to 0 then message equals to whole the string print on page not giving alert any solution please
JSF by default HTML-escapes all model values as part of XSS attack prevention. Your concrete problem suggests that you had no idea of that. You can "solve" it by using <h:outputText> with escape attribute set to false.
<h:outputText value="#{bean.message}" escape="false" />
However, your concrete problem is bigger. You're in JSF/MVC perspective basically making two major design mistakes here:
Writing HTML code in model instead of in the view.
Performing validation in an action method instead of in a validator.
You should be writing HTML code in the view, not in the model. You should be performing validation using a normal JSF validator. JSF has a lot of builtin validators.
Besides, not really a design mistake, but more an user experience mistake, there's a third mistake: using JavaScript alerts to show validation messages. This is simply too 1990 and Web 1.0. We're currently in 2013 and have learnt a lot, a lot of the user experience failures made back then. Using JavaScript alerts to show validation messages is one of them.
Here's the right approach using JSF-provided validation facilities:
<h:form>
<h:selectOneMenu value="#{bean.docProcessId}" required="true"
requiredMessage="Please Select Doc Process Name">
<f:selectItems ... />
</h:selectOneMenu>
<h:inputText value="#{bean.refTypeName}" required="true"
requiredMessage="Enter Reference Type Name" />
<h:commandButton value="submit" />
<h:messages />
</h:form>
That's it. The required="true" tells JSF that those inputs are required. The requiredMessage attribute allows you to specify custom messages for required validation. The messages will be displayed in place as declared by <h:messages>. You can customize the layout by layout attribute and by CSS means like infoClass, errorClass, etc. You can even manually loop over it and manually create annoying alerts for each message instead of using <h:messages>:
<ui:repeat value="#{facesContext.messageList}" var="message">
<script>alert("#{message.summary}");</script>
</ui:repeat>
I'm working with JSF 2.0 and here's my form:
<h:form id="fff" onsubmit="reloadMap();">
<h:selectOneMenu value="#{rentCarPoolBean.state}">
<f:selectItems value="#{rentCarPoolBean.stateList}" id="stateList" />
<f:ajax event="change" render="cities stateSelected" onevent="showAlert"/>
</h:selectOneMenu>
<h:selectOneMenu id="cities" value="#{rentCarPoolBean.city}">
<f:selectItems value="#{rentCarPoolBean.cityList}"/>
</h:selectOneMenu>
<h:outputText value="#{rentCarPoolBean.state}" id="stateSelected" />
</h:form>
And the javascript function:
<script type="text/javascript">
function showAlert(data){
if (data.status == "complete")
alert(document.getElementById("stateSelected"));
}
</script>
What the above code does is on selecting a state from the first dropdown, it makes the ajax call and renders the 'cities' dropdown and the 'stateSelected' outputText.
Also, it calls the showAlert() javascript function.
What I want to do is call the javascript function after all the data is returned and both the dropdown and the outputText have been rendered.
But currently the javascript function is called before the elements are rendered and the alert displays null.
How do we make the javascript function execute in the end?
You need to hook on a status of success instead. This will run after the HTML DOM tree has been updated. The status of complete runs directly after the ajax response has been returned. This is admittedly a misleading status name, but you should try to interpret it in context of "HTTP request" like as the begin status.
Another problem is that the document.getElementById() selects items by the HTML element ID, not by JSF component ID. You need to give it exactly the ID as JSF has generated to the HTML. You can figure the right HTML element ID by viewing the page source in webbrowser.
All with all, your new function should look like this:
function showAlert(data){
if (data.status == "success")
alert(document.getElementById("fff:stateSelected"));
}
Here:
alert(document.getElementById("stateSelected"));
you're specifying only JSF component id, but you need to give a full clientId. Here's a link explaining this.