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.
Related
I have an old JSP page in my project. I need to include this page into my new page, where my new UI side is complete EmberJS.
Things that I have tried
I got the rendered HTML from JSP using an ajax call and try to render with {{{ var }}} handlebar, But there are lots of scripts inside the page. They are not getting parsed or executed.
How can I load the page into an iframe? The page is POST type.
You can create a hidden form that point the target to the iframe, then trigger the click() event on the hidden submit button when document loaded.
For Example
<form action="YOUR_JSP_URL" method="post" target="myIframe">
<input id="postToIframeBtn" style="display: none" type="submit" value=" " />
</form>
<iframe name="myIframe" src=""></iframe>
<script>
document.getElementById("postToIframeBtn").click();
</script>
Short answer, try to insert them into DOM inside components didInsertElement hook using jQuery.
Do not use {{{}}} it only work with HTML inserting.
I'm trying to create a button with an onclick function that activates the imggrabscreen php function. Problem is, I've done several codes and so far the only function that I was able to use was a submit input type in which this refreshes the page. I tried using button as an input type but unfortunately, it does not save any screenshots upon clicking the button. Here's the code that I'm using so far.
if(isset($_POST['btnscreen']))
{
$im = imagegrabscreen();
imagepng($im, "screenshot.png");
}
ob_end_flush();
?>
<form method="post" action="" enctype="multipart/form-data">
<br>
<input type="submit" value="Click to Screenshot" id="btnscreen" name="btnscreen"></center>
<br><br>
</form>
php is parsed and executed server side (pre-processing) so you cannot call any php functions after the page has been sent to the browser. The only way to do this is to make a new request to the server (ajax).
I can't quite grasp what your function does (php cannot make a screenshot of what your browser is displaying as it has no information of how it has been rendered - please note different browsers may display the page differently).
I would try reading up on html5 canvas element which can achieve that (e.g. https://html2canvas.hertzen.com/).
Hope this helps
I have the following code to open a google page and type "Hello" in the textbox.
The code opens the page but the textbox is empty.
Does anyone have an idea please ?
Thanks.
<html>
<head>
<script type="text/javascript">
function getValue()
{
var myWindow = window.open("http://www.google.com","_self")
myWindow.title = "Test"
var TextBox = myWindow.document.getElementsByName("lst-ib");
TextBox[0].value="Hello"
}
</script>
</head>
<body>
<form>
<input name="to" type="hidden" value="hoolah" />
<input type="button" onclick="getValue()" value="Get Value!" />
<form/>
</body>
</html>
You cannot:
Access the DOM of a page on a different origin
Access the DOM of a page from JavaScript that was running in the same window before you loaded the new page
What you want is impossible.
(If it was possible, it would be a security problem as your JavaScript would have access to personal data belonging to your visitors and stored on other websites.)
If I understand the question - you want to be able to pass a value to a Google search from your page. Rather than accessing the DOM of an external page - you are just trying to enter a value into the search term box on the google page.
All you have to do is append a query string to the Google url (such as "http://www.google.com?query=searchTerm" and it will pass the value to the search box on the google page.
I have slightly modified your code to show this - not how i would normally do it but I wanted to keep your code in place as much as possible so you can see whats going on.
I added a search term input and the onclick event opens the window and submits the query to Google. It could have been done as a form submit as well. Note that I put the JS at the bottom of the page - increases speed of page rendering - not important for this, but good practise movingforward. I also declared the variables together instead of using 2 'var's as well.
your code (slightly modified).
<html>
<head>
</head>
<body>
<form>
<input id="searchTerm" type="text" value="" placeholder="Search term"/>
<button type="button" onclick="getValue()">Search</button>
</form>
<script>
function getValue()
{
var term,myWindow;
term=document.getElementById('searchTerm').value;
myWindow = window.open("http://www.google.com?query="+term,"_self")
}
</script>
</body>
</html>
I have this code for a .jsp page:
<f:view>
<div class="portletBody">
<h:form id="editSectionForm" onsubmit="return numCheck(document.forms[0].elements['editSectionForm:sectionTable:0:maxEnrollmentInput'].id)">
<sakai:flowState bean="#{editSectionBean}"/>
<t:aliasBean alias="#{viewName}" value="editSection">
<%# include file="/inc/navMenu.jspf"%>
</t:aliasBean>
<h3><h:outputText value="#{msgs.edit_section_page_header}"/></h3>
<%# include file="/inc/globalMessages.jspf"%>
<t:aliasBean alias="#{bean}" value="#{editSectionBean}">
<%# include file="/inc/sectionEditor.jspf"%>
</t:aliasBean>
<t:div styleClass="act">
<h:commandButton
action="#{editSectionBean.update}"
value="#{msgs.update}"
styleClass="active"
onclick="reEnableLimits();" />
<h:commandButton action="overview" value="#{msgs.cancel}" immediate="true" />
</t:div>
</h:form>
</div>
</f:view>
and I have some javascript code that runs in the /inc/sectionEditor.jspf file. In some of that code in the sectionEdtior file, I need to somehow grab the id of this form. editSectionForm. I can't hard code it because the /inc/sectionEditor.jspf code runs in more than one page.
So pretty much, I need the javascript code in /inc/sectionEditor.jspf to be able to grab the id of the form it is currently in.
i.e:
If I'm in the editSectionForm page, it'll tell me that im in that page, if I'm in addSection Form page, it'll tell me that I'm on that page.
I'm not sure I fully understand the question. Are you trying to get the current page you are in, as in the url?
http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
Or do you have multiple forms on the same page?
I actually figured out another way for my situation. For anyone that's ever used Sakai, they know the beast that it is.
I see you already use document.forms[0] in your jsp page, so, making assumption there is one form only, you may use the same construction inside a script section of your 'subpages' also, i.e. using document.forms[0].id will give you the id of the form.
<!DOCTYPE html>
<html>
<body>
<form id="editSectionForm">
<div id="sectionEditor">
<script type="text/javascript">
var formId = document.forms[0].id;
console.log(formId);
</script>
</div>
</form>
</body>
</html>
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.