Question

I am setting up cycling quotes for a website, and I’m having trouble reloading the data when after it has already been used once.

I’ve set up a XML file with a bunch of data. The data includes a quote, an author, and the job title of the author (quote, author, title).

I then have a jQuery .ajax call and store it in the variable xmlData.

xmlData is then used to append or add html to specified id tags.

I am using setInterval() in order to move through the xml data.

The idea is to go through it in a loop like: 1 | 2 | 3| 1| 2 | 3 and so on. But when it comes back around, after the data has been appended to an ID, it doesn’t show up anymore. It is as if the data was removed from the XML file.

Any help would be appreciated. Code is below, along with the website URL where I am working on the test.

<script language="javascript" type="text/javascript">

var xmlData;
var xmlFAILdata;
var nextE = 0;  
var ttlE;
var quote;
var author;
var title;

$(function(){

 $.ajax({
    type: "GET",
    url:"/wp-content/themes/privilegeofpersecution/endorsements.xml",
    data: "",
    dataType:"xml",
    async: false,
    success: function(xml){
        //alert("XML SUCCESS!");
        xmlData = xml;} ,
    error: function(xmlFAIL){
        alert("XML FAIL");
        }
        });

ttlE = $(xmlData).find('endorsement').length;

//Since .length return the number starting at 1 rather than 0 subtract 1 for accuracy
ttlE -= 1;


//On pageload, load in the first Endorsement into variables
quote = $(xmlData).find('endorsement').eq(0).children('quote');
author =$(xmlData).find('endorsement').eq(0).children('author');
title =$(xmlData).find('endorsement').eq(0).children('title');

//Append variables to id containers
$("#quote").html(quote);
$("#author").html(author);
$("#title").html(title);

//executes the function "next" which places the next endorsement
setInterval("next()", 5000);

});

function next(){
    console.log('Next Function Started');

    if(nextE >= ttlE){
        nextE = 0;
        }
    else{
    nextE++;
    }

    console.log('nextE = ' + nextE);

    quote = $(xmlData).find('endorsement').eq(nextE).children('quote');
    author =$(xmlData).find('endorsement').eq(nextE).children('author');
    title =$(xmlData).find('endorsement').eq(nextE).children('title');

    $("#quote").html(quote);
    $("#author").html(author);
    $("#title").html(title);

}
</script>

Here is the website: http://privilegeofpersecution.com/wp-content/themes/privilegeofpersecution/xmltest.html

Answer 1

I was able to fix the problem by adding .clone() to the variable assignment. This way I’m not just placing the XML object in the DOM and overwriting it. rather, I am copying the data from the XML each time I need it so that it stays in tact.

quote = $(xmlData).find('endorsement').eq(0).children('quote').clone();
author =$(xmlData).find('endorsement').eq(0).children('author').clone();
title =$(xmlData).find('endorsement').eq(0).children('title').clone();