JQuery UI Dialog not found

Question

I'm trying to implement the pop up contact us dialog in this tutorial: http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx

I have a working version of the solution that runs absolutely fine.

While trying to integrate this into my own solution I've ran into a problem.

I've created a contactdialog.js file in my scripts directory:

    /// <reference path="jquery-1.6.2.min.js"/>
/// <reference path="jquery-ui-1.8.11.js"/>
$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("</div>")
        .addClass("dialog")
        .attr("id", $(this)
        .attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

Then in my view I have near the top:

<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="~/Scripts/contactdialog.js" type="text/javascript"></script>

And further down:

@Html.ActionLink("Contact Us", "ContactUs", "Home", null, new { @class = "openDialog", data_dialog_id = "emailDialog", data_dialog_title = "Contact Us"})

Now my link succesfully enters the javascript function, and seems to do the add class OK. However when it gets to the .dialog function it throws the following exception: "Object doesn't support property or method dialog"

Which would seem to indicate the jquery-UI hasn't been loaded.
However I can't figure out why? If I load up the page in Chrome and check the page source the links to the jquery-ui-1.8.11.js happily open ok.

Code Monkey · Accepted Answer · 2012-09-04 18:28:12Z

1

Some hints:

Is jqueryUI being loaded by another partial view (which is why you see it get loaded in developer tools) but the JS that calls .dialog is being rendered in a different partial view?

Try placing jqueryUI in the master/layout views?

answered Sep 4, 2012 at 18:28

Code Monkey

6431 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Nevill Over a year ago

Thanks Ashish. The view that I'm using however is the _Layout.cshtml that's part of the MVC 4 template. I've tried adding it to the home index view, but this has made no difference.

Chris Nevill · Accepted Answer · 2012-09-05 10:05:07Z

1

I've changed to using bundling:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")        
@Scripts.Render("~/bundles/contact")

For reasons completely beyond me at present this has kicked it into life, and the dialog is now being presented!

answered Sep 5, 2012 at 10:05

Chris Nevill

6,19011 gold badges48 silver badges83 bronze badges

1 Comment

Chris Nevill Over a year ago

Based on this post here stackoverflow.com/questions/9607164/… I believe the fact that I had the unobtrusive ajax script in there may have been the cause of my problem.

Collectives™ on Stack Overflow

JQuery UI Dialog not found

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related