Jquery Dialog Problem

Hi every body i am developing a MVC application, and i want to use Jquery dialog . i have the following scenario : I have Telerik tree view, and when i click on any node i want the dialog to open and display information about this node. First i add the following script to initialize the dialog :

    $(document).ready(function () {
        $("#dialog").dialog("destroy");
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 500,
            width: 500,
            modal: true,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                }
            }
        });
    });

then wrote the following code in OnSelect (client event of Telerik )

        $('#dialog-form').dialog('open');
        $('#dialog-form').load('<%= Url.Action("SomeAction", "SomeController") %>');

in my master page i have added the script files that are necessary to make the modal work like this :

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.dialog.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.button.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.draggable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.position.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquer开发者_StackOverflow社区y.ui.resizable.js") %>"></script>

and when i click on the nodes of the tree nothing happed the chrome developer tools show the following error :

Uncaught TypeError: Object # has no method 'dialog'

it seems that there is an error with script registration or some thing like that

any help with this

You're need to adjust the dependency order so it's correct, it should be:

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.mouse.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.draggable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.button.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.position.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.resizable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.dialog.js") %>"></script>

Note the addition of ui.mouse.

But...a much simpler approach would just be to include jQuery UI as a single file, if you're using all the components it's simpler, easier to update and fewer HTTP requests, for example:

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

You can download the library as a single file here: jQuery UI Download.

Or from a CDN, for example the latest (as of the time of this answer) from Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

For benefits (they're very similar to the benefits of include jQuery itself from the CDN) see this question.

Problem solved... when you want to use Telerik Components in your views, you need to register your scripts with script manager like this :

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
   .Add("jquery-1.4.2.js")
   .Add("jquery.ui.core.js")
   .Add("jquery.ui.widget.js")
   .Add("jquery.ui.mouse.js")       
   .Add("jquery.ui.draggable.js")
   .Add("jquery.ui.button.js")       
   .Add("jquery.ui.resizable.js")
   .Add("jquery.ui.dialog.js")
   .Add("jquery.ui.position.js")

);
%>

Regards