I have an ASP.NET MVC driven site which displays records in a table. The table is a bootstrap 3 table. If there are no records I have a div which is shown. On the advice of another user I modified the view so that the table is rendered alongside my "there are no records" div.
Things I have in my application:
At the top of my JS file I do this...
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");
}
I then have an AJAX call where I get data back:
$("#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 renderData I construct my data then show the table and hide my no-absences div
$("#no-absences").hide("fast", function () {
$("#absencesTable").show("fast");
});
This works fine BTW.
If no data is returned hideAbsences() gets called
if ($("#absencesTable").is(":visible")) {
$("#absencesTable").hide("fast");
$("#no-absences").show("fast");
}
I know I didn't need to check if the table is visible but I'm at the point where I'm trying out everything.
When there is no data my table isn't being hidden. I get both the div and table being shown.
Here is my View for reference.
@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>
When data is returned the display property of the table is set to "display:table" but I don't think that's the reason my show/hide isn't working. I could be wrong. I just want to hide the div and show the table and vice versa not both.
FYI I did try to replicate this in jsFiddle but I couldn't replicate the error (http://jsfiddle.net/f2r9mdah/). I'm thinking something is funky with my jQuery or the View.
Right after a lot of headaches I found a solution. I don't understand why it worked but it does.
When the date in the calendar control is selected I have an ajax call. I wrapped my code in 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;
}
});
Also, just for good measure, I wrapped the table inside a div and used hide and show on the new div. Adding the div didn't make the code work, only the try/catch block did.
I'm not sure why this is working. Why isn't show/hide on a table element enough? Is this a Bootstrap 3 problem, or the calendar control I'm using...? If anyone else has any ideas please let me know.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments