CODEWITHSUNDEEP
asp.net-mvcjquery-ui
Chris Nevill
Chris Nevill

Reputation: 6161

JQuery UI Dialog not found

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.

Upvotes: 0

Views: 2391

Answers (2)

Chris Nevill
Chris Nevill

Reputation: 6161

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!

Upvotes: 1

Code Monkey
Code Monkey

Reputation: 643

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?

Upvotes: 1

Related Questions