Concealing a Bootstrap table on an ASP.NET MVC View using jQuery

Question

Concealing a Bootstrap table on an ASP.NET MVC View using jQuery

My website is powered by ASP.NET MVC and it showcases records in a Bootstrap 3 table. When there are no records, a div is displayed. Following the advice of another user, I adjusted the view to render the table along with the "no records" div simultaneously.

Here's what I have in my application:

In my CSS, I've set the table display property to none

At the beginning of my JS file, I perform the following actions...

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

Next, there is an AJAX call where data is retrieved:

 $("#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();

        }
    });
});

In the renderData function, data is constructed and then the table is shown while the no-absences div is hidden:
```
$("#no-absences").hide("fast", function () {
    $("#absencesTable").show("fast");
});
```
This method works perfectly fine.

If no data is returned, the hideAbsences() function gets triggered:

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

I am aware that checking the visibility of the table might not be necessary, but I'm trying all possibilities at this point.

However, when there is no data, my table fails to hide. Both the div and the table remain visible.

For reference, here is the snippet from my View:

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

Even though the display property of the table is set to "display:table" when data is received, I don't think that's causing the issue with show/hide functionality. I may be mistaken. My goal is simply to toggle between showing the table or the div, not both simultaneously.

Just an FYI, I attempted to replicate the error on jsFiddle, but couldn't (http://jsfiddle.net/f2r9mdah/). It seems like there might be something off with my jQuery or the View itself.

jquery css asp.net-mvc twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

After countless challenges, I finally stumbled upon a solution. The strange thing is, I still can't quite comprehend why it works.

Upon selecting a date in the calendar control, an ajax call is triggered. To handle this, I enclosed my code within a 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;
        }
    });

To add an extra layer of certainty, I enclosed the table within a div and toggled visibility using hide and show on the new div. Interestingly enough, introducing the div had no impact on the functionality, only the try/catch block did.

The mystery persists - why does toggling visibility of a table element alone not suffice? Could this be attributed to a Bootstrap 3 quirk, or perhaps the calendar control I'm utilizing...? If anyone has insights to share, please do enlighten me.

Answer 2

After countless challenges, I finally stumbled upon a solution. The strange thing is, I still can't quite comprehend why it works.

Upon selecting a date in the calendar control, an ajax call is triggered. To handle this, I enclosed my code within a 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;
        }
    });

To add an extra layer of certainty, I enclosed the table within a div and toggled visibility using hide and show on the new div. Interestingly enough, introducing the div had no impact on the functionality, only the try/catch block did.

The mystery persists - why does toggling visibility of a table element alone not suffice? Could this be attributed to a Bootstrap 3 quirk, or perhaps the calendar control I'm utilizing...? If anyone has insights to share, please do enlighten me.

Concealing a Bootstrap table on an ASP.NET MVC View using jQuery

Answer №1

Similar questions

Tips on utilizing a local file as a background image URL

Utilizing Javascript to filter data across multiple columns in tables

I'm looking for a way to track the progress of an ajax call. Specifically, I want to know how I

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

Moving list elements by dragging and dropping them within table cells using jQuery

Troubleshooting: PHP Ajax function fails to post data

Issues with HostIP.info's get_json function failing to trigger the jQuery ajax callback

Using jQuery Ajax to retrieve a server XML file response and storing it in a JavaScript array

Having trouble with my basic AJAX request; it's not functioning as expected

Learn the process of including an active class using jQuery from an external active.js file!

Strange gap between element and border on chrome

Beneath the footer lies a blank space in white

Guide to implementing a JQuery datepicker in a basic Rails application

An advanced coding tool that is able to transfer CSS code from the style attribute to the class definition

What is the best way to assign a value to a property in a Controller or Global Variable using jQuery?

Enable or disable options with the user's permission

Is it necessary to use a specific button to submit on Return (Enter)?

HTML5 for advanced positioning and layering of multiple canvases

Exploring the Spotify API with jQuery/ajax to fetch details about songs, artists, and albums

Using Font Awesome Class Aliasing