Partial view links not working in Fire Fox
        Posted  
        
            by 
                user329540
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by user329540
        
        
        
        Published on 2012-09-15T09:21:04Z
        Indexed on 
            2012/09/15
            9:37 UTC
        
        
        Read the original article
        Hit count: 666
        
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.
© Stack Overflow or respective owner