jQuery 在 ASP.NET MVC View 中隐藏 Bootstrap 表

Question

我有一个 ASP.NET MVC 驱动的网站，它在表格中显示记录。该表是 bootstrap 3 表。如果没有记录，我会显示一个 div。根据另一位用户的建议，我修改了 View ，以便在我的“没有记录”div 旁边呈现表格。

我在我的申请中拥有的东西:

1. 在我的 CSS 中我设置了表格显示:无

2. 在我的 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");
   }
   

3. 然后我进行 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();
   
           }
       });
   });
   

4. 在 renderData 中构建我的数据然后显示表格并隐藏我的 no-absences div

   $("#no-absences").hide("fast", function () {
       $("#absencesTable").show("fast");
   });
   

   顺便说一句，这很好用。

5. 如果没有返回数据，将调用 hideAbsences()

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

我知道我不需要检查表格是否可见，但我正处于尝试一切的地步。

当没有数据时，我的表不会被隐藏。我同时显示了 div 和表格。

这是我的观点，供引用。

    @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 有些奇怪。

Answer 1

在经历了很多头痛之后，我找到了解决方案。我不明白为什么它会起作用，但它确实起作用了。

当日历控件中的日期被选中时，我有一个 ajax 调用。我将我的代码包装在一个 try/catch block 中:

$("#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 block 可以。

我不确定为什么会这样。为什么在表元素上显示/隐藏不够？这是 Bootstrap 3 问题，还是 calendar control我在用着...？如果其他人有任何想法，请告诉我。