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>
Related
I have two JSP
------------------------------------
first.jsp
.....
<jsp:include page="second.jsp"/>
....
<div id='anotherId' >
how to include that secound.jsp 's div tag
</div
-------------------------------------
second.jsp
....
<div id='abc'>
</div>
------------------------------------------
The reason why am doing like this means I have lot of conditions checking in my JSP i don't want to club all those in to a single JSP so I split that into small divs and I want to access that from my JSP. Just only to have clean code
Help me to sort this.
You need custom tags inside JSP's and reuse them. here is an example
I'm trying to access form data that is filled out inside a jsp:included page from outside the page. I am using jquery and am open to using ajax. My code looks a little like this:
<form name=form1>
<jsp:include page="someFormData.jsp" />
//Other inputs out here in <% include %> files
<input type=button value=Submit onClick="return commonSubmit()"
</form>
I need to use the jsp:include style include because having everything on one page using
<%include...%> was causing an exception due to my jsp being too large. Alls I need to do is be able to submit the form and include the data inside "someFormData.jsp"
I have JPSs that represent Components. I want to have these component JSPs write some HTML before and after the contents of the JSP is executed.
component.jsp
<#page session="false">
<%= "hello " + "world" %>
when this JSP/servlet is rendered, I want it to render:
<div class="component">
hello world
</div>
I want to be able to create various "wrappers", and depending on the JSP, include wrap the contents of the JSP with the correct content. If I want to change/augment the wrapper down the road, I want to only do it in one place (Could be 100s of components).
Can i do something with <#page extends="..."> possibly?
Thanks
What do you want is named: tag files. Introduced on JSP 2.0
With this approach you can write JSP tags using jsp, therefore you need to create a folder named WEB-INF/tags, and create a 'normal' jsp within this folder.
The tag that you want to create needs to have the following start instruction:
<%#tag description="tag description" %> in order to indicate this is a tag.
To use it you will need to reference the tags you want to use with the following instruction: <%# taglib tagdir="/WEB-INF/tags" prefix="custom"%>
So, you can do something like:
WEB-INF/tags/myTag.tag
<%#tag description="hello tag" %>
<%#attribute name="name" required="false" type="java.lang.String"%>
<html><head></head><body>
<h1>Hello <%=name%></h1>
<jsp:doBody />
</body>
index.jsp
<%# taglib tagdir="/WEB-INF/tags" prefix="custom"%>
<custom:myTag name="My Name">this is the content</custom:myTag>
The result will be a page printing
<html><head></head><body>
<h1>Hello My Name</h1>
this is the content
</body>
This is a terrible idea. JSPs with scriptlets are 1998 technology. No one writes these anymore.
If you must write JSPs, you're better off using JSTL and something like SiteMesh or Tiles to composite pages.
An even better idea would be to start moving towards something that might allow you to easily run a mobile solution alongside your web app. Services and templates would be my preference over JSPs.
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!
I am trying to make a dynamic form using Spring forms. Basically, the form gets a title of learning activity and then there's the a button below it that says, "Add one more Learning Activity". This makes it possible for the user to add one more learning activity. I want him to be able to add as much as he likes.
I haven't tried this before so obviously I encountered errors with the first solution I thought of. I really had a feeling doing what I did will generate an error but just do drive home what I am trying to do, here's the code:
<script language="javascript">
fields = 0;
function addInput() {
document.getElementById('text').innerHTML += "<form:input path='activity[fields++].activity'/><br />";
}
<div id="text">
<form:form commandName="course">
Learning Activity 1
<form:input path="activity[0].activity"/>
<input type="button" value="add activity" onclick="addInput()"/>
<br/><br/>
<input type="submit"/>
</form:form>
<br/><br/>
</div>
You can't use <form:input> within the javascript because is a jsp tag that runs on the server-side.
However, there's nothing magical about how an HTML input gets bound to a field in the Spring command object; it's just based on the name. So in your javascript, add a new
<input type="text" name="activity[1].activity">
(for example -- obviously you'll increment the index).
Another option I've used for more complicated controls is to grab the HTML of the existing control (which was created using the Spring form:input tag) and clone it, replacing the indexes with the incremented number. This gets a lot easier if you use jQuery.
EDITED TO ADD:
One issue that may cause you problems: you're appending your new input box to the end of your outer div ("text"), which means it's not inside the form tags. That won't work.
Is <form:input> a JSP tag? If so, then client-side Javascript to add <form:input> nodes to the DOM will have no effect - since the server-side JSP engine is not interpreting those.
Your Javascript needs to work with raw HTML and DOM, such as adding an <input> element.