jQuery dialog for a partial view is not opening modal

Question

I have built a jquery dialog to show a partial view for entering data.

I have built the action link:

    @Html.ActionLink("Add New Service Provider", "PartialNewCust", "Customer", null,    new { @class = "addServiceProviderLink" })

I have the controller action:

public ActionResult PartialNewCust()
        {
        return PartialView();
        }

And the div / jQuery code:

<div id="AddServiceProvDialog" title="Add Service Provider"></div>


<script type="text/javascript">
var linkObj;
$(function () {
    $(".addServiceProviderLink").button();

    $('#AddServiceProvDialog').dialog(
    {
        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        buttons:
        {
            "Add": function () {
                $("#addProviderForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    $(".addServiceProviderLink").click(function () {
        linkObj = $(this);
        var dialogDiv = $('#AddServiceProvDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            //validation
            var $form = $("#addProviderForm");
            // Unbind existing validation
            $form.unbind();
            $form.data("validator", null);
            // Check document for changes
            $.validator.unobtrusive.parse(document);
            // Re add validation with changes
            $form.validate($form.data("unobtrusiveValidation").options);
            //open dialog
            dialogDiv.dialog('open');
            return false;
        });

    });

});

The partial view renders fine but opens a new page and does not come up as a modal dialog.

What am I doing wrong.

On a side note: my autocomplete code is also not working by my jQuery datetime picker is...

$(document).ready(function() 
{
$(".date").datepicker();
}
);


$(document).ready(function () {
$("#CustByName").autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.CustomerName,
                            value: item.CustomerName,
                            id: item.CustomerID
                        }
                    })
                    );
                }
            });
        },
        minLength: 3
    });

});

Answer 1

My guess is that you misplaced the return false statement in the button's click handler, thus the default behavior is not prevented as you expect, and the link is simply followed:

$(".addServiceProviderLink").click(function () {
    ...
    $.get(viewUrl, function (data) {
        dialogDiv.html(data);
        ...
        dialogDiv.dialog('open');

        // this return statement should be in the "click" handler,
        // not in success callback of the .get() method !
        return false;
    });

});

Your code should then be:

$(".addServiceProviderLink").click(function () {
    ...
    $.get(viewUrl, function (data) {
        ...
    });

    // return here to prevent default click behavior
    return false;
});