I have a MVC4 asp.net application, I have two layouts a main layout for the main
page and a second layout for the nested pages. The problem I have is with the second layout, on this layout I call a
partial view which has my navigation links. In IE the navigation menu displays fine and when each item is clicked it navigates as expected. However in FF when the
page renders the navigation bar is displayed but it has no 'click functionality' if you will its as if its simply text.
My layout of nested page:
<header>
<img src="../../Images/fronttop.png" id="nestedPageheader" alt="Background Img"/>
<div class="content-wrapper">
<section >
<nav>
<div id="navcontainer">
</div>
</nav>
</section>
<div>
</header>
The script to retreive
partial view and information for dynamic links on layout
page.
<script type="text/javascript">
var menuLoaded = false;
$(document).ready(function () {
if($('#navcontainer')[0].innerHTML.trim() == "")
{
$.ajax({
url: "@Url.Content("~/Home/MenuLayout")",
type: "GET",
success: function (response, status, xhr)
{
var nvContainer = $('#navcontainer');
nvContainer.html(response);
menuLoaded = true;
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
var nvContainer = $('#navcontainer');
nvContainer.html(errorThrown);
}
});
}
});
</script>
May
partial view:
@model Mscl.OpCost.Web.Models.stuffmodel
<div class="menu">
<ul>
<li><a>@Html.ActionLink("Home", "Index", "Home")</a></li>
<li><a>@Html.ActionLink("some stuff", "stuffs", "stuff")</a></li>
<li> <h5><a><span>somestuff</span></a></h5>
<ul>
<li><a>stuffs1s</a>
<ul>
@foreach (var image in Model.stuffs.Where(g => g.Grouping == 1))
{
<li>
<a>@Html.ActionLink(image.Title, "stuffs", "stuff", new { Id = image.CategoryId }, null)</a>
</li>
}
</ul>
</li>
</ul>
</il>
</ul>
</div>
I need to know why this works fine in IE but why its not working in FF(all versions). Any assistance would be appreciated.
