CODEWITHSUNDEEP
jqueryjquery-selectors
Mahesh.D
Mahesh.D

Reputation: 1689

How to append ajax html response to next to current div

I've DOM as follows,

<div id='level-1'>
  <ul>
    <li><span><a>Mike</a></span></li>
    <li><span><a>John</a></span></li>
    <li><span><a>Ket</a></span></li>  
 </ul>
</div>

and jQuery is as follows,

$(document).on('click','div[id^=[level] ul li span a',function(){

//Making ajax request,no problem in getting the response
// Here I need to append response next to the current div i,e div#level-1 or div#leve-2
});

ajax response will be same as above DOM except id of the div and content of anchor tag. id will be level-2 or level-3 i,e. +1 to current value of the div.

Upvotes: 5

Views: 58923

Answers (5)

Pradeep .a
Pradeep .a

Reputation: 1

$('.submit').click(function() {
    var html='';
    $.ajax({
        dataType: "json",
        url: "http://www.yoururl.com/",
        success: function (data) {
            var content = 'Title : '+data.Title ;
            content += ' Year : '+data.Year ;
            content += ' Rated : '+data.Rated ;
            content += ' Released : '+data.Released ;
            $("#text").append(content);

        }
    });
});

Upvotes: 0

jeremy castelli
jeremy castelli

Reputation: 1260

Can you add parent div like this?

<div id="levels">
 <div id='level-1'>
  <ul>
   <li><span><a>Mike</a></span></li>
   <li><span><a>John</a></span></li>
   <li><span><a>Ket</a></span></li>  
  </ul>
 </div>
</div>

after you can do this in jquery

$("a").on("click",function(){
    // on ajax success
    $(this).parent("#levels").append("whatever you want!");

});

Upvotes: 2

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

Try

$(document).on('click','div[id^=level] ul li span a',function(){
    var parentDiv = $(this).closest("div[id^=level]"); 

    $.ajax(...).done(function(html) {
        parentDiv.after(html);
    });

});

Upvotes: 11

Eli
Eli

Reputation: 14827

You have a bit of syntax error inside your selector, as well as try to append response to your div in success callback:

$(document).on('click','div[id^="level"] ul li span a',function(){
    var $this = $(this);
    $.ajax({
        ...........
        success: function(response){
            $this.closest('div[id^=level]').append(response)
        },
    }); 
});

Upvotes: 0

Mupps
Mupps

Reputation: 346

For an ajax response you can add your append function to the response of the request e.g: (psuedo code)

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  //add response functionality here e.g
  if(var i; i < response.length; i++) {
   $('#level-'+(i+1)).append('<div id=level-'+(i+1)+' some new data </div>');
  }
});

if you get an array from the ajax request that has multiple rows - you can loop through each row and append the new html to the current div with the .append() jquery function.

http://api.jquery.com/append/

Upvotes: 0

Related Questions