Currently, I am working with Visual Studio 2013 MVC and have a situation regarding the styling of my navbar in _Layout. The navbar includes a messages dropdown menu that utilizes CSS and JS extensively.
Interestingly, when I load the messages as a partial view, everything functions perfectly fine. However, attempting to reload the data using JQuery on its own has proven to be challenging. Placing the content inside a div causes a complete breakdown of the styles, almost as if the CSS is not being recognized. Even changing the id of a parent div leads to a similar outcome. For reference, I am utilizing AdminLTE 2 for this project.
Here are some examples:
The following code snippet works without issues
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
@Html.Action("Notifications", "Home")
</li>
However, simply adding a surrounding div breaks the style
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<div>
@Html.Action("Notifications", "Home")
</div>
</li>
Furthermore, here is how I'm trying to refresh that particular section:
<script>
window.onload = function () {
refreshNotifications();
}
function refreshNotifications() {
console.log("Reloading...");
$.ajax({
url: 'Home/Notifications',
type: 'get',
success: function(result) {
//$("#partialsgpthing").html(result);
// $("#navbar").html(result);
}
});
setTimeout('refreshNotifications()', 30000);
}
</script>
In addition, I have a
public PartialViewResult Notifications()and this is what the partial view looks like:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">@ViewBag.Notifications</span>
</a>
<ul class="dropdown-menu">
<li class="header">Tiene @ViewBag.Notifications notificaciones</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu" style=" max-height: 200px; margin: 0; padding: 0; list-style: none; overflow-x: hidden;">
@foreach (string notification in ViewBag.NotificationMsgs) {
<li>
@{string[] detail = notification.Split('|');}
<!-- start notification -->
<a href="@detail[8]">
<i class="fa @detail[3] @detail[4]"></i> @detail[5]<br />@detail[2]
</a>
</li>
}
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">Ver todas</a></li>
</ul>
I am seeking input or alternative methods to consistently reload that particular section while maintaining the existing styles. Preferably, any solution that does not involve using a div would be ideal. It's worth noting that data is being loaded from the database, hence the need to pass through the controller.
For context, in _Layout, only the <body> of the AdminLTE template is placed, whereas the main area of the page contains @renderbody(), which renders the index file containing the AdminLTE template and associated scripts.