Jquery Dialog Problem

Question

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/jquery.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

score 6 · Answer 1 · edited May 23 '17 at 12:09

6

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.

edited May 23 '17 at 12:09

Community

1
1

answered Oct 02 '10 at 11:59

Nick Craver

623,446
136
1,297
1,155

@Light - You should be getting an error on page startup then, less these scripts just aren't in the correct directory, what's your console saying? You should be getting JavaScript errors or 404s. – Nick Craver Oct 02 '10 at 12:47
I am sure that my scripts in the right directory .. the console say nothing but – Besher Oct 03 '10 at 09:29
Uncaught TypeError: Object # has no method 'dialog' – Besher Oct 03 '10 at 09:29
5

@Light - Just for kicks, if you use the google CDN version above, do you have any issues? If you *still* have issues...make sure you're not including jQuery twice in the page, if it's included later it'll overwrite `$`, erasing the `$.ui` methods on it. – Nick Craver Oct 03 '10 at 10:20
Nick i can't use google CDN for google restriction ... and i still don't know whats' the matter with this dialog – Besher Oct 06 '10 at 08:44
@NickCraver - Thanks for the comment. I was having the same issue, but it was due to including jQuery twice (which I didn't realize I was doing - and I didn't realize it would even be a problem). – JasCav Jan 03 '12 at 21:24

score 4 · Accepted Answer · answered Oct 06 '10 at 11:14

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

Jquery Dialog Problem

2 Answers2

Linked