JQuery UI Dialog Box and Ajax.BeginForm

Question

Hi,

I have a JQuery UI dialog box. The app allows people to create lists and this dialog lets them specify the listname. Here it is:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

    <% using (Ajax.BeginForm("CreateList", new AjaxOptions {UpdateTargetId="mylists"})) %>

            <p>
                <label for="listname">List Name:</label>
                <%= Html.TextBox("listname") %>
                <%= Html.ValidationMessage("listname", "*") %>
            </p>

            <%=Ajax.ActionLink("Create", "CreateList", new AjaxOptions{}) %>



    <% } %>

I tried making this a regular HTML form and calling the method from JQuery. I'm not sure if I was doing something wrong but the object that was sent back to the controller was null. I'm assuming this is because Jquery doesn't serialize and that I have to specify properties such as name="some form field", etc. in the post action. Is this a correct assumption?

In any event, given the difficulties with starting a post action from JQuery, I tried using the Ajax.ActionLink and Ajax.BeginForm.

When I click for the dialog to show up, nothing comes up now. I'm wondering if this is a timing issue? On $(document).ready(), I am initializing a dialog before loading the partial view:

$("#listdiv").dialog({
                autoOpen: false,
                buttons: {
                    Create: function() {
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }

            });

I then add an event handler for a click event:

$("#newlist").click(function() {
                $("#listdiv").load("Record/CreateList");
                $("#listdiv").dialog("open");

            });

Not sure exactly why a partial view doesn't show up in this case.

Answer 1

First, cache the dialog, then update its HTML

var dialog=$('#newlist').dialog({
  //dialog options
});

$.ajax({
  url: 'Record/CreateList',
  success: function(html){
    console.log(html);//look good?
    dialog.html(html).dialog('open');
  }
});