I have a page with a mix of HTML and GWT components. I'd like to not make the content viewable to the user until the content has completely loading (perhaps showing a simple loading dialog during the process).
What is the easiest way of achieving this?
Actually, the proposed way is to create a in your HTML and, after you load everything in your entry point, hide it:
<html>
...
<body>
...
<div id="loading">
<span id="loadingMsg">Loading ...</span>
</div>
...
</body>
</html>
public void onModuleLoad()
{
...
// Hide the "Loading" notification
RootPanel.get("loading").setVisible(false);
...
}
I use a PopupPanel with autohide set to false and modal set to true. Style it however you want, show it when you start loading your content, and hide it when you're finished.
Related
I have spring mvc application
Sometimes on our site we can see that in html exists img tag but actually url is broken.
Now we want show default image for all these situations.
How can we handle it in single place and we should hit at this place only when we want to load image.
You can get it using jQuery. On the document.ready you can check the url of all images, and check if the images are valid. If not you can just change for your image.
Here is the jQuery code (you must add it on all your pages):
$(document).ready(function(){
var images = $('img').each(function(i, image){
checkSrc(image);
});
});
function checkSrc(image){
$.get($(image).attr('src'), function() {
//succes, we do nothing
}).fail(function() {
$(image).attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cristiano_Ajax.jpg/220px-Cristiano_Ajax.jpg');
});
}
Here the html:
<img src="notexisting.jpg"/>
Working fiddle: http://jsfiddle.net/bx5kkoun/
WARINING
I don't recommend to do this because you have to request twice the images.
You can achieve it as well using Java Filter, but you must check as well the url of all images from server, but it's the same situation.
How about this:
<img src="image.gif" onerror="loadDefaultImage()">
This solution is cross-browser, but not IE8 and below.
You have many options for the loadDefaultImage function, you could use the jQuery method already suggested (just use the fail part), here is another suggestion, or just google "image tag onerror example" and select an option that works for you.
I think resolving it on the client side is the most efficient way to go. It will only attempt an extra request if there is a failure. If you attempt a solution on the server side, you would have to test for success/failure and then modify the markup sent to the browser. The browser will have to load even the successful images again as the page is rendering.
Here is a possible implementation:
function loadDefaultImage(element) {
$(element).attr(
'src',
'https://placehold.it/100x100'
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100px;margin-right:100px;display:inline-block;">
<img src="image.gif">
</div>
<div style="display:inline-block;">
<img src="image.gif" onerror="loadDefaultImage(this)">
</div>
I have wicket code that shows an image:
<div class="someclass">
<img wicket:id="some-image"/>
</div>
This works great.
I have a requirement that sais, that this image MIGHT be wrapped in a link and that link also needs to be generated from the wicket side.
So I would like to implement this the nicest way possible WITHOUT having to add BOTH sections like this:
<a wicket:id="link-for-image">
<div class="someclass">
<img wicket:id="some-image-with-link"/>
</div>
</a>
<div class="someclass">
<img wicket:id="some-image"/>
</div>
and hiding one or the other.
What is the standard way of implementing this nicely?
Is there a way to define some kind of generic type for "link-for-image" so I can maybe create it as a web markup container instead of a link?
Thanks!!!
Use either Border
Use fragments
Output <a> always, but hide href attribute.
PS: <div> is not allowed inside <a> due to HTML standard.
If Ajax is an option you can add an onclick behaviour:
Image img = new Image("id", yourResource);
img.add(new AjaxEventBehavior("onclick") {
#Override
protected void onEvent(AjaxRequestTarget target) {
// Your click magic
}
});
add(img);
First, the "disabled link" functionality of AbstractLink might be sufficient for you. Link, BookmarkablePageLink etc. extend AbstractLink.
If not, you can use a subclass of Link (or BookmarkablePageLink, or whatever). Then override onComponentTagBody(), and if the "link" should not be a link, don't add a href and turn the into a or . This solution assumes that such a "wrapper" element won't screw up your CSS or scripts. You might be able to turn it into a wicket:container and have that stripped away, if your markup settings are set to strip such tags.
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'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
When clicking a button, my GWT application returns a PDF file embedded in an HTML page which looks something like:
<html><head></head>
<body marginwidth="0" marginheight="0" bgcolor="rgb(38,38,38)">
<embed width="100%" height="100%" name="plugin"
src="http://myserver/?cmd=getMyPdf" type="application/pdf">
</body>
</html>
Problem is it can take a while for the server to create this PDF file, so what I want is a waiting screen with a loading animation which can have the PDF file download in the background, and then when the file is done, display the page as described above.
One obvious way would be to display a loading page, send an asynchronous command to the server and then once the onSucceed method is called, call the page as normal. Downside is I'd have to add some server-side logic for making the PDF creation work in the background...
Is there any way to do this client-side with the GWT API?
Did you see this stackoverflow question Detect when browser receives file download? Basically the answer given is that you set a cookie in the return response and wait on the client side for this cookie to be set. This can be done easily with GWT as it has a Scheduler (for the repeated timer check) and easy access to Cookies. You still need to make some server changes, but you don't have to create a background process.
I don't have the full answer, but the following code works for me in Safari, and maybe you can modify it, to make it work with other browsers, too (?):
<html><head>
<script type="text/javascript">
function showPdf() {
document.getElementById("loading").style.visibility = "hidden";
document.getElementById("pdf").style.visibility = "visible";
}
</script>
</head>
<body marginwidth="0" marginheight="0" bgcolor="rgb(38,38,38)">
<div id="loading"
style="position: absolute; background-color: white;">Loading...</div>
<iframe id="pdf" width="100%" height="100%" name="plugin"
src="http://myserver/?cmd=getMyPdf" onload="javascript:showPdf();"
style="visibility: hidden;"></iframe>
</body>
</html>
This is pure JavaScript - but could certainly be done with GWT, too. Note, that I'm using an iframe instead of embed, because embed doesn't really support the onload method (and embed is not a standard HTML element, as far as I remember).
The reason, why this may not be the full answer, is that Chrome fires the onload event as soon as the PDF starts downloading (but after the PDF generation on the server side has finished). I'm not sure, if this is what you want?