Bring common code into a separate jsp - java

I have more than two jsp pages. And into every page I have a common jsp code like this(navigation bar)
<nav>
<div class="nav-wrapper green darken-1 ">
SBT
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Menu</li>
<li>Home</li>
<li>Test</li>
</ul>
</div>
</nav>
I don't wanna copy this or even more then this part into every jsp page. How to connect nav.jsp, which contain this code to every jsp page. And will it work slower or faster?

Create 3rd file say nav.jsp write your common code into it and simply include your nav.jsp wherever you want
You can use include action or include directive(consider the Advantage of both the ways and use the way which is convenient to you).

Related

How to display java String with html tag appended, with the html behavior in angualrjs front end

I have a string in java,I need to append html tag to it dynamically so that when displayed in the frond it,the html tags behavior is felt.
Eg:
String content="Hello World,this is a test <em>content</em> to demonstrate the requirement";
In the above string content is wrapped inside the <em> tag.But when I am trying to display it in angularjs front end, the string is not taking the tag behavior and displayed as "Hello World,this is a test <em>content</em> to demonstrate the requirement".
use angular-sanitize.js for the same -
example
<div ng-controller="testCtrl">
<div ng-bind-html="stringTest"></div>
</div>
you can use ng-bind-html
<div ng-controller="testCtrl">
<div ng-bind-html="stringTest"></div>
</div>
However, if you find this directive too restrictive and when you absolutely trust the source of the content you are binding to, then you can also use ng-bind-html-unsafe.
<div ng-controller="testCtrl">
<div ng-bind-html-unsafe="stringTest"></div>
</div>

Deal with whitespaces in CSS class names with Jsoup

I want to select some supermarket product info from this page:
http://www.angeloni.com.br/super/index?grupo=15022
For that I should select <ul> tags with class "lstProd ":
If the class name were "lstProd" it would be easy, but the problem is the whitespace at the end of name. I couldn't make Jsoup deal with it.
I tried the code below and other ways but it always get an empty list.
org.jsoup.nodes.Document document = Jsoup.connect("http://www.angeloni.com.br/super/index?grupo=15022").get();
org.jsoup.select.Elements list = doc.select("ul.lstProd ");
the code snippet from html page that I want to get:
<ul class="lstProd ">
<li>
<span class="cod">CÓD. 1341372</span>
<span class="lnkImgProd">
<a href="/super/produto?grupo=15022&idProduto=1341372">
<img src="http://assets.angeloni.com.br/files/images/7/1B/C6/1341372_1_V.jpg" width="120" height="120"
alt="Creme Dental SORRISO Super Refrescante Tubo 90g">
</a>
</span>
<div class="RgtDetProd">
<div class="boxInfoProd">
<span class="descr">
<a href="/super/produto?grupo=15022&idProduto=1341372">Creme Dental SORRISO Super Refrescante
Tubo 90g</a>
</span>
<ul class="lstProdFlags after">
</ul>
</div>
...
I think you are facing two completely separate problems:
Jsoup does not load the site you think it loads. The website you specified renders its contents via JavaScript and loads some content after initial page loading through AJAX. JSoup can't deal with this. You either need to investigative the AJAX calls and get them directly with Jsoup, or you use something like selenium webdriver to get the page in a real browser which will render everything as you expect it.
CSS class names can't contain spaces for practical purposes 1. In HTML spaces are used as separator between class names. Hence <ul class="lstProd "> is the same as <ul class="lstProd">. In CSS selectors however a class name is specified by .className, i.e. dot followed by the class name. You can concatinate several classes like this: element.select(".className1.className2")
1 Technically you can put spaces in CSS classes, but you need to escape them with '\ '. See https://mathiasbynens.be/notes/css-escapes or Which characters are valid in CSS class names/selectors?
edit: be more precise about CSS class names
CSS class names CAN contain whitespaces.
And <ul class="lstProd "> is NOT same as <ul class="lstProd">.
And I can see that you have multiple <ul> with same class name.
The better way to inspect or traverse such element is by nth-child
So to find your required selector you can use #abaProd > ul:nth-child(4)
For more details about nth-child

Calling an particular portion of an JSP into another JSP

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

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>

Dynamic Forms in Spring

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.

Categories