Ajax provider returns too much html Asp.Net

Question

I am trying to make a partial update of a page in Asp.net. I call my .aspx page through ajax to build the content i need to append into a specific spot on my page and previously this has worked for me.

My current problem is that I get the full html instead of just the element and I can't figure out what I did right previously.

                var dataObj = { 'includeInactive': includeInactive, 'MasterPersonId': masterId, 'sChosenSSN': chosenSSN };

        $.ajax({
            url: 'clientside/providers/MergeJournalProviders/---ShowSomeDuplicateCivilRegistrationNumbers.aspx',
            dataType: 'html',
            data: dataObj,
            cache: false,
            async: true,
            beforeSend: function (xhr) {
            },
            success: function (result) {

                if (result != "" && result != undefined) {

                    //var htmlToAppend = $(result).find("#DuplicatePeople div").html();
                    //her vælger jeg gruppen(group) der skal opdateres
                    var oldDiv = $('#DupPpl');
                    var newDiv = jQuery(result).find('#DupPpl').html()
                    oldDiv.replaceWith(newDiv);
                    //$('#DupPpl').empty();
                    //$('#DupPpl').html(jQuery(result).find('#DuplicatePeople').html());
                    //$('#DupPpl').remove();
                    //$('#DupPpl').append(result);
                    //$('#DupPpl').append(result);


                }
            }
        });

Answer 1

If your result has all the html from your aspx file and an element with id "DupPpl" exists in that html you can get the element using jquery contents:

try:

var oldDiv = $('#DupPpl');
var newDiv = $(result).contents().find('#DupPpl').html();
oldDiv.replaceWith(newDiv);

Use the same code to get other elements:

$(result).contents().find('YOUR_ELEMENT_ID').html();

Answer 2

this is the unfortunate consequence of using Update Panels. Their simplicity comes with a cost of higher over head. What happens is that not only do the contents of the panel get posted back but so too does all the view states and HTML headers, etc. More efficient partial post backs can be accomplished using jQuery, page methods, and web services. Check out this article: http://msdn.microsoft.com/en-us/library/0b283bse%28v=vs.71%29.aspx