How can I close one jQuery UI Dialog and focus on another?

Question

After my call to $.ajax(), all UI Dialogs currently close and the page appears to do a full postback as per firebug--this is not what I want. I want the List ** UI Dialog** (read: partial view) visible, then the "Create" button is pressed to open another UI dialog for creating an address. I want to ajax post the data (preferably strongly-typed, though I couldn't figure out how to do that, hence the ugly data: value in the &.ajax call), close the create address dialog and refresh the List dialog--never "returning" to the initial standard view before List was opened.

in the Create partial view:

<input type="submit" value="Create" onclick="createaddress(<%= ViewData["ProfileID"] %>); return false;" />

in the List partial view

<script type="text/javascript">
function createaddress(id) {
        $.ajax({
            type: "POST",
            url: "/Address/Create/" + id,
            data: "address1=" + document.getElementById('Address1').val() + "&address2=" + document.getElementById('Address2').val() +
                "&city=" + document.getElementById('City').val() + "&state=" + document.getElementById('State').val() + "&zip=" + document.getElementById('Zip').val() +
                "&zipplus=" + document.getElementById('ZipPlus').val(),
            success: function (msg) {
                $("#dialog-address-create").dialog('close');
            }
        });
    }
</script>

jfar's post does not have sufficient jQuery UI Dialog code to do what I want, and I think his post involved standard views where I am using partial views--but I am using his ModalViewEngine class.

Also, subsequent clicks on Create produce a jQuery UI Dialog with old values in my textboxes--how do I reset these?

Answer 1

Try putting quotes around viewdata:

<input type="submit" value="Create" 
    onclick="createaddress('<%= ViewData["ProfileID"] %>'); return false;" />

Or even better unobtrusively:

<% using (Html.BeginForm("create", "address", new { id = ViewData["ProfileID"] }, FormMethod.Post, new { id = "theForm" })) { %>
    <!-- some input fields -->
    <input type="submit" value="Create" />
<% } %>

And then attach to the submit event of the form:

$(function() {
    $('#theForm').submit(function() {
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (msg) {
                $("#dialog-address-create").dialog('close');
            }
        });
        return false;
    });
});