Question

This function is my ASP.NET MVC Ajax error handler. I want to get the response HTML and add it to a div, but only what’s inside the body. If I embed the straight response, it ends up merging the html and body tags of the error page response with the current page, resulting in messed up text sizes. How can I get JUST the contents of the body? I tried $('body', resp).html() but that doesn’t give me anything.

function crayzeAjaxError(request) {
    var resp = request.response;
    if ($('#crayze-ajax-error-dialog').size() == 0) {
        $('body').append('<div id="crayze-ajax-error-dialog" title="AJAX error" style="display:none;">' +
            '<p>Sorry, the request failed with status code ' + request.status + '</p>' +
            '<button id="crayze-ajax-error-dialog-show-details">Show details</button>' +
            '<object id="crayze-ajax-error-dialog-response"></object>' +
            '</div>');
    }

    $('#crayze-ajax-error-dialog-response').hide();

    $('#crayze-ajax-error-dialog').dialog({ width: 600, height: 400, modal: true });

    $('#crayze-ajax-error-dialog-show-details').click(function () {
        $('#crayze-ajax-error-dialog-response').html($('body', resp).html());
        $('#crayze-ajax-error-dialog-response').show();
    });
}

Answer 1

That should work:

$(resp).find('> *').appendTo($('div#xxx'));