jQuery隱藏ASP.NET MVC中的引導表視圖

我有一個ASP.NET MVC驅動的網站，它在表中顯示記錄。該表是引導程序3表。如果沒有記錄，我會顯示一個div。在另一個用戶的建議下，我修改了視圖，以便表格與我的「沒有記錄」div一起呈現。jQuery隱藏ASP.NET MVC中的引導表視圖

事我已經在我的應用程序：

在我的CSS我已經設置了表顯示：無

在我的JS文件，我這樣做的頂部...

var absenceRows = $("#absencesTable tbody").find("tr").length; 

var $absTable = $("#absencesTable"); 

var emptyAbsenceDiv = $("#no-absences"); 

console.log(absenceRows); 

if (absenceRows === 0) 
{ 
    emptyAbsenceDiv.show("fast"); 
    $absTable.hide("fast"); 
} 
else 
{ 
    emptyAbsenceDiv.hide("fast"); 
    $absTable.show("fast"); 
}

然後我有一個AJAX調用，我找回數據：

$("#chosenDate").on("dp.change", function (e) { 

    var formattedDate = moment(e.date._d).format('DD/MM/YYYY');      

    $(document).ajaxStart(function() { 
     $("#absencesTable, #no-absences").fadeOut('0'); 
     $("#loading").show(); 
    }); 
    $(document).ajaxComplete(function() { 
     $("#loading").hide(); 
     $("#absencesTable").fadeIn('200'); 
    }); 

    var ajaxOptions = { 
     url: absenceDateUrl, 
     type: 'post', 
     contentType: 'application/json', 
     dataType: 'json', 
     data: '{selectedDate:' + JSON.stringify(formattedDate) + '}' 
    };  

    $.ajax(ajaxOptions).done(function (data) { 

     console.log(data); 
     if (data !== null && data.length !== 0) { 
      renderData(data); 
     } 
     else 
     { 
      console.log("No data! " + $("#absencesTable").is(":visible")); 
      hideAbsences(); 

     } 
    }); 
});

在我的renderData構建我的數據則顯示錶和隱藏我沒有缺席的div
```
$("#no-absences").hide("fast", function() { 
    $("#absencesTable").show("fast"); 
}); 
```
這工作得很好BTW。

如果沒有返回數據hideAbsences（）被調用

if ($("#absencesTable").is(":visible")) { 
    $("#absencesTable").hide("fast"); 
    $("#no-absences").show("fast"); 
}

我知道我並不需要檢查表是可見的，但我在哪裏，我的點嘗試一切。

當沒有數據我的表不被隱藏。我同時顯示了div和table。

這是我的看法以供參考。

@if (Model.Count() == 0) 
{ 
    <div class="well well-lg" id="no-absences"><h3>Everybody is in! There are no absences today :)</h3></div> 
} 

<table class="table table-striped table-bordered" id="absencesTable"> 
    <thead> 
     <tr> 
      <th> 
       Name 
      </th> 
      <th> 
       Date Out 
      </th> 
      <th> 
       Return Date 
      </th> 
      <th> 
       Absence Type 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @item.FullName 
       </td> 
       <td> 
        @item.DateFrom.Value.ToLongDateString() 
        <span class="label label-default">@item.AbsencePeriodFrom.PeriodText</span> 
       </td> 
       <td> 
        @item.DateTo.Value.ToLongDateString() 
        <span class="label label-default">@item.AbsencePeriodTo.PeriodText</span> 
       </td> 
       <td> 
        @item.AbsenceType.AbsenceTypeText 
       </td> 
      </tr> 
     } 
    </tbody> 
</table>

當返回數據表的顯示屬性設置爲「顯示：表」，但我不認爲這是我的顯示/隱藏不工作的原因。我可能是錯的。我只想隱藏div並顯示錶格，反之亦然。

僅供參考我曾嘗試在jsFiddle中複製此內容，但我無法複製該錯誤（http://jsfiddle.net/f2r9mdah/）。我在想我的jQuery或View有點時髦。

來源

2014-09-30 Arminder Dahul

你打開瀏覽器中的控制檯來檢查錯誤嗎？ – 2014-09-30 13:30:20

沒有錯誤。 – 2014-09-30 13:47:44

@ArminderDahul它擊中console.log行嗎？ – JB06 2014-09-30 19:14:52

很多頭痛之後，我找到了一個解決方案。我不明白它爲什麼有效，但它確實有效。

當選擇日曆控件中的日期時，我有一個ajax調用。我裹着我的代碼在一個try/catch塊：

$("#chosenDate").on("dp.change", function (e) { 

     try 
     { 
      console.log("$absTable = " + $absTable.is(":visible")); 
      console.log("emptyAbsenceDiv = " + emptyAbsenceDiv.is(":visible")); 

      var formattedDate = moment(e.date._d).format('DD/MM/YYYY');      

      var ajaxOptions = { 
       url: absenceDateUrl, 
       type: 'post', 
       contentType: 'application/json', 
       dataType: 'json', 
       data: '{selectedDate:' + JSON.stringify(formattedDate) + '}' 
      };  

      $.ajax(ajaxOptions).done(function (data) { 

       console.log("inside ajax done = " + data); 
       if (data !== null && data.length !== 0) { 
        renderData(data); 
       } 
       else 
       { 
        hideAbsences(); 
       } 
      }); 

     } 
     catch(Exception) 
     { 
      //throw Exception; 
     } 
    });

而且，只是良好的措施，我裹表一個div內，用於隱藏和顯示在新的div。添加div不會使代碼工作，只有try/catch塊。

我不知道這是爲什麼工作。爲什麼不在表格元素上顯示/隱藏足夠的？這是Bootstrap 3問題，還是我用的calendar control ...？如果其他人有任何想法，請讓我知道。

來源

2014-10-01 09:44:07

jQuery隱藏ASP.NET MVC中的引導表視圖

回答

相關問題