How to replace html element with ajax response?

Question

How do I replace the html element from ajax response? What I know to is to remove the element, how do I replace that removed tag with ajax response? For example:

I have code like this:

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

When I click on a button the ajax call is made to codeginter controller where I recieve the new data pulled from the database and rendered in another view which starts from ul and ends at closing ul.

In ajax success function I do this:

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

You could use `.append` or `.html` based on what you want. Remember, `.remove` removes the element altogether, probably you need `.empty` Show us what was returned from `AJAX`, is it all `
possible duplicate of [Using jQuery to replace one tag with another](http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another) — zzlalani, Oct 22 '13 at 20:25
Do you want to replace the whole UL, or just fill in the contents? — Barmar, Oct 22 '13 at 20:26
Where is the rest of your ajax code? Depending on the format of your response.. if your response is in html format then all you need to do is append the response to `#products` — Trevor, Oct 22 '13 at 20:27

score 27 · Accepted Answer · answered Oct 22 '13 at 20:26

27

You can use replaceWith (see: http://api.jquery.com/replaceWith/)

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

answered Oct 22 '13 at 20:26

pascalvgemert

1,247
1
13
28

It is working but the replaced content is ruptured/not well-formed. Let me tell that the new view has slightly changed HTML. Older one shows results in grid format and newer in list format. For replaceWith function the structure of new and old HTML has to be exactly same? – Hammad Oct 22 '13 at 20:30
Try `$('#products').replaceWith($(response));` maybe. If the styling appears to be different, maybe check your CSS selectors. They need to be the same. – pascalvgemert Oct 22 '13 at 20:37

score 4 · Answer 2 · edited May 23 '17 at 12:34

4

EDIT: The replaceWith function mentioned by pascalvgemert is better https://stackoverflow.com/a/19527642/2887034

Create a wrapper around it:

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

Now you can do the following:

$('#wrapper').html(responseData);

edited May 23 '17 at 12:34

Community

1
1

answered Oct 22 '13 at 20:26

Kim Hogeling

641
6
14

score 4 · Answer 3 · answered Oct 22 '13 at 20:34

Assuming you are replacing your products, if you are getting formatted HTML from your controller then simply do this

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

No need to remove < ul > tag. You can simply replace old < li >s with new < li >s

score 2 · Answer 4 · answered Oct 22 '13 at 20:27

2

You can use JQuery before

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

Or just replace the content of the div with html $('#products').html("yourhtmlreceivedfromajax");

answered Oct 22 '13 at 20:27

sdespont

13,915
9
56
97

score 2 · Answer 5 · answered Oct 22 '13 at 20:28

If your main div is inside another container with another id, you could do so:

Based on this structure:

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

Javascript code using jquery for 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);
});

score 2 · Answer 6 · answered Oct 22 '13 at 20:28

2

An easy way is wrap your ul in a container

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

in ajax response

success:function(data){
$("#container").html(data)
}

answered Oct 22 '13 at 20:28

M Khalid Junaid

63,861
10
90
118

score 2 · Answer 7 · answered Oct 22 '13 at 20:28

2

.remove() takes the element completely out of the DOM. If you simply want to replace stuff inside the products element, you use .ReplaceWith().

If you are returning all <li> as HTML, you can use .html()

answered Oct 22 '13 at 20:28

Andy

49,085
60
166
233

score 2 · Answer 8 · answered Oct 22 '13 at 20:28

2

Do this

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

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

answered Oct 22 '13 at 20:28

zzlalani

22,960
16
44
73

How to replace html element with ajax response?

8 Answers8

Linked

Related