Question

有没有办法直接使用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");
            }

        });

Answer 1

以下是我的表现

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

所以现在display属性只适用于包含div＆＃39;错误＆＃39;

我的jsp正在设置＆＃39; errorText＆＃39;领域如果发现错误，我的ajax javascript也会这样做。

然后，在我的javascript中，它会检查＆＃39; errorText＆＃39;有任何内容，并适当设置其显示

$.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失败并转到错误部分。

Answer 2

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

应该做你想做的事。

使用jstl设置CSS样式

2 个答案: