Jquery Ajax Post Success Will Not Update Div, Displays Partial View

I can't seem to get a jQuery AJAX post to update a div with the returned partial view. The partial view is returned with the correct html and displays in its entirety within the br

Solution 1:

However you are rendering your partial view put it inside a div.

 <div id="partialSummaryDiv">@{Html.RenderPartial("YourPartial");}</div>

On the success of the Ajax call call .html() on the div not on the partial view.

  success: function (data) {
                $('#partialSummaryDiv).html(data);
          }

It is not displaying in the Div because you did not define the partial view in the div. If you want the partial view hidden until the ajax success comes through, you will need to add additional logic

Solution 2:

The problem was that the event was never being hooked up to the forms submit due to it being added to the page after the DOM was ready.

I was able to fix the issue by using .on on the empty placeholder div.

    $('#CreatePlaceholder').on('submit', '#CreateForm', function (event) {
        event.preventDefault();

        var formData = $(this).serialize();
        formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();

        $.ajax({
            type: 'POST',
            url: '/Test/Create',
            data: formData
        }).done(function (data) {
            $('#DetailsPlaceholder').html(data);
        })
    });