CODEWITHSUNDEEP
jqueryajaxappend
Andrejs
Andrejs

Reputation: 11901

Load file with AJAX and append to

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

Upvotes: 0

Views: 521

Answers (3)

Jai
Jai

Reputation: 74738

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

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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

var self = this;

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

Upvotes: 1

Surendheran
Surendheran

Reputation: 197

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>

Upvotes: 1

Related Questions