jquery - success - print ajax response in html

Actualizar div con jQuery ajax response html

Question

Estoy tratando de actualizar un div con el contenido de una respuesta ajax html. Creo que tengo la sintaxis correcta, sin embargo, el contenido div se reemplaza con la respuesta completa de la página HTML, en lugar de solo la div seleccionada en la respuesta html. ¿Qué estoy haciendo mal?

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

Answer 1

Casi 5 años después, creo que mi respuesta puede reducir un poco el trabajo duro de muchas personas.

Actualizar un elemento en el DOM con el HTML desde el de la llamada ajax se puede lograr de esa manera

$(''#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'')
     },
});

o con replaceWith()

// codes

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

Answer 2

Está configurando el html de #showresults de cualquier data y luego lo reemplaza consigo mismo, lo que no tiene mucho sentido.
Supongo que realmente intentas encontrar #showresults en los datos devueltos y luego actualizas el elemento #showresults en el DOM con el html desde el de la llamada ajax:

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

Answer 3

También es posible usar jQuery''s .load()

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

a diferencia de $ .get (), nos permite especificar una parte del documento remoto que se insertará. Esto se logra con una sintaxis especial para el parámetro url. Si se incluyen uno o más caracteres espaciales en la cadena, se supone que la parte de la cadena que sigue al primer espacio es un selector jQuery que determina el contenido que se va a cargar.

Podríamos modificar el ejemplo anterior para usar solo una parte del documento que se obtiene:

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

Cuando se ejecuta este método, recupera el contenido de ajax / test.html, pero luego jQuery analiza el documento devuelto para encontrar el elemento con una ID de contenedor. Este elemento, junto con su contenido, se inserta en el elemento con una ID de resultado, y el resto del documento recuperado se descarta.