New data received by AJAX does not overwrite previous values

Question

I am trying to make a menu. A click on each item causes AJAX call, which returns object with some values. After some actions when I show menu one more time, after a click on any item, AJAX call is executed one more time and returns object with other values. I have a problem with that object/values, because they didn't change in the callback function. Only the first item in the array is new.

I am sorry for my bad english, but I hope you will understand the issue.

some code:

1) after click on menu item:

function run(){  //After a click on menu item

  $('.menu').fadeOut(400);
  $('.title').text($(this).text());

  chapterNum = parseInt($(this).attr('id'));
  console.log('downloading data');
  downloadData(chapterNum, main);  //AJAX callback function
}

and then:

function downloadData(chapter, callback){
  $.ajax(
    {
      type: 'GET',
      data: {chapter: chapter},
      url: 'chapters.php',
      dataType: 'json',
      success: function(result){
        console.log("ajax");
        console.log(result);
        callback(result);
      },
      error: function(){
        console.log('connection err');
      }
    }
  );
}

result looks like this:

answ : ["brat cioteczny/stryjeczny", "brat przyrodni"]
id : ["16", "19"]
quests : ["first cousin", "half-brother"]

main function:

function main(responceData){
  it = 0;
  console.log("main");
  console.log(responceData);
  (...)

  $('.front > h2').text((it+1)+".");
  $('.front > p').text(responceData.quests[it]);
  $('.back > p').text(responceData.answ[it]);

  $('.next').click(function(e){
    e.stopImmediatePropagation();
    console.log(it);
    if(it < Object.keys(responceData.id).length-1){ ++it; }
    else{
      $('.menu').fadeIn(400);
      it = 0;
      console.log("end");
      return;
    }
    console.log(responceData.quests[it]);
    $('.front > h2').text((it+1)+".");
    $('.front > p').text(responceData.quests[it]);
    $('.back > p').text(responceData.answ[it]);
  });

  $('.prev').click(function(e){
    e.stopImmediatePropagation();
    if(it >= 1){ --it; }

    $('.front > h2').text((it+1)+".");
    $('.front > p').text(responceData.quests[it]);
    $('.back > p').text(responceData.answ[it]);
  });

  (...)

}

the second result is fine, but when I click on menu item, the responceData.quests[it], ..answ[it] are still the same.

only responceData.quests[0] and answ[0] are good and fit the result, which I am showing in console.

probably there is a problem in order of the code, maby I shouldn't do it in that way?

maby it will be easier for you to see the problem in real so here is the link: click me! :)

thank you in advance:)

PS I was looking for a solution for quite long so i hope that this question isn't a duplicate.

Answer 1

Every time you call main() you add click handlers on the next and prev buttons, but you never remove the old click handlers. So when you click on those buttons, it will continue to process the results from previous calls. Remove the old handlers before adding the new ones:

  $('.next').off("click").click(function(e){
    e.stopImmediatePropagation();
    console.log(it);
    if(it < Object.keys(responceData.id).length-1){ ++it; }
    else{
      $('.menu').fadeIn(400);
      it = 0;
      console.log("end");
      return;
    }
    console.log(responceData.quests[it]);
    $('.front > h2').text((it+1)+".");
    $('.front > p').text(responceData.quests[it]);
    $('.back > p').text(responceData.answ[it]);
  });

and similar for .prev.

Answer 2

I have no idea what coming from server via AJAX. All I see is that you work only with first element in array:

it = 0;
  console.log("main");
  console.log(responceData);
  (...)

  $('.front > h2').text((it+1)+".");
  $('.front > p').text(responceData.quests[it]);
  $('.back > p').text(responceData.answ[it]);

While you need iterate over all items using f.e. for loop.