web-dev-qa-db-fra.com

Mettre à jour div avec jQuery ajax response html

J'essaie de mettre à jour une div avec le contenu d'une réponse ajax html. La syntaxe est correcte, mais le contenu de la div est remplacé par la réponse de la page HTML entière, au lieu de la div sélectionnée dans la réponse HTML. Qu'est-ce que je fais 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>
jqueryajaxasp-classicgetreplacewith
37
thedeepfield

Vous définissez le code HTML de #showresults de quel que soit data, puis le remplacer par lui-même, ce qui n’a pas beaucoup de sens?
Je suppose que vous essayiez vraiment de trouver #showresults dans les données renvoyées, puis mettez à jour le #showresults élément dans le DOM avec le code HTML de celui de l’appel 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')
        }
    });
});
68
adeneo

Presque 5 ans plus tard, je pense que ma réponse peut réduire un peu le travail ardu de nombreuses personnes.

Mettre à jour un élément dans le DOM avec le code HTML de celui de l'appel ajax peut être réalisé de cette façon

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

ou avec replaceWith()

// codes

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

Il est également possible d'utiliser jQuery . Load ()

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

contrairement à $ .get (), nous permet de spécifier une partie du document distant à insérer. Ceci est réalisé avec une syntaxe spéciale pour le paramètre url. Si un ou plusieurs espaces sont inclus dans la chaîne, la partie de la chaîne qui suit le premier espace est supposée être un sélecteur jQuery qui détermine le contenu à charger.

Nous pourrions modifier l'exemple ci-dessus pour n'utiliser qu'une partie du document récupéré:

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

Lorsque cette méthode est exécutée, elle récupère le contenu de ajax/test.html, mais jQuery analyse ensuite le document renvoyé pour rechercher l'élément avec un ID de conteneur. Cet élément, ainsi que son contenu, est inséré dans l'élément avec un ID de résultat et le reste du document récupéré est ignoré.

1
Endless