Load file with AJAX and append to

Question

On this test page:

http://sapaacademy.net/working/jQueryAjaxExercises.html

1) click on first button <a class="btn_quizTEST" data-exercisename="FL1E1.html">Start Exercise I </a>- see 1st file loaded

2) click on 2nd button <a class="btn_quizTEST" data-exercisename="FL1E2.html">Start Exercise II </a>- see 1st file overriden with 2nd

3) click 3rd button <a class="btn_quizTEST" data-exercisename="SL1E3.html">Start Exercise III </a>-- see all previous loaded files overriden

I know it's because of:

   $.ajax({
    // code...
 success:function(result){
      $('.exspace').html(result); <-- overrides all other loaded files
    }});

How do I prevent overriding and append a file to corresponding field?

FL1E1.html should load only into it's corresponding div

FL1E2.html should load into it's corresponding div

SL1E3.html should load into it's corresponding div

Any advice would be appreciated

  <script> </script> is in the DOM

Answer 1

Wouldn't you just change html() with append() ?

var self = this;

$.ajax({
    // code...
   success:function(result){
       $(self).closest('.exBtnWrap').find('.exspace').append(result);
   }
});

Answer 2

For each div create id and and code ajax like this,

function loadFile(id){
$.ajax({
// code...
success:function(result){
  $('#'+id).html(result); <-- overrides all other loaded files
}});
}

<a class="btn_quizTEST" data-exercisename="FL1E1.html" id="file1"    
      onclick="loadFile(this.id)">Start Exercise I </a>

Answer 3

As i see your page you have a setTimeout() method which has jQuery's .slideDown() method, so you can do your ajax call in the .slideDown()'s callback function:

var $this = $(this);

setTimeout(function () {
    $('.exspace').slideDown('fast', function(){
          $.ajax({
             // code...
          success:function(result){
                $this.closest('.exBtnWrap').find('.exspace').html(result);
          }});
    });
}, 500);