We Keep Coding

Handle situation when image cannot be rendered

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>

Springs <form:Checkboxes> with titles

My Question:
Is there a way i can add an infobox to a label which was created by the form:checkboxes-Tag? It should appear while hovering over the label (I know that the title attribute in html does exactly this).
Scenario:
I have a div with generated checkboxes. Those checkboxes have labels which are longer than the max-width of the containing div. As i don't want the width to be increased i thought displaying the name while hovering over the label would suffice. But as far as is know the checkboxes-Tag does not support a title-tag per item (items are computed at runtime and passed to the model).
It looks like this:
<fieldset>
<div id="selectedAccounts" style="overflow-y:scroll;overflow-x:hidden;" onchange="loadSthElse()">
<form:checkboxes path="selectedAccounts" items="${accounts}" delimiter="</br>/>
</div>
</fieldset>
As items i pass a Map<Integer,String> to fill values and labels.
The Spring Documentation says that the standard html attribute title is still available. But i can't see if or how it is used for every single item that is created as you only seem to define one title.
I tried something like
$("#selectedAccounts label").each(function(element) {
element.attr('title', element.name)
}
but it wouldn't work either.
Is there a way to make this work - Javascript, Jquery - or is the checkboxes-Tag poorly chosen?
Greetings,
Uwe

If you don't want to use title attribute (¿WHY?), you can define hover event in any hidden object you want. It also gives your code and HTML structure more readability.
HTML
<form:input type="checkbox" value="CHECKBOX1" checked="checked">
<div>all the info you want to show when hovering your checkbox</div>
CSS
input+div{display:none;}
input:hover+div{display:inline;}

I fixed this issue.
I simply added a title using dojo after generating the checkboxes.
<div id = "selectedCampaigns" onchange="loadAdSets()">
<form:checkboxes path="selectedCampaigns" multiple="true" items="${campaigns}" delimiter="<br/>"/>
<script type="text/javascript">
dojo.query("#selectedCampaigns label").forEach(function(element) {
dojo.setAttr(element,"title",element.innerHTML);
});
</script>
</div>
After setting the attribute to the innerHTML everything looks just fine.

Wicket wrap img element in a link

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.

Reoccurring Post with GWT

<div class="post">
<div class="post-user-image">
image
</div>
<div class="post-content">
<h4>
link to user profile, firstname and last name of the post owner
</h4>
<p>......messege itself......</p>
<div class="post-footer">
post --> date and post --> likes...
</div>
</div>
</div>
I have the html code above that represents a post on a users wall, and i want this to reoccur for the number of post that user has using GWT. I don't know how to approach the problem I don't feel comfortable with the GWT integration to existing html code.

You can get familiar with GWT from the resources at the GWT Dev guide.
For your particular problem, I suggest you look at UiBinder.
You can use your HTML snip as the template for a UiBinder GWT widget. Your widget would have parameters for the image/link/content/whatever you want to display.
Let's call your widget Post. Every time you want to add a new instance to the display you might do something like this:
// Crete and populate our Post
Post newPost = new Post();
newPost.setUsername("XXX");
newPost.setLink("xxx");
newPost.setDate("xxx");
// Display the post.
postContainer.add(newPost);
Note that 'postContainer' could be anything - one of the GWT Panels, a custom container you are using to display the widgets into, etc.

How can I using Javascript Swap Out A h2 URL Destination with Limited Access to HTML?

I don't have access to my HTML code but I have access to Javascript in the footer of my document. With that being said I would like to switch out the URL "/vistor_signup" with a new URL of my choosing. Lets say "http://www.example.com/account_signup"
And I would also like to do the same for "/user_signup", lets say swap to "http://www.example.com/master_signup"
I have to use JavaScript to do so and I don't have any understanding of JS.
How do I make this work with JS code?
My code
<div class="grid_12">
<div id="login">
<div class="panel" id="login-form">
<div id="login-promo">
<div class="clear"></div>
<h2>Visitor Sign-Up ></h2>
<h2>User Sign-Up ></h2>
</div>
</div>
</div>
</div>
</div>

you mean something like this:
var anchors = document.body.getElementsByTagName("a");
for(var i=0; i < anchors.length; i++) {
var anc = anchors[i];
if (anc.getAttribute("href") == "/visitor_signup") {
anc.setAttribute("href", "http://www.example.com/account_signup");
}
}
WARNING: due to the way browser render HTML (parsing the page, semi-sequentially fetching referenced resources, evaluating javascript along the way), it might happen that someone sees the html before your script gets executed, and even clicks the '/visitor_signup' link.

Under your limitations, esp.
No access to code
No id tag on elements
your best bet is to
use document.body.GetElementsByTagName() to find all tags
on those check the href property
change it accordingly
EDIT: This is exactly what #milan's answer does, so please disregard this one

Since you can't edit the HTML and the <h2>s aren't differentiated, using jQuery might be easier than using plain JS in order to reach the elements.
This jQuery could be:
$('#login-promo h2:first a').attr("href", "/account_signup").parent().next().find('a').attr("href", "/master_signup");
Here we are selecting the first <h2> <a> and changing its href. Then we go back tho the <a>s parent, find the next <h2> <a>and change its href too.
You can check an example in this jsfiddle.