web-dev-qa-db-ja.com

html要素をajax応答に置き換える方法は？

Ajax応答からhtml要素を置き換えるにはどうすればよいですか？私が知っていることは、要素を削除することです、その削除されたタグをajax応答に置き換えるにはどうすればよいですか？例えば：

私はこのようなコードを持っています：

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

ボタンをクリックすると、codeginterコントローラーへのajax呼び出しが行われ、データベースからプルされた新しいデータを受け取り、ulで始まり​​ulを閉じる別のビューでレンダリングされます。

Ajax成功関数でこれを行います：

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

ReplaceWithを使用できます（参照： http://api.jquery.com/replaceWith/ ）

いいね：$('#products').replaceWith(response);

19
pascalvgemert

編集：pascalvgemertで言及されているreplaceWith関数の方が優れています https://stackoverflow.com/a/19527642/2887034

その周りにラッパーを作成します。

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

これで、次のことができるようになりました。

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

製品を交換すると仮定して、コントローラーからフォーマットされたHTMLを取得している場合は、単にこれを実行してください

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

<ul>タグを削除する必要はありません。古い<li>を新しい<li>に置き換えるだけです

2
Salman

JQueryを使用できます before

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

または、divのコンテンツを html$('#products').html("yourhtmlreceivedfromajax");に置き換えるだけです

1
sdespont

メインdivが別のIDを持つ別のコンテナ内にある場合、次のようにすることができます。

この構造に基づいて：

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

ajaxにjqueryを使用するJavascriptコード

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

簡単な方法は、ulをコンテナにラップすることです

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

ajax応答で

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

。remove（） は、DOMから要素を完全に取り出します。 products要素内の要素を単に置き換えたい場合は、 。ReplaceWith（） を使用します。

すべての<li>をHTMLとして返す場合は、 。html（） を使用できます

1
Andy

これを行う

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

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

1
zzlalani