JQuery menu plugins under ASP.NET MVC seem to only work in Chrome but not IE and FireFox
I recently tried to prototype some jQuery menu in ASP.NET MVC. Just give 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 my sample code in MVC, the script no longer works in IE and FireFox, but it seems to work fine in Google Chrome. Can someone please point out what I missed out on? I'll be honest here. I'm still not familiar with JavaScript, so it is still a learning step for me, so any help is greatly appreciated.
I put a copy of my zip file for VS2010 @ http://db.tt/0UNDkN
Here's what I did. In 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 the 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 a demo at www.christianyates.com/blog/jquery/finder-column-view-hierarchical-lists-jquery, but it actually displays an unordered list in a simple way. (If you download the solution file and run it, you can also reproduce it.) Then tried with FireFox without working with either one or IE. Finally when I try to use it in Google Chrome 4.1 (latest version) and the script displays just fine. This is actually puzzling: - /
Thanks for reading: D
a source to share
Epic Fail .. It turns out that it has something to do with XHTML validation
ASP.Net MVC has the following DocType by default
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
In the original code, I had
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" />
It turns out that IE and FireFox don't like the end tag. He prefers
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>"></script>
The final tag </script>
is the reason.
a source to share