Ajax将数据移动到另一个div

Question

I'm trying to move data to another div after Ajax being refreshed. Every time it refreshed it get the new data from the database. I want to keep the old data that show up on the first div to be stored and when Ajax being refreshed again the first data from div will move to second div. And the first div will be replaced with new data.

this is HTML

                <td id="kue1" class="box" ></td>
                <td id="station1" class="box1"</td>
            <tr>

                <td id="kue2" class="box" ></td>
                <td id="station2" class="box1"></td>
            </tr>
            <tr>
                <td id="kue3" class="box"></td>
                <td id="station3" class="box1"></td>
            </tr>
            <tr>
                <td id="kue4" class="box"></td>
                <td id="station4" class="box1" ></td>
            </tr>

This is Ajax

$(document).ready(function(){
    setInterval(function(){
    $.ajax({
        type: "GET",
        url: "/ajax",
        data: { QNum: 0 , station_num: 0 },
        success: function(data){

            var store = [];
            var textToBeDisplayed;
            var textToBeShowed;
            var e;


            if(data["q_play_list"] && Array.isArray(["q_play_list"])){
            var playList = data["q_play_list"];
            var playListLength = data["q_play_list"].length;

                for(var i = 0; i< playListLength; i++){
                 textToBeDisplayed = playList[i].QNum || "";
                 textToBeShowed = playList[i].station_num;


                 newData = playList[i].QNum;

                    if(playList[i].QNum == null && playList[i].station_num == null ){
                        console.log('do nothing');

                    }   

                    else if(textToBeDisplayed != null && textToBeShowed != null){
                        $('#kue1').text(textToBeDisplayed);
                        $('#station1').text(textToBeShowed);
                        textToBeDisplayed2 = textToBeDisplayed;
                        textToBeShowed2 = textToBeShowed;

                        console.log('got in123');
                    }

                    if($('#kue1').text().length >= 1 && $('#station1').text().length >= 1){

                        $('#kue2').text(textToBeDisplayed);
                        $('#station2').text(textToBeShowed);

                            console.log('got in1234');
                    }



                }
            } 

        console.log(data);

        },

        error: function (error) {
            console.log("something is wrong: ", error);
        }

    });
},10000)
});

But every time it refresh the data that store be like. The second div is changed just like the first that come out after refresh. I'm so confused i can't figured out. Is there solution to make it work?

Answer 1

The problem is you are populating kue1, kue2 and station1, station2 with same value that comes from AJAX request. You have to store old data that is present in kue1 and station1 in temporary variable and set kue1 and station1 with new values from AJAX. Later set kue2 and station2 from temporary variables.

Like this:

setInterval(function(){
$.ajax({
    type: "GET",
    url: "/ajax",
    data: { QNum: 0 , station_num: 0 },
    success: function(data){

        var store = [];
        var textToBeDisplayed;
        var textToBeShowed;
        var e;
        let oldTextToBeDisplayed;
        let oldTextToBeShowed;


        if(data["q_play_list"] && Array.isArray(["q_play_list"])){
        var playList = data["q_play_list"];
        var playListLength = data["q_play_list"].length;

            for(var i = 0; i< playListLength; i++){
             textToBeDisplayed = playList[i].QNum || "";
             textToBeShowed = playList[i].station_num;


             newData = playList[i].QNum;

                if(playList[i].QNum == null && playList[i].station_num == null ){
                    console.log('do nothing');
                }   
                else if(textToBeDisplayed != null && textToBeShowed != null){
                    if ($('#kue1').text() == "" && $('#station1').text() == "") { // first time both keu1 and station1 will be empty
                        $('#kue1').text(textToBeDisplayed);
                        $('#station1').text(textToBeShowed);
                    }
                    else {
                        oldTextToBeDisplayed = $('#kue1').text();
                        oldTextToBeShowed = $('#station1').text();

                        $('#kue2').text(oldTextToBeDisplayed);
                        $('#station2').text(oldTextToBeShowed);

                        $('#kue1').text(textToBeDisplayed);
                        $('#station1').text(textToBeShowed);
                    }

                    console.log('got in123');
                }                    
            }
        } 

    console.log(data);

    },

    error: function (error) {
        console.log("something is wrong: ", error);
    }

});
},10000)

Hope this would help.