Home/ Questions/Q 790439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:40:54+00:00

Recently, I was trying to prototype some jQuery-based menu into ASP.NET MVC. Just to

  • 0

Recently, I was trying to prototype some jQuery-based menu into ASP.NET MVC. Just to name two examples here:

  1. plugins.jquery.com/project/columnview

  2. http://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 http://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 😀

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Epic Fail..
    Turns out that it has something to do with the XHTML validation

    ASP.Net MVC by default has the following DocType

    <!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") %>" />

    Turns out that IE & FireFox does not like the end tag. It prefers

    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>"></script>

    The closing tag </script> is the cause.

    • 0