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>

In Behaviors Plugin 0.5.3 for Jira 5.1.8, I am unable to make reporter field as Read-Only?

I am upgrading my Jira from 4.3.2 to 5.1.8. I have my reporter field as read-only field for couple of transitions.
I wanted to make this reporter field as read-only in Jira 5.1.8 also. But when I install compatible version for Jira 5.1.8 i.e. Behaviour Plugin 0.5.3. then reporter field or any other user picker is not made as read-only.
This is a Bug for Behaviour Plugin.
Can anyone please tell me the workaround for this?
Any help will be appreciable...
Thanks in Advance.
Renu

UPDATE
How are you applying this? when running on the browser console, this should do the job:
AJS.$("#reporter-field").attr("disabled", true);
but when entering it to a field description use
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#reporter-field").attr("disabled", true);
});
</script>
You can apply this script in the following ways:
go to View Field Configuration and edit the reporter field and add this code as description.
add it to a custom field description. this custom field should be present on every screen that the reporter field is at.
add it to the Announcement Banner description
That will make the reporter field to be read only in all the screens. To disable the quick edit option, add this to the Announcement Banner description:
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#reporter-val").removeClass("editable-field inactive");
AJS.$("#reporter-val .icon-edit-sml").remove();
});
</script>
EDIT
To limit this only for specific transitions you can either:
add a custom field only to the specific transition screen and add it the script to it's description.
execute the script only on specific transition screen:
for example, to apply it only to Resolve Issue:
if (AJS.$("#workflow-transition-5-dialog .aui-popup-heading").text().indexOf("Resolve Issue") >= 0) {
AJS.$("#reporter-field").attr("disabled", true);;
}
original post
You can achieve this easily by using jQuery. In the custome filed page, click Edit on the desired field, than under description enter the jQuery code, something like:
To disable the field:
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#customfield_10001").attr("disabled", true);
});
</script>
To make it read only:
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#customfield_10001").attr("readonly", true);
});
</script>
EDIT
I've just noticed that you meant to disable reporter, which is not a custom field, and there can't add description to it.
As a workaround, you can create a custom field, doesn't matter which (if you allready have one in your page it will do the trick), and just swap #customfield_10001 for reporter:
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#reporter-field").attr("disabled", true);
});
</script>

You are trying to set the reporter field as readonly in behaviours plugin . I guess this is a bug in the plugin . What i would suggest you is write a groovy script which will add a helptext to the reporter field using setHelpText(String helptext). the help text will be the below javascript . You will need to escape it as a string :)
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$("#reporter-field").attr("disabled", true);
});
</script>
Hope this helps

Android preferences from settings menu - for phonegap developer

I've never written any single line in Java and I doesn't know much about the Java world, so when I hear that I can create android apps using phonegap I was very happy. But as I discovered later, I cannot escape from Java if I want to do something more.
I want to create settings page for my application, I found phongeap extension that allows me to read the phonegap applications settings but to use it I must create the settings GUI which can be done via XML and some Java. I found good tutorial to do it but since I'm not Java developer I cannot understand much from it.
Can someone tell me where to put all this Java and XML stuff to simply get the settings GUI working in phonegap application. I mean what files I need, with what content and in what directories.

With phonegap you can escape all the java codes, as you'll see in the following code, you wont need any java code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cordova Menu Button Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when Cordova is loaded.
// At this point, the document has loaded but cordova-2.3.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
function onDeviceReady() {
// Register the event listener
document.addEventListener("menubutton", onMenuKeyDown, false);
}
// Handle the menu button
function onMenuKeyDown() { alert("menu btn pressed");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
Dont use plugins for this feature, just go to the main documentation.
Also you may find the other events like:
deviceready
pause
resume
online
offline
backbutton
batterycritical
batterylow
batterystatus
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton

jqplotToImage fails when called via HTMLUnit

I have a web page that uses jqplot for charts and Google Datatable to display the data in a table format. I also have an "Export" hyperlink in the webpage for generate a PDF copy of the webpage for download. My export code looks as follows:
function exportPDF() {
var img = $('#clicks_chart_div').jqplotToImage(0, 0);
if (img) {
var imgTag = $('<img id="ccanvasimage">');
imgTag.attr('src', img.toDataURL("image/png"));
imgTag.attr('width', 450);
imgTag.attr('height', 320);
$('#clicks_chart_div').replaceWith(imgTag);
} else {
alert('could not get image');
}
$('#src').val(document.documentElement.innerHTML);
$('#frmSource').submit();
}
This code works well in a browser and downloads the respective PDF. However, when I invoke the same page via HTMLUnit, the call "var img = $('#clicks_chart_div').jqplotToImage(0, 0);" is not able to generate the image and goes to the else part "alert('could not get image');" Thus, the resulting PDF just contains the Datatable and none of the charts.
Any idea on why the call jqplotToImage fails? FWIW, the code for jqplotToImage is included via an external script as follows:
<script language="javascript" type="text/javascript" src="javascripts/export-jqplot-to-png.js"></script>
Thanks.

JavaApplet when you press a button/ click on image

Is it possible to run JavaApplet when you press a button , or when you click on the image on the webpage?
Maybe you guys can share any example, related html/jscript/jquery?
What is wrong with my code at this point?
<html>
<script>
function openApplet(){
var attributes = {codebase:'.',
code:'d.Applet',
archive:'Applet.jar',
WIDTH=500, HEIGHT=300} ;
}
</script>
<body>
<applet id="myapplet"
CODEBASE="."
ARCHIVE="Applet.jar"
CODE="d.Applet"
WIDTH=500 HEIGHT=300
style="visibility:hidden;"
>
</applet>
<input value="Applet_on_Click" onclick="openApplet()" type="button">
</body>
</html>
I'm just looking for very simple solution. Click on the image , applet shows up, click on the different image , another applet will show up. Or maybe these things can happen when we press a button too?
Update
Thank you slowpoison for the information!
But I'm missing something.
There is my original code now:
http://www.text-upload.com/read.php?id=360320&c=7544773
This is working just with pure html. But there is no action when you click on the button.
If I disable this row "style="visibility:hidden" , applet will show up without a click.
I wan't to show applet just after the button click. :(

You should add the applet tag to the document in the onclick handler.
var applet = document.createElement("applet");
// fill in various attributes for applet
// ...
// "install" the applet
document.getElementById("appletContainer").appendChild(applet);