How to dynamically update foundation orbit slider with AJAX

Question

I used foundation4 orbit plugin to display image gallery.

It currently work as:

(1) Use AJAX to dynamically load an image list, the AJAX call poll periodically with interval 1 second

(2) Update slider with the above result in the AJAX success callback via $(document).foundation(),which will show the orbit slider correctly

The problem is that:

The AJAX callback will call $(document).foundation() many times, each time it will create a new slider and overlap with the existing one. How should i do so that just update the current orbit slider,rather than create a new one?

Test

<script type="text/javascript" charset="utf-8"> 
Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] == obj) {
            return true;
        }
    }
    return false;
}

function getParameterByName(name){
      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
      var regexS = "[\\?&]" + name + "=([^&#]*)";
      var regex = new RegExp(regexS);
      var results = regex.exec(window.location.search);
      if(results == null)
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
}

var images = [];

function addmsg(type, msg){
    var updated = false;
    for (var i in msg){     
        if (!images.contains(msg[i])){
            $("#messages").prepend(
                "<li><img src='"+msg[i]+"'"+"/>"+"<div class='orbit-caption'>...</div>"
            );
            images.push(msg[i]);
            updated = true;
        }
    }
    return updated;
}

var url = 'get_latest_images.php';

function waitForMsg(){
    /* This requests the url "msgsrv.php"
    When it complete (or errors)*/
    $.ajax({
        type: "GET",
        url: url+'?username='+getParameterByName('username'),
        dataType: 'json',
        async: true, /* If set to non-async, browser shows page as "Loading.."*/
        cache: false,
        timeout:50000, /* Timeout in ms */

        success: function(data){ /* called when request to barge.php completes */
            //alert(data);
            var updated = addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
            if (updated){
                $(document).foundation();
            }
            setTimeout(
                waitForMsg, /* Request next message */
                1000 /* ..after 1 seconds */
            );
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            addmsg("error", textStatus + " (" + errorThrown + ")");
            setTimeout(
                waitForMsg, /* Try again after.. */
                15000); /* milliseconds (15seconds) */
        }
    });
};

$(document).ready(function(){
    waitForMsg(); /* Start the inital request */            
});
</script>

<script src="./js/foundation.min.js"></script>
<script src="./js/foundation.orbit.js"></script>

How to dynamically update foundation orbit slider with AJAX

0 Answers0