CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Spencer
Spencer

Reputation: 22418

Jquery load function that will append onto HTML already present

I am trying to make an AJAX call which will append html i.e. add additional html to what is already present between the tags. Here is what my load function looks like.

<script>
    $(document).ready(function(){
      $(".tid-select").change(function(){
        $(".tid-list").load("/saffron_main/test");
      });
    });
</script>

How would I modify this function in order to get it to append to the class .tid-list. Thanks in advance.

Upvotes: 0

Views: 631

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 12503

You have to get data via ajax and use $('.tid-list').append(data);

<script>
$(document).ready(function(){
  $(".tid-select").change(function(){
   $.get("/saffron_main/test",function(data){
    $('.tid-list').append(data);
   });
 });
});
</script>

You may also use $('.tid-list').prepend(data); to insert before the current HTML.

Upvotes: 4

dtanders
dtanders

Reputation: 1845

Just change the change handler

$(".tid-select").change(function(){
   $.get("/saffron_main/test", function(data){
      $(".tid-list").append(data);
   });
});

edit: yeah, the other guys are right that append makes more sense

Upvotes: 0

jeffreydev
jeffreydev

Reputation: 1722

Or instead of replacing the html you can just load the data into a variable and then add it to the DOM.

Example:

$.ajax({
    url: '/saffron_main/test',
    success: function (data) {
        $('.tid-list').append(data);
    }
});

This way events that have been bound to the existing html will stay bound.

Upvotes: 3

Related Questions