使用 jstl 设置 CSS 样式答案

【问题标题】：set CSS style using jstl使用 jstl 设置 CSS 样式
【发布时间】：2013-03-14 21:33:27
【问题描述】：

有没有办法直接使用jstl修改css属性？以下是我想做的事情

<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>

所以你可能会说，为什么不把 css 设置为 display:block，然后像这样放置 if 标签

<c:if test="${not empty error}">
    <div id="error" align="center">
      <img src='resources/warning.png'/>          
        <c:out value='${error}' />     
    </div>
</c:if>

如果我的错误的唯一来源是来自控制器并在模型中传回，那很好。但是，我也在进行 AJAX 调用，并说浏览器端有问题，我仍然需要显示错误。

所以要这样做，例如在我的 ajax 调用中我会这样做

$.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");
            }

        });

【问题讨论】：

为什么不给它一个 CSS 类名并使用样式表给你“显示”值？
我试图让它显示：无，除非我的控制器返回“错误”。所以我的课程需要基本保持不变，如果出现错误，它只是需要更改的显示
将编辑帖子以解决我遇到的挑战，这些挑战不允许某些解决方案

标签： css jstl

【解决方案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>

或

<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>

应该做你想做的。

【讨论】：

这实际上也不起作用，那么它只会捕获来自控制器的错误，而不是 javascript 错误。我会发布我的解决方案

【解决方案2】：

我是这样做的

<div id="error" align="center">
  <img src='resources/critical.png'/>
  <span id="errorText">
    <c:out value='${error}' />
  </span>
</div>

所以现在 display 属性只适用于包含 div 'error'

我的 jsp 正在“errorText”字段中设置文本如果发现错误，我的 ajax javascript 也会这样做。

然后，在我的 javascript 中，它会检查 'errorText' 中是否有任何内容，并适当地设置其显示

$.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");
            }

        });

这只是因为我将控制器设置为在设置错误时返回错误的响应代码。所以 Ajax 失败并进入错误部分。

【讨论】：