wake-up-neo.com

Wie man HTML-Element mit Ajax-Antwort ersetzt?

Wie ersetze ich das HTML-Element von Ajax Response? Was ich weiß, ist das Element zu entfernen. Wie ersetze ich das entfernte Tag durch eine Ajax-Antwort? Zum Beispiel:

Ich habe folgenden Code:

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

Wenn ich auf eine Schaltfläche klicke, wird der Ajax-Aufruf an den Codeginter-Controller gerichtet, bei dem die neuen Daten aus der Datenbank abgerufen und in einer anderen Ansicht gerendert werden, die mit ul beginnt und mit dem Schließen von ul endet. 

In der Ajax-Erfolgsfunktion mache ich das:

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

Sie können replaceWith verwenden (siehe: http://api.jquery.com/replaceWith/ ).

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

18
pascalvgemert

BEARBEITEN: Die von pascalvgemert erwähnte replaceWith-Funktion ist besser https://stackoverflow.com/a/19527642/2887034

Erstellen Sie einen Wrapper darum:

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

Jetzt können Sie Folgendes tun:

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

Angenommen, Sie ersetzen Ihre Produkte. Wenn Sie formatiertes HTML von Ihrem Controller erhalten, tun Sie dies einfach

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

<Ul> -Tag muss nicht entfernt werden. Sie können alte <li> s einfach durch neue <li> s ersetzen

2
Salman

Sie können JQuery vor verwenden.

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

Oder ersetzen Sie einfach den Inhalt des div durch html$('#products').html("yourhtmlreceivedfromajax");

1
sdespont

Befindet sich Ihr Haupt-Div in einem anderen Container mit einer anderen ID, können Sie dies tun:

Basierend auf dieser Struktur:

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

Javascript-Code, der Jquery für Ajax verwendet 

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

Eine einfache Möglichkeit ist, Ihre ul in einen Behälter zu verpacken 

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

in Ajax Antwort 

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

.remove () nimmt das Element vollständig aus dem DOM heraus. Wenn Sie einfach Elemente innerhalb des products-Elements ersetzen möchten, verwenden Sie .ReplaceWith () .

Wenn Sie alle <li> als HTML zurückgeben, können Sie .html () verwenden.

1
Andy

Mach das

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

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

1
zzlalani