Update div with jQuery ajax response html

Question

I am trying to update a div with the content from an ajax html response. I beleive I have the syntax correct, however the div content gets replaced with the entire HTML page response, instead of just the div selected in the html response. What am I doing wrong?

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

score 83 · Accepted Answer · answered Aug 05 '13 at 18:10

83

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')
        }
    });
});

answered Aug 05 '13 at 18:10

adeneo

312,895
29
395
388

1

hello, if possible could you explain what $('
').append(data) is doing in this code? – thedeepfield Aug 06 '13 at 16:19
4

`find()` only finds children, not elements that are in the root of `data`, so appending `data` to an empty `div` ensures that all elements in `data` are in fact children, and that `find()` will always work (as long as the element exists in data). – adeneo Aug 06 '13 at 16:38
so your basically creating a blank div, appending the html response to it, using find() to find showresults, then copying the html within that div? What does `
` do? looking at the doc i thought you were looking for a selector. Thanks for your patients.. it really helps to understand this. – thedeepfield Aug 06 '13 at 16:45
6

`$('
')` creates a new empty element in memory, then data is appended to that element, and everything in data is now children inside the empty element, and `find()` only searches for children, so that's why it's done that way. Another options would be to use `filter()`, but that only finds root elements, so you usually have to decide on either `find()` or `filter()` depending on hte HTML, and as I didn't really know what the HTML looked like, I used the "works everywhere" solution of appending to an empty element and using `find()`. – adeneo Aug 06 '13 at 16:51

Lemayzeur · Answer 2 · 2018-05-18T03:18:46.060

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()

// codes

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

I see. In my case I simply needed to replace .text() with .html() ... $('.some_content').html(data) — gseattle, Apr 05 '21 at 08:19

score 3 · Answer 3 · answered Sep 08 '16 at 09:38

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.

Update div with jQuery ajax response html

3 Answers3

Linked

Related