DNN jquery error Microsoft JScript runtime error: Object doesn't support this property or method in IE

I'm trying jquery for the first time in Dotnetnuke but it doesn't work. My ascx file look like

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="DesktopModules.demo.WebUserControl" %>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 7500, true);
  });
</script>

and my codefile looks like:

using System;
using System.Web.UI;
using DotNetNuke.Entities.Modules;

namespace DesktopModules.demo
{
    public partial class WebUserControl : PortalModuleBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            try
                {
                if (!Page.IsPostBack)
                {
                    DotNetNuke.Framework.jQuery.RequestRegistration();
                }
            }
            catch (Exception exc)
            {
                DotNetNuke.Services.开发者_Python百科Exceptions.Exceptions.ProcessModuleLoadException(this, exc);
            }
        }
    }
}

In IE I keep getting the error

Microsoft JScript runtime error: Object doesn't support this property or method in IE

on the line

jQuery("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 7500, true);

please help with this error, not sure what else to try.

Are you sure about that "#featured > ul" selector? Usually you refer to the parent element of the ul defining the tabs, not the ul itself. So:

jQuery("#featured").tabs(...

Live example

If the above doesn't do it, some advice:

...not sure what else to try...

Try debugging it. Here in 2011, you have a plethora of tools that you can use to walk through the code at runtime and see exactly what's going wrong.

• IE8 & IE9 have a semi-reasonable debugger and tools built in, or use VS.Net
• IE6 & IE7 don't have anything built in, but you can use VS.Net with them too
• Firefox doesn't have anything built-in, but there's the excellent, and free, Firebug plug-in
• Chrome has a good debugger and tools built in
• Safari has a good debugger and tools built in (you may have to enable the menu item in the options)
• Opera has a good debugger and tools built in

So given the error is on this line:

jQuery("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 7500, true);

I'd break it up so I can see what part is failing:

var x = jQuery("#featured > ul");
x = x.tabs({ fx: { opacity: "toggle"} });
x.tabs("rotate", 7500, true);

...as that's functionally equivalent to the chained (all-one-line) version.

Thanks for the response, I've broken it down as suggested. It fails at the line: x = x.tabs({ fx: { opacity: "toggle"} });

tabs is undefined. I've included the following lines to my ascx page to no avail:

<script type="text/javascript" src="~/Resources/Shared/Scripts/jquery/jquery-ui-1.7.3.custom.min.js"></script>
<link type="text/css" href="~/Resources/Shared/Scripts/jquery/css/ui-lightness/jquery-ui-1.7.3.custom.css" rel="stylesheet" /> 

tabs is still undefined. Is there a right way to include these files?

I can see the likely cause of your problem: .tabs() is not part of jquery - it is part of a different (closely related) script called jquery UI.

You have only added a reference to jquery, and have not added a reference to jquery UI. So .tabs() will give you a "tabs is undefined" error.

You can read about .tabs() here: http://jqueryui.com/demos/tabs/

You can download it from here: http://jqueryui.com/download ... or even better, load it from the Google CDN.

To reference .tabs() you need to add this to the 2nd line of your .ascx file:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"  />