ASP.Net MVC jQuery Dialog Partial

Question

Perhaps someone out there can help me understand what's going on. I'm using jQuery UI dialog() to display html partials in my project. When a user clicks Add New it displays the add client form. However, when the user clicks on the Add or Cancel buttons in the dialog I get an error, "$(this).dialog is not a function". If I remove the open event and display a static form in the dialog the buttons the work fine.

ClientsController

public ActionResult ajaxCreateClient()
{
    Client c = new Client();
    AddToViewData(c); // adds some additional info about client
    return PartialView("__ClientForm", c);
}

View: Contacts/Create

....
<p>
@Html.LabelForField(model => model.Client.Name)  <!-- custom extension that I wrote -->
@Html.TextboxFor(model => model.Client.Name)
<a id="btnAddNew" href="javascript:void()">Add New</a>
</p>
....
<div id="addNew"></div>

jQuery

$(document).ready(function () {
    $("#btnAddNew").click(function () {
        $("#addNew").dialog("open");
    });

    $("#addNew").dialog({
        autoOpen: false,
        title: "Add Client",
        width: 410,
        modal: true,
        resizable: false,
        open: function(event, ui) {
            $(this).load("@Url.Action("ajaxCreateClient", "Clients")");
        },
        buttons:
        {
            "Add": function () {
                // validate() and do something
                $(this).dialog("close");
            },
            "Cancel": function () {
                // do something else
                $(this).dialog("close");
            }
        }
    });
});

Thanks!

Darin Dimitrov · Accepted Answer · 2011-01-26 17:43:10Z

1

Try like this:

$('#addNew').dialog('close');

answered Jan 26, 2011 at 17:43

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

4 Comments

Darin Dimitrov Over a year ago

Hmm, that's strange. Are you getting some javascript error? Try removing the code preceding the call to this method.

Darin Dimitrov Over a year ago

@gnome, I've tried running the example and it worked fine for me with both $(this).dialog('close'); and $('#addNew').dialog('close');. Try printing console.log($(this)); to the FireBug console to see why does it say that .dialog is an undefined function.

gnome Over a year ago

Well, says failed to load /Contacts/Create; which is the view in the above code snippet. Really has me stumped. Got it to work in jsfiddle, thinking it me be related to something else now.

gnome Over a year ago

Issue was related to something else in the partial. Appreciate the help though.

Collectives™ on Stack Overflow

ASP.Net MVC jQuery Dialog Partial

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related