jQuery UI dialog and ASP.NET Ajax Library hover conflict

I get an error when using a jQuery UI dialog with the ASP.NET Ajax Library beta 0911 in an MVC app. To reproduce it create a new MVC app and change the head to the following:

<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<!-- Added code -->
<link href="../../Content/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />   
<script src="../../Scripts/MicrosoftAjax/Start.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax/Extended/ExtendedControls.debug.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    Sys.loader.defineScripts(null, [
         { name: "jQueryUI",
             releaseUrl: "%/../jquery-ui-1.7.2.custom.min.js",
             debugUrl: "%/../jquery-ui-1.7.2.custom.min.js",
             dependencies: ["jQuery"],
             isLoaded: !!(window.jQuery && jQuery.ui)
         }
        ]);

    Sys.require([Sys.scripts.jQuery, Sys.scripts.jQueryUI]);
</script>
<!-- End Added code -->

Place the scripts from the ASP.NET Ajax Library in the MicrosoftAjax folder under the default Scripts folder in the MVC app. I used the smoothness theme from the jQuery UI. All jQuery UI options were included.

Also add the following after the closing p tag in the index view.

<div id="resultdialog">
    <label for="result">Result:</label>
    <%= Html.TextBox("result")%>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#resultdialog").dialog()
    });
</script>

Push F5 to run and you should get the following error.

The 'hover' plugin requires Sys.scripts.ExtendedHover to be loaded with a call to Sys.require() first.

Here is a snippet from line 97 in jquery-ui-1.7.2.custom.min.js

i=c('<a href="#"/>').addClass("ui-dialog-titlebar-close ui-corner-all").attr("role","button").hover(function(){i.addClass("ui-state-hover")},function(){i.removeClass("ui-state-hover")})

My guess is the hover method call in the snippet above conflicts with the following snippet from ExtendedControls.js.

name: "ExtendedHover",
releaseUrl: "%/extended/hoverextender/hoverbehavior.js",
debugUrl: "%/extended/hoverextender/hoverbehavior.debug.js",
behaviors: [{name: "hover", typeName: "Sys.Extended.UI.HoverBehavior" }],
executionDependencies: ["ExtendedBase", "ExtendedCommon"]

Has anyone seen this before? I would figure undoing the above code from the Ajax Library would fix it. How would I do that? Without modifying the ExtendedContorls.js file of course. Any help would be appreciated.

ansaurus

tags:

views:

answers:

jQuery UI dialog and ASP.NET Ajax Library hover conflict

related questions