Update div with jQuery ajax response html Update div with jQuery ajax response html ajax ajax

Update div with jQuery ajax response html


You are setting the html of #showresults of whatever data is, and then replacing it with itself, which doesn't make much sense ?
I'm guessing you where really trying to find #showresults in the returned data, and then update the #showresults element in the DOM with the html from the one from the ajax call :

$('#submitform').click(function () {    $.ajax({        url: "getinfo.asp",        data: {            txtsearch: $('#appendedInputButton').val()        },        type: "GET",        dataType: "html",        success: function (data) {            var result = $('<div />').append(data).find('#showresults').html();            $('#showresults').html(result);        },        error: function (xhr, status) {            alert("Sorry, there was a problem!");        },        complete: function (xhr, status) {            //$('#showresults').slideDown('slow')        }    });});


Almost 5 years later, I think my answer can reduce a little bit the hard work of many people.

Update an element in the DOM with the HTML from the one from the ajax call can be achieved that way

$('#submitform').click(function() {     $.ajax({     url: "getinfo.asp",     data: {         txtsearch: $('#appendedInputButton').val()     },     type: "GET",     dataType : "html",     success: function (data){         $('#showresults').html($('#showresults',data).html());         // similar to $(data).find('#showresults')     },});

or with replaceWith()

// codessuccess: function (data){   $('#showresults').replaceWith($('#showresults',data));},


It's also possible to use jQuery's .load()

$('#submitform').click(function() {  $('#showresults').load('getinfo.asp #showresults', {    txtsearch: $('#appendedInputButton').val()  }, function() {    // alert('Load was performed.')    // $('#showresults').slideDown('slow')  });});

unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

$( "#result" ).load( "ajax/test.html #container" );

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.