We Keep Coding

Use common JSP with a custom Servlet and Struts 2

(Oups.. Sorry for my english :) )
In my web application, Struts2 is used as the main Servlet dispatcher and filter. But For some reasons, i have a custom filter and a custom servlet used for a specific url "/book".
But I have some commons jsp... i had some issues when the custom Servlet should display my request attributes in the JSP because of the struts tags (implemented before). So i changed these tag by the jstl taglibs and it works now.
But... In one JSP, the main (lol)... I have a search form.. This JSP is included in several JSPs and could be called by Struts and the custom Servlet..
With only Struts the tag was "< s:form>.." and when the form was submitted, all sended values was kept in the input... But now, because of the custom Servlet i use a simple html form which is calling the struts action "search.do".
As source code is below:
<form method="post" action="<c:out value="${contextPath}"/>/search.do" name="search" id="search">
<input type="text" id="search_searchWord" value="" maxlength="200" size="100" name="searchWord">
<div align="right">
<input type="submit" value="Ok" name="searchButton" id="search">
</div>
<select id="search_searchCrit" name="searchCrit">
<option value="0">Crit1</option>
<option value="1">Crit2</option>
<option value="2">Crit3</option>
</select>
</form>
My problem is the search word and the selected option are refreshed after the submit. I need to keep them !
Is there a way to use the struts taglibs with a Standard Servlet ?
Or Do you have another solution to keep the submitted information ?
Thanks all !

take each field value from the input field and write js function to fill each field in jsp source code of your page.
function selectedValue(){
var value =<%=request.getParameter("searchCrit")%>;
if(value !=null)
{
document.getElementById('search_searchCrit').innerHTML=value;
}
}

I found a solution with the help of #java_seeker.
In my Struts action, i got the request through this way :
HttpServletRequest request = ServletActionContext.getRequest();
request.setAttribute("searchWord", this.getSearchWord());
There is two different way to do this, see: http://www.mkyong.com/struts2/how-to-get-the-httpservletrequest-in-struts-2/
The attribute is setted in each method (in the action) that could refresh the page.
Then, i just recovered and set the attribute from the request as a variable with a jstl tag and display it as the value of my html input:
<c:set var="searchWord" value='<%=request.getAttribute("searchWord") %>' />
<input type="text" id="search_searchWor" value='<c:out value="${searchWord}" />' name="searchWord">
For the , i just used an <c:choose><c:when test=""></c:when><c:otherwise><c:otherwise></c:choose> to set the selected choice.
Now all value are always displayed. Maybe it's not the very good way to display share the same JSP between a standard servlet and a Struts action, but it works. I'm open to try a better solution if you have one! Thanks all!

Calling Struts2 Namespace from Normal HTML form

Exception :
Description: The requested resource /Strut2Examples/checkMethods/updateCRUD is not available. How to call the namespace based action from normal HTML for with Struts2. It works with Struts2 Forms. Please help me to understand.
HTML :
<s:form namespace="/checkMethods" action="executeCRUD" >
<s:submit label="execute" value="execute" />
</s:form>
<form name="normalForm" id="normalForm">
<input type="button" value="update" onclick="submitForm()"/>
</form>
Java Script :
<script type="text/javascript">
function submitForm()
{
var myForm = document.getElementById("normalForm");
myForm.action="checkMethods/updateCRUD";
myForm.submit();
}
</script>

If you want to use HTML form tag you should build the URL using the action name and namespace attributes of the url tag. For example
<form action="<s:url namespace="/checkMethods" action="deleteCRUD"/>" method="POST">
The same concern the JavaScript code where you could mix url tag. Like this
myForm.action='<s:url namespace="/checkMethods" action="deleteCRUD"/>';
Actually if you define the action attribute of the form you don't need to construct the URL in the event handler function. Just do submit() .
You should take url tag seriously, because for example you have constructed URL in the action attribute that lacks context path and slash and errors like that you did can't count.

How can I asynchronously show/hide div in JSP using Java

I want to programmatically show a div tag after some processing has completed while rendering a JSP. What's the best way to do this using Java? Using jQuery I would do this:
$('#mydiv').removeClass("hide_me");
...or...
$('#mydiv').show();
How can I do this programmatically in Java while rendering the page?

Assuming you have the standard JSP setup including JSTL and have mapped it to 'c' you could just do:
<c:if test="${myCondition}">
<div id="mDiv">
content
</div>
</c:if>
It does seem from the comments like there is some confusion about rendering JSP on the server vs rendering content in the browser. Everything that happens in the JSP is server side work that has to completely finish before the browser receives the generated document and starts drawing it. You can't use JSP to change content that is already on the user's screen. You need javascript, html5, etc, for that.

With JSP Java runs on the server (unlike JavaScript that runs within browser) so conditionally render your <DIV> using Java if statement within JSP:
<% if( test="true" ) { %>
<DIV>....</DIV>
<% } %>

I think you are looking for something like this:
<div id="loader">Loading / GIF animation</div>
<div id="result" style="display:none;">
Lots of data.
Should be flushed to the browser every now and then.
This will take seconds...
</div>
<script type="text/javascript">
$("#loader").hide();
$("#result").show();
</script>

JSF to JQuery Component Integration

Since any JSF page gets transformed at the server side into its equivalent HTML and sent to the client for rendering, and JQuery at the client side takes the HTML and re renders it.
In theory it should be possible to take the HTML that is a generated by JSF and wrap it into JQuery, if so I would like to know how it's done. Specifically using RichFaces as the JSF implementation if possible.
<rich:dataTable id="table">
<rich:column>
</rich:column>
</rich:dataTable>
The above snippet of JSF is transformed into it's equivalent HTML which is this
<table id="table">
<tr>
<td></td>
</tr>
</table>
Shouldn't it be possible to do something like this
<script type="text/javascript">
$(document).ready(function () {
$('#table').dataTable();
}
</script>
I've already tried that but it doesn't seem to work.
So please if anyone has any hints, I'd be more than grateful.

Mixing JSF and jquery is doable but there are some gotchas.
JSF is taking over your ids, so if table is in a form with id "form", the actual element id in html would be by default "form:table". I think jquery could have a problem with colon in a selector, so you may mark your table with a class and select by that:
<rich:dataTable styleClass="my-table">
<rich:column>
</rich:column>
</rich:dataTable>
and set selector as:
<script type="text/javascript">
$(document).ready(function () {
$('.my-table').dataTable();
}
</script>

The Id's of the JSF components are generated by combining the Id's of the containers on the hierarchy with a : separator. Not all the containers count, I don't remember exactly the rules.
Normally some JSF libraries have some client side API to get the component ID's I don't know for richfaces.
Anyway, if you'd like to use jQuery based JSF, take a look at primefaces.
Hope this helps.

This issue might be a '$' name spacing conflict arisen by the Jquery and rich faces component which is made of Prototype.js.Try using jQuery.noconflict() method. I had a similar problem of making the jquery work with richfaces jquery.noconflict() did the trick..
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Good Luck!

JSF 2.0 partial rendering on page on document load

I have a page, one section of which I want to load only after the whole page is loaded. For this, I'm using the following code on the page:
<script type="text/javascript">
alert("In the JS");
$(document).ready(
function() {
$.post(jspPath+'/myCommunity/ajax/hotTopicDiscussion.faces',
function(data) {
jsf.ajax.request(this, 'post', {render: 'discussionTopic'});
}
);
}
);
</script>
also
<h:panelGroup id="discussionTopic" reRendered="#{discussionBean.doRender}">
This doRender is a bean property which I set once the AJAX call is done. But this is not loading the data. I can see the ajax method is getting called.

It seems, that your call of jsf.ajax.request is incorrect. According to JsDoc reference arguments of request are following:
source:
The DOM element that triggered this Ajax request, or an id string of the element to use as the triggering element.
event:
The DOM event that triggered this Ajax request. The event argument is optional.
options:
The set of available options that can be sent as request parameters to control client and/or server side request processing.
So first element must be some element inside form or may be form itself. You may try to pass form's id or form element itself to this function.

Do you really need to submit a form ajaxically? That's where the jsf.ajax.request() is for. It seems like that you just want to load some static content inside some <div>. Just do as follows
<script>
$(document).ready(function() {
$.get("#{request.contextPath}/myCommunity/ajax/hotTopicDiscussion.faces", function(data) {
$("#discussionTopic").html(data);
});
});
</script>
<h:panelGroup id="discussionTopic" layout="block" />
Or, simpler, with jQuery.load():
<script>
$(document).ready(function() {
$("#discussionTopic").load("#{request.contextPath}/myCommunity/ajax/hotTopicDiscussion.faces");
});
</script>
<h:panelGroup id="discussionTopic" layout="block" />
In both cases, I assume that the hotTopicDiscussion.xhtml has <ui:composition> as root element and that it contains only the necessary HTML (and thus not <html> and so on).
If you indeed really need to submit a form ajaxically, then simplest would be to let JS "click" the button programmatically. It will delegate all the way up to the proper and needed jsf.ajax.request() call. A jsf.ajax.request() call is useless anyway without a physical form/button component on the page. You can if necessary hide the form by CSS.
<script>
$(document).ready(function() {
$("[id='form:button']")[0].onclick();
});
</script>
<h:form id="form" style="display:none;">
<h:commandButton id="button" action="#{bean.submit}">
<f:ajax render=":discussionTopic" />
</h:commandButton>
</h:form>
<h:panelGroup id="discussionTopic" layout="block" />