Recently, I was trying to prototype some jQuery-based menu into ASP.NET MVC. Just to name two examples here:
plugins.jquery.com/project/columnview
www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Their demo page looks great, but when I integrate their sample code into MVC, the script no longer works in IE and
FireFox, but it seems to work just fine under Google Chrome. Can someone kindly enough to point out what I missed? I will be honest here. I am still new to JavaScript, so it is still a learning phase to me, so any help is highly appreciated.
I have placed a copy of my VS2010 solution zip file @ http://db.tt/0UNDkN
Here is what I did.
In the Site.Master, I have something like
<body>
<div class="page">{truncated...}</div>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</body>
And inside View file, I have the following
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="original">
{some demo block, copied from javascript demo}
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" />
<script type="text/javascript">
$(document).ready(function () {
$('#original').columnview();
});
</script>
</asp:Content>
Compiled the code and ran it under IE. Ideally, it should work like the demo in www.christianyates.com/blog/jquery/finder-column-view-hierarchical-lists-jquery, but in reality, it only displays unordered list in plain view. (If you download the solution file and run it, you should be able to repro this as well). Next, tried with
FireFox, not working either, same result as IE. Finally, when I try it under Google Chrome 4.1 (lastest version), and the script displays just fine. Really puzzling here :-/
Thank you for reading :D
