I've been trying to write a website in which all navigation is handled by hiding and showing divs. It is my understanding that this method is called Single Page Interface. This has worked for simple designs in the past but my current task is starting to become very troublesome using this method. How would I go about replicating the same behavior but instead of hiding and showing divs I can just have a main container div that is then populated with the desired html from the server?
Example:
<script>
$("#button").onclick(function() {
$("#a").show();
$("#b").hide();
});
</script>
<html>
<body>
<div id="a" style="display:none;">A: SOME HTML</div>
<div id="b" style="display:block;">B: SOME HTML</div>
<button id="button">Change to A</button>
</body>
</html>
(note this is a very rough example of white I'm trying to do)
But I would like the contents of a container div to change from "B" to "A" via some jsp
Could anybody point in the correct direction?
Further Explanation:
Maybe I can clarify a little better. So when the user loads the page they are presented with a section that has a table of all the existing files in a database. The user can select a file from the DB list to rename or copy. If the user wishes to rename a file, for example, they would be presented with a new display (all within the same "Tab") which will have a set of fields populated for the file that they have selected and a set of empty fields in which they can specify the new file name. Currently this changing of displays is handled by showing and hiding divs, but I would like to retrieve the html that I want to display from the server and present it. Basically mimicking the hiding and showing of divs.
As it's not completely clear to me what you're trying to do I'll give you some options:
Replace the content of a element on your page see
Since you're using a JSP, you can use server side logic to display certain fragments
You're using a JSP, use that to render some server side content
Ad 1:
(assuming jQuery) $('body').load('serverSide.html'); see http://api.jquery.com/load/
Ad 2:
<% if ("a".equals(request.getParameter("aOrB"))) { %>
<jsp:include page="/a.jspf">
<% } else { %>
<jsp:include page="/b.jspf">
<% } %}
Ad 3:
<%= request.getAttribute('content') %>
Hope that helps
Related
I have one requirement in which I need to print a web page(actually a jsp page created using struts 1.3 ) using browser's print option in such a way that buttons which are there on that webpage should look little darker in print or in pdf(when we use save as pdf).
I had tried below code inside head tag:
<style>
#media print {
.light {color: #000 !important; }
}
</style>
I put the buttons inside a div and tried to apply .light class on that dive so that only during print or saving it as pdf buttons should be visible darker.
buttons code is as below (struts bean tag is used here):
<div class="light">
<bean:message key="button.internet.request.update" />
</div>
<% } %>
</html:submit>
<% } %>
so I added line no. 1 and 3 just for putting the button code inside a div and applied that .light class. But it didn't work.
Help me appling the css code in bean tag so that button gets printed darker on print page or visible darker in pdf.
Images for proper button and disturbed button I have attached. Proper here means before applying my code and disturbed one is for after applying my code which didn't work.
I have a JSP file in which there are two textareas and a submit button all in a form ;
<form action="" method="post">
<textarea name="inConsole" id="in" cols="100" rows="10"> </textarea> <br/>
<input type="submit" name="Send Command"/> <br/>
<textarea name="outConsole" id="out" cols="100" rows="10"></textarea>
</form>
this page is supposed to work like any SQL program. so the user types a command in the first textarea and clicks submit, then the value of textarea will be extracted to a field and a method will take care of the command and return a log (1 row inserted, error:bad syntax etc) which will be displayed in the second textarea.
I know how for example make a login page and send data and redirect user to a new page(new jsp) file if user pass is correct.
what I can't find is how can I do all the things that I said above without going to a new page while using form action.
I have checked other questions that linked the action attribute to a servlet which was confusing for me( the way that a servlet was called). I'm looking forward to use a simple scriptlet for this purpose like the one I used for my login page:
<%
DatabaseLoginTest dbLogTest = new DatabaseLoginTest();
if (dbLogTest.DBLoginChecker(request.getParameter("user"), request.getParameter("pass")) == true){
%>
<p>Login Successful</p>
<% } else { %>
<p>Login Failed</p>
<% } %>
also I'm aware that adding java scripts(not Javascript scripts:) ) to html isn't a good practice(and the reasons for it) but I think this might be easier for a simple program that I'm working on.
p.s: I'm using tomcat and Intellij for developing this web application
and I have made a custom SQL so I only need the code that gives me the textarea value and the one that sets the other one's value
Update: now I know I should use javascript but I don't know how can I send the data extracted by javascript to a java method.
If you want to do this while remaining in the same page, you have to use Javascript. This is because if you want the server to be able to re-render the page, there has to be a page refresh.
You would need to write onClick handler for the submit button and make a Ajax call to your server to a specific URL with the user input. This URL would serve the data needed for the necessary UI changes.
You can use a scriptlet to generate the HTML that would be shown in the webpage but this would only suffice for a simple use-case and it would be a lot simpler if, say, your service returned just the data required to make the UI change and actual UI change is handled by the JS.
Also,I don't think it is a bad practice to embed JS in HTML. Sure, you can optimize this by including a JS source file but that's a separate optimization.
Our team built a custom portlet to load Google markers onto a map. The markers are created in the template script. We now would like to display these markers in another asset publisher in a list like format. Is there anyway to pass a conditional to the template file depending on the portlet that is requesting it? Or alternatively are there any good methods for building this code into the jsp rather than the template file?
//code that creates the markers on the full map
gmarker=new google.maps.Marker({position:new google.maps.LatLng("$Lattitude.getData()","$Longitude.getData()"),title:"$reserved-article-title.getData()",icon:gicon,map:map});
if(window.location.href.indexOf("fullmap") > -1) {
google.maps.event.addListener(gmarker, 'click', function() {
new google.maps.InfoWindow({content:
'<div id="node_content">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'
}).open(map,this);
});
}
gmarker.setMap(map);
//redirect code that opens the infowindow on load if the id paramater is not null
if(flag==true){new google.maps.InfoWindow({content:
'<div id="node_content" class="gs2">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'}).open(map,gmarker);
flag=false;
}
It is liferay 6.1 so we don't get to enjoy the luxuries of the latest release.
Here is a screen shot of the two portlets and what they are displaying as well as an example of what we are aiming for. A website that is very similar to what we are attempting can be found here. Were hoping for conceptual ideas on how to differentiate the portlets not code necessarily. Your help is very much appreciated.
If you want to use the same JavaScript function from diverse portlets, then the better way is to put the JavaScript function to the Theme
http://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en
and call the function from the portlet-jsp with different properties.
I am not sure if I understood your question correctly, but have you considered creating a custom Display Style for your asset publisher to achieve this? If not, check this out:
http://www.rotterdam-cs.com/blogs/-/blogs/hooking-the-asset-publisher-for-custom-display-styles
You can create a new display style with your Map on top and the list below, everything in one jsp (unless you break it down off-course). I think it will possibly resolve your problem.
I have a form to be submitted in a jsp file. When submit, the form uses a value which is coming from a hidden value, say id.
<input type="hidden" value="1234" name="Id">
Prior to submit, I am able to run the firebug and edit this input value to a non-numeric value (e.g abc). now when I submit the form, apparently the form picks the new value and throws error (id cant be non-numeric).
How can I solve this issue? Thanks,
might it's help for you
you can set session variable for id and remove hidden field .
and get session variable where you wanted .
example :
JSP Sessions
If you are programming the site, it is very helpful to be able to associate some data with each visitor. For this purpose, "session"s can be used in JSP.
A session is an object associated with a visitor. Data can be put in the session and retrieved from it, much like a Hashtable. A different set of data is kept for each visitor to the site.
<%
session.setAttribute( "id", yourid );
%>
<HTML>
<BODY>
Continue
</BODY>
</HTML>
The SaveName.jsp saves the id in the session, and puts a link to another page, NextPage.jsp.
NextPage.jsp shows how to retrieve the saved name.
<HTML>
<BODY>
Hello, <%= session.getAttribute("id") %>
</BODY>
</HTML>
If you bring up two different browsers (not different windows of the same browser), or run two browsers from two different machines, you can put one name in one browser and another name in another browser, and both names will be kept track of.
Using Tiles and JSPs. On a JSP, using ${param.ID} to get specific pages.
sub-category.jsp
<jsp:include page="categories/sub-category/${param.ID}.jsp" flush="true" />
/sub-category/test-page.jsp is an ID
I need to find a way to make test-page.jsp have its own unique page title that I can insert onto test-page.jsp.
I assuming that you want to change the title of your webpage based on the page loaded(eg. test-page.jsp).
If that is true, then in test-page.jsp, you can write
<script>
document.title = "My Title";
</script>
or write within document.onload()
best would be jquery.ready function