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 <li>? If so you could just use .html which also empties the content and puts the new content. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Oct 22, 2013 at 20:25
possible duplicate of Using jQuery to replace one tag with another — zzlalani
– zzlalani, Commented Oct 22, 2013 at 20:25
Do you want to replace the whole UL, or just fill in the contents? — Barmar
– Barmar, Commented Oct 22, 2013 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
– Trevor, Commented Oct 22, 2013 at 20:27

pascalvgemert · Accepted Answer · 2013-10-22 20:26:25Z

28

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

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

answered Oct 22, 2013 at 20:26

pascalvgemert

1,2471 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hammad Over a year ago

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?

pascalvgemert Over a year ago

Try $('#products').replaceWith($(response)); maybe. If the styling appears to be different, maybe check your CSS selectors. They need to be the same.

Salman · Accepted Answer · 2013-10-22 20:34:08Z

4

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

answered Oct 22, 2013 at 20:34

Salman

743 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:38Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Oct 22, 2013 at 20:26

Kim Hogeling

6616 silver badges14 bronze badges

Comments

sdespont · Accepted Answer · 2013-10-22 20:27:31Z

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, 2013 at 20:27

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Comments

Cristian Bitoi · Accepted Answer · 2013-10-22 20:28:15Z

2

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);
});

answered Oct 22, 2013 at 20:28

Cristian Bitoi

1,5571 gold badge10 silver badges14 bronze badges

Comments

M Khalid Junaid · Accepted Answer · 2013-10-22 20:28:39Z

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, 2013 at 20:28

M Khalid Junaid

64.6k10 gold badges93 silver badges120 bronze badges

Comments

Andy · Accepted Answer · 2013-10-22 20:28:45Z

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, 2013 at 20:28

Andy♦

50.8k62 gold badges181 silver badges240 bronze badges

Comments

zzlalani · Accepted Answer · 2013-10-22 20:28:53Z

2

Do this

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

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

answered Oct 22, 2013 at 20:28

zzlalani

24.6k16 gold badges48 silver badges73 bronze badges

Collectives™ on Stack Overflow

How to replace html element with ajax response?

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related