set CSS style using jstl - css

Question

Is there a way to modify css attribute directly using jstl?
Below is what I want to do
<div id="error" align="center">
<img src='resources/warning.png'/>
<c:if test="${not empty error}">
<c:out value='${error}' /> //if i enter here, I want #error 'display' to be 'block'
</c:if>
</div>
So you might say, why not just have the css set to display:block, and put the if tags like this
<c:if test="${not empty error}">
<div id="error" align="center">
<img src='resources/warning.png'/>
<c:out value='${error}' />
</div>
</c:if>
That would be fine, if the only source of my errors were from the controller and passed back in the model. However, I am also making AJAX calls, and say there is a problem browser side, I need to display the error still.
So to do this, for example in my ajax call I do
$.ajax({
url: "url",
beforeSend: function(){
$("body").css("cursor", "wait");
},
dataType:"json",
timeout:15000,
cache: false,
async: false,
success: function(data){
document.getElementById("error").innerHTML="";
document.getElementById("error").style.display = "none";
$("body").css("cursor", "default");
},
error: function(jqXHR, textStatus, errorThrown){
if (textStatus =="timeout"){
document.getElementById("error").innerHTML="Request timed out!";
}
else{
document.getElementById("error").innerHTML= jqXHR.responseText;
}
document.getElementById("error").style.display = "block";
// $("#loading").fadeOut('medium');
$("body").css("cursor", "default");
}
});

Answer 1

<div id="error" align="center" <c:if test="${empty error}">style="display: none;"</c:if>>
<img src='resources/warning.png'/>
<c:if test="${not empty error}">
<c:out value='${error}' />
</c:if>
</div>
or
<div id="error" align="center" style="display: ${(empty error) ? 'none': 'block'};">
<img src='resources/warning.png'/>
<c:if test="${not empty error}">
<c:out value='${error}' />
</c:if>
</div>
should do what you want.

Answer 2

Here's how I did it
<div id="error" align="center">
<img src='resources/critical.png'/>
<span id="errorText">
<c:out value='${error}' />
</span>
</div>
So now the display property is only appying to the containing div 'error'
My jsp is setting text in the 'errorText' field
My ajax javascript is also doing this if it finds an error.
Then, in my javascript, it checks if 'errorText' has anything in it, and sets its display appropriately
$.ajax({
//url: "./test.go?station="+stName+"&date="+rDate,
url: "./getAssignments.go?station="+stName+"&date="+rDate,
beforeSend: function(){
// $("#loading").fadeIn('medium');
$("body").css("cursor", "wait");
},
dataType:"json",
timeout:15000,
cache: false,
async: false,
success: function(data){
document.getElementById("errorText").innerHTML="";
document.getElementById("error").style.display = "none";
pucksJSON=data;
reconstructGates( pucksJSON );
setStationName(stationName);
refresh_time = new Date(); //reset the time counter
// $("#loading").fadeOut('medium');
$("body").css("cursor", "default");
},
error: function(jqXHR, textStatus, errorThrown){
refresh_time = new Date(); //reset the time counter
if (textStatus =="timeout"){
document.getElementById("errorText").innerHTML="Request timed out!";
}
else{
document.getElementById("errorText").innerHTML= jqXHR.responseText;
setStationName(stationName);
reconstructGates( null );
}
document.getElementById("error").style.display = "block";
// $("#loading").fadeOut('medium');
$("body").css("cursor", "default");
}
});
This only works because I set up my controller to return a bad response code if it sets an error. So the Ajax fails and goes to the error section.