Dynamic image preview on JSP - java

I have a textfield inside my rich:dataTable in one column:
<h:inputText id="logourl" value="#{item.logoUrl}" />
And I have this tag in another column:
<h:graphicImage id="logoimage" value="#{item.logoUrl}" url="#{item.logoUrl}" />
One element puts the value into bean "item" and another reads it but it happens only on page rerender. What I want is when I change a value in the image must refresh automatically.
I heard it can be done with a4j:mediaOutput butt all I found is how to create images manually.

I think you would need to submit the form to have it change automatically, personally I would use JavaScript to do this.
<script type="text/javascript">
function swapImage(divId) {
document.getElementById("img").src=divId;
}
</script>

Related

Liferay + JSP + AlloyUI: Button as link and submit

I use Liferay 6.2 on JBoss 7.1.1.
Also I am using a JSP as view with AlloyUI.
I want a button as a link and as a submitter of a value to a method in the MVCPortlet class.
The link is inside a java array.
The attribute that is passed to the java method is inside a input field.
It works if I use just one of this two.
I tried to combine them but it doesn't work.
I tried this:
<a href="<%=unread[i][k]%>" target="_blank" >
<aui:button type="submit" />
</a>
It calls the method but it doesnt opens a new tab in my browser. In my browser I can see that it is a link, if I click right on it -> new tab, it opens it correctly in a new tab. But not if I just click on the button.
Second way:
<aui:button type="submit" onclick="window.open('http://www.google.de', '_blank', ''); return false;"/>
It just opens google but doesn't calls the method. Also it is not possible to get an Java attribute inside of a Javascript, but I could get the value out of a hidden input field. But still there would be the problem that it doesn't call the method.
I decided to get on with the second solution.
The first mistake was return false; in my onclick param, so I deleted it.
Then the submit function works as usual.
The next problem was to access a Java variable inside the javascript onclick method, so I used EL and JSTL to get it work:
<c:set var="url" scope="session" value="<%=unread[i][k]%>"/>
<aui:button type="submit" onclick="window.open('${url}', '_blank', '');" />

Struts 2: Sending values of form fields from jsp to action class

I know it must be simple, but still I am not able to figure it out.
I have a link on a jsp page.
When this link is clicked I want another tab (of browser) to open up.
The view of this new page is defined by action class, which needs a form field value.
The problem I am facing is that I can not get the values of form fields to the action class without submitting the form. And submitting the form changes the view of the original jsp as well, which defeats the whole purpose of opening a new tab.
So I need a way to get the form field values to action class without resetting the view of original jsp page.
One way I came across was URL re-writing but that would be my last option.
Please suggest something!!
Thanks!!
Firstly I would like to point out that currently possible (to my knowledge anyway) to force a new tab to appear, it is dependent on the users' browser and the settings that they have see here for more infomation.
Now onto your question, since links cannot send form data (on their own) you have 2 options:
You can use a form "submit" button pointing to the URL you want to send the data to and to and add the target="_blank" to the form which will cause a new page to open up when the form is submitted.
You can add a javascript event to your link so that when it is pressed you append the value of the input to the URL and open a new window with that URL.
Personally I would choose the first option.
Here is a simple example of option one which doesn't remove the input value when you submit...
<html>
<body>
<form action="test1.html" method="post" target="_blank">
<input type="text" name="bob" />
<input type="submit" value="Hello"/>
</form>
</body>
</html>
You could do an ajax call, or dynamically build the link url with get parameters in it.

Use Servlets to display the data on same webpage?

I am using a html form like this:
<form action="question" method="get">
where question is a java servlet class which renders the data from the form and display on other page.
What I am trying to do is display this data just below the html form not on other screen.
(Somewhat like the page where we Ask Question in stackoverflow.com where the question you enter is rendered and displayed below.)
So I am trying to do same. Anyone has an idea how to do that?
The simplest way to do it, is to use javascript (client side).
Below is a very crude example on how to do this. This will give you an idea on how to proceed.
create a html page, with two separate text area boxes.
Let the first text area box be the source where you type in the text.
Assign it an id 'source_area'.
<textarea id='source_area'>
</textarea>
Let the second text area box be the destination.
Assign it an id 'destination_area'.
Set this area as "readonly" because you don't want users typing here directly.
<textarea id='destination_area' readonly>
</textarea>
Now when a user types into the first box, we need to capture the particular action.
For this example I will use the "onKeyUp" to capture events when a keyboard key is released.
Now when typing into the source text box, a key on your keyboard is released, it will invoke a javascript function "transferToNextArea()" is invoked.
We will create the javascript function "transferToNextArea()" in
Read more about javascripts here. http://w3schools.com/js/js_events.asp
Complete list of events here. http://w3schools.com/jsref/dom_obj_event.asp
The javascript function will extract text from 'source_area' text box.
It will then assign the same text into 'destination_area'.
function transferToNextArea()
{
//extracting text.
var varSrcText = document.getElementById("source_area").value;
//assigning text to destination.
document.getElementById("destination_area").value=varSrcText
}
Complete html (tested in Google Chrome)
<html>
<body >
Source Box
<textarea id='source_area' onKeyUp="transferToNextArea();">
</textarea>
<br>
Destination Box
<textarea id='destination_area' readonly>
</textarea>
</body>
<script type="text/javascript">
function transferToNextArea()
{
var varSrcText = document.getElementById("source_area").value;
document.getElementById("destination_area").value=varSrcText
}
</script>
</html>
This is just a very basic example. It is not very effecient, but it will give you an idea of how data can be moved around.
Before assigning the text, you could manipulate the text however you want it using javascript.
Stackoverflow formats the text as per the html tags after extracting it. This will require lot more code and more work.
Using a servlet for the above task is overkill.
You would use a servlet, only if you want to do something with the data on the server side.
Example
a) store it in a database before displaying it below.
Read about "ajax" calls to send and recieve data between the server and client.
Ajax will give you the means to send data to the servlet without having to refresh the whole page.
Create a JSP with a form
on submit post the data to some servlet
process request and produce resultant data and set it to request's attribute
forward the request to same jsp
check if the data is not null display under the form
Just let the servlet forward the request to the same JSP page and use JSTL <c:if> to conditionally display the results.
request.setAttribute("questions", questions);
request.getRequestDispatcher("/WEB-INF/questions.jsp").forward(request, response);
with
<c:if test="${not empty questions}">
<h2>There are ${fn:length(questions)} questions.</h2>
<c:forEach items="${questions}" var="question">
<div class="question">${question}</div>
</c:forEach>
</c:if>
See also:
Our servlets wiki page - Contains concrete Hello World examples.

JSF - How do I implement a JavaScript "Are you sure?" prompt for a <h:commandButton>

In my JSF 1.2 webapp I have a page with a <h:commandButton> that invokes an action method on a backing bean. This action will cause data to be removed/replaced in the database, so I want to avoid any situations where the user accidentally clicks on the command button.
I would like to implement a simple "Are you sure?" prompt with "Yes/No" or "OK/Cancel" options using JavaScript. I'm not great with JavaScript and I have never mixed JavaScript with JSF before. Can anyone provide a code snippet to show me how to implement this?
Here is the piece of my JSP page where I declare the command button:
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
image="/images/checkmark.gif">
</h:commandButton>
SOLUTION:
The solution provided by BalusC worked just fine. I wanted to also mention that it is easy to use text from a resource bundle as the prompt text. On my page, I load the resource bundle with an element like this:
<f:loadBundle basename="com.jimtough.resource.LocalizationResources" var="bundle" />
The <f:loadBundle> must be inside your <f:view>. Then I add the code provided by BalusC to my command button element but substitute a string from my resource bundle for the 'Are you sure?' text, like this:
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
image="/images/checkmark.gif"
onclick="return confirm('#{bundle.confirmationTextAcceptDraft}')">
</h:commandButton>
The line in my English resource file (just a plain text file with key/value pairs) looks like this:
# text displayed in user prompt when calling confirm()
confirmationTextAcceptDraft=This will overwrite the current report and cannot be undone. Are you sure?
Use the JavaScript confirm() function. It returns a boolean value. If it returns false, then the button's default action will be blocked, else it will be continued.
<h:commandButton onclick="return confirm('Are you sure?')" />
Since it already returns boolean, there's absolutely no need to wrap it around in an if a suggested by other answers.
You could add the javascript to the onclick of the button.
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
onclick="return confirm('Are you sure?')"
image="/images/checkmark.gif">
</h:commandButton>
This should work. Ideally it should be in a java script file.
<h:commandButton
id="commandButtonAcceptDraft"
title="#{bundle.tooltipAcceptDraft}"
action="#{controller.actionReplaceCurrentReportWithDraft}"
image="/images/checkmark.gif"
onclick="if (!confirm('Are you sure?')) return false">
</h:commandButton>
I'm not sure what event you'll have to listen for (onclick i would assume) as I've never used JSF. Generically speaking, this should work.
var element = document.getElementById('commandButtonAcceptDraft');
element.onclick = function(e){
return confirm('Are you sure etc...');
};

How to use RichFaces a4j:commandButton not using submit

I have an a4j:commandButton which looks like this
<a4j:commandButton id="stopBtn" type="button" reRender="lastOp"
action="#{MyBacking.stop}" value="Stop" />
</a4j:commandButton>
When the app is deployed, and the button clicked, the stop() method is not being called. All the a4j:commandButton examples refer to forms, but this button is not in a form - it's a button the user is going to use to cause the server to run some back-end logic. At the moment, the method is
public void stopNode() {
logger.info("STOPPING");
setLastOp("Stopped.");
}
Other methods which don't use this type of button are updating the lastOp field, but I'm not seeing anything on the console with this one. Am I right to cast this as a button? Should I put this in a h:form tag?
The firebug console says:
this._form is null
which I don't understand.
Any help well appreciated.
UICommand components ought to be placed inside an UIForm component. So, your guess
Should I put this in a h:form tag?
is entirely correct :) This because they fire a POST request and the only (normal) way for that is using a HTML <form> element whose method attribute is set to "post". Firebug also says that a parent form element is been expected, but it resolved to null and thus no actions can be taken place.
Only "plain vanilla" links like h:outputLink and consorts doesn't need a form, because they just fires a GET request.
Yes, wrap it in a form. I'm sure BalusC will post a detailed explanation while I'm typing my answer. (yup, there it is)
I have to ask why you didn't just try a form first, before posting here.
Look at your code:
<a4j:commandButton id="stopBtn" type="button" reRender="lastOp" action="#{MyBacking.stop}" value="Stop" />
You finished <a4j:commandButton with />, why need that orphan </a4j:commandButton> ?
If for some reason you don't want to place the button inside a form, you can do something like this:
<a4j:commandButton onclick="fireAjax()"/>
<h:form>
<a4j:jsFunction name="fireAjax" action=".."/>
</h:form>

Categories

Resources