web-dev-qa-db-fra.com

Comment remplacer un élément HTML par une réponse ajax?

Comment remplacer l'élément html de la réponse ajax? Ce que je sais, c’est de supprimer l’élément. Comment remplacer cette balise supprimée par une réponse ajax? Par exemple:

J'ai un code comme ça:

<ul id="products">
...............
</ul>

Lorsque je clique sur un bouton, l'appel ajax est envoyé au contrôleur codeginter où je reçois les nouvelles données extraites de la base de données et restituées dans une autre vue qui commence par ul et se termine à la fermeture ul. 

Dans la fonction de réussite ajax, je fais ceci:

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?
javascriptphpjqueryhtmlajax
13
Hammad

Vous pouvez utiliser replaceWith (voir: http://api.jquery.com/replaceWith/ )

Comme: $('#products').replaceWith(response);

18
pascalvgemert

EDIT: la fonction replaceWith mentionnée par pascalvgemert est meilleure https://stackoverflow.com/a/19527642/2887034

Créez un emballage autour de lui:

<div id="wrapper">
    <ul id="products">
    ...............
    </ul>
</div>

Maintenant, vous pouvez faire ce qui suit:

$('#wrapper').html(responseData);
3
Kim Hogeling

En supposant que vous remplaciez vos produits, si vous obtenez du code HTML formaté de votre contrôleur, faites simplement ceci.

success : function(response) {
$('#products').html(response);
}

Pas besoin de supprimer la balise <ul>. Vous pouvez simplement remplacer les anciens <li> s par les nouveaux <li> s

2
Salman

Vous pouvez utiliser JQuery avant

$('#products').before("yourhtmlreceivedfromajax").remove();

Ou remplacez simplement le contenu de la div par html$('#products').html("yourhtmlreceivedfromajax");

1
sdespont

Si votre div principale est dans un autre conteneur avec un autre identifiant, vous pouvez le faire:

Basé sur cette structure:

<div id="mainContainer">
    <ul id="products">
         ...............
    </ul>
</div>

Code Javascript utilisant jquery pour ajax 

$.ajax({
  url: "action.php",
  context: document.body
}).done(function(response) {
  $('#products').remove(); // you can keep this line if you think is necessary
  $('mainContainer').html(response);
});
1
Cristian Bitoi

Un moyen facile est d'envelopper votre ul dans un conteneur 

<div id="container">
<ul id="products">
...............
</ul>
</div>

en réponse ajax 

success:function(data){
$("#container").html(data)
}
1
M Khalid Junaid

.remove () retire complètement l'élément du DOM. Si vous voulez simplement remplacer des éléments dans l'élément products, utilisez .ReplaceWith () .

Si vous renvoyez tous les <li> en HTML, vous pouvez utiliser .html ()

1
Andy

Faire ceci

$( "ul#products" ).replaceWith( response );

http://api.jquery.com/replaceWith/

1
zzlalani