title: load contents of slider via ajax after interval?
body: <p>I am using full screen revolution slider. Contents of the slider comes from the server in JSON format and I use that JSON to build HTML in javascript. After building HTML, I replace the contents of slider with new contents.
  Now here is the scenario. As first time page loads, an AJAX call is made to the server which returns JSON and markup is built with that JSON. That markup is then loaded to a <code>ul</code> with <code>html()</code> method of jquery and a call is made to a function to start revolution slider. And slider starts perfectly. After exact one minute, again a JSON call is made to the server and whole process is repeated. Now this time, when I replace the contents, the slider broke. I think this is because slider is using the contents and I replace them. If I <code>prepend()</code> the contents the slider works fine but it will always prepend the contents and there will be a lot of <code>li</code> elements in <code>ul</code>. Is there a way so that I can replace the contents without breaking the code. I need to replace the contents because I want to show the latest contents form server.</p>
  
  <p>Here is my function to start slider: </p>
  
  <pre><code>function startSlider() {
      jQuery("#slider1").revolution({
      sliderType: "standard",
      sliderLayout: "fullscreen",
      delay: 6000,
      lazyType: "single",
      disableProgressBar: "on",
      navigation: {
          onHoverStop:"off"
      }
  
      });
  }
  </code></pre>
  
  <p>and this one to load images: (You can just check last 5 lines of this function as they're loading the contents, all other lines are to just built markup)</p>
  
  <pre><code>function loadImages() {
      var eventId = $("input[name='eventid'").val();
      var htmlContents = "";
      var eventId = 25;
      var transitions = [
          "slideup", "fade", "slidedown", "slideright", "slideleft", "slidehorizontal", "slidevertical",
          "slideoverup", "slideoverdown", "slideoverright", "slideoverleft", "slideoverhorizontal",                     
          "slideoververtical", "boxslide", "slotslide", "slotslide", "boxfade", "slotfade", "slotfade",
          "fadefromright", "fadefromleft", "fadefromtop", "fadefrombottom", "fadetoleftfadefromright",
          "fadetorightfadefromleft", "fadetotopfadefrombottom", "fadetobottomfadefromtop", "parallaxtoright",
          "parallaxtoleft", "parallaxtotop", "parallaxtobottom", "parallaxhorizontal", "parallaxvertical",
          "scaledownfromright", "scaledownfromleft", "scaledownfromtop", "scaledownfrombottom", "zoomout",
          "zoomin", "slotzoom: orizontal", "curtain", "3dcurtain", "cube", "incube", "turnoff", "papercut",
          "flyin", "slideremoveup", "slideremovedown", "slideremoveright", "slideremoveleft", "slideremovehorizontal",
          "slideremovevertical"
      ];
      var easeinout = [
      "Power0.easeInOut", "Power1.easeInOut", "Power3.easeInOut", "Power4.easeInOut", "Quad.easeInOut",
      "Cubic.easeInOut", "Quart.easeInOut", "Quint.easeInOut", "Strong.easeInOut", "Back.easeInOut",
      "Bounce.easeInOut", "Circ.easeInOut", "Elastic.easeInOut", "Expo.easeInOut", "Sine.easeInOut"
      ];
      var htmlContents = "";
      var previousTrans = "slideup";
      var trans = "fade";
      var previousEase = "Power0.easeInOut";
      var ease = "Power1.easeInOut";
      $.getJSON("slidercontents/" + eventId, function (data) {
          $.each(data, function () {
              while (trans == previousTrans)
              {
                  trans = transitions[Math.floor(Math.random() * transitions.length)];
              }
              while(ease == previousEase)
              {
                  ease = easeinout[Math.floor(Math.random() * easeinout.length)];
              }
              previousTrans = trans;
              previousEase = ease;
              htmlContents += '&lt;li data-transition="' + trans + '" data-delay="6000"&gt;';
              htmlContents += '&lt;!-- MAIN IMAGE --&gt;';
              htmlContents += "&lt;img src=\"{{ asset('uploads/eventphotos') }}/";
              var imageCounter = 0;
              if (this.photo === 'null' || this.photo === "" || this.photo === null)
              {
                  var newPhoto = this.photo;
                  while (newPhoto === 'null' || newPhoto === "" || newPhoto === null)
                  {
                      if (imageCounter == 100)
                      {
                          break;
                      }
                      var index = Math.floor(Math.random() * data.length) - 1;
                      if (index &gt;= 0)
                      {
                          newPhoto = data[index].photo;
                      }
                      else
                      {
                          newPhoto = data[0].photo;
                      }
                      imageCounter++;
                  }
                  htmlContents += newPhoto;
              }
              else
              {
                  htmlContents += this.photo;
              }
              htmlContents += '" /&gt;alt=""   data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"&gt;';
              htmlContents += '&lt;!-- LAYER NR. 1 --&gt;';
              htmlContents += '&lt;div class="tp-caption News-Title   tp-resizeme rs-parallaxlevel-0" ';
              htmlContents += 'data-x="[\'right\',\'right\', \'right\', \'right\']" data-hoffset="[0, 0, 0, 0]" ';
              htmlContents += 'data-y="[\'bottom\', \'bottom\', \'right\',\'right\']" data-voffset="[0, 0, 0, 0]" ';
              htmlContents += 'data-whitespace="normal" ';
              htmlContents += 'data-transform_idle="o:1;" ';
              htmlContents += 'data-transform_in="x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Sine.easeInOut;" ';
              htmlContents += 'data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Sine.easeInOut;" ';
              htmlContents += 'data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" ';
              htmlContents += 'data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" ';
              htmlContents += 'data-start="1000" &gt;';
              //htmlContents += "&lt;div id=\"profile-pic-div\"&gt;&lt;img class=\"profile-pic\" style=\"margin-left: 6px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; width: 96px; height: 96px;\" src='";
              htmlContents += "&lt;h3 id=\"heading-contetns\" style=\"padding: 8px; line-height: 1.1; font-size: 18px; width: 560px; height: auto; word-wrap: break-word; background: transparent url({{ asset('sximo/images/specch-lg.png') }}) no-repeat scroll 0px 0;background-size: 100% 100%;border-radius: 20px !important;\"&gt;&lt;img class=\"profile-pic\" style=\"margin-left: 6px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; width: 96px; height: 96px; float: right;\" src='";
              if (UrlExists("{{ asset('uploads/profilepics') }}" + "/preview_" + this.sender + ".jpg"))
              {
                  htmlContents += "{{ asset('uploads/profilepics') }}" + "/preview_" + this.sender + ".jpg' /&gt;";
              }
              else
              {
                  htmlContents += "{{ asset('uploads/profilepics') }}" + "/logo-white.png' /&gt;";
              }
              //htmlContents += "&lt;div id=\"paragraph-div\"&gt;&lt;p id=\"message-body\"&gt;";
              htmlContents += "&lt;span style=\"overflow: hidden;\"&gt;";
              var messageCounter = 0;
              if (this.messagetext == null || this.messagetext == "" || this.messagetext == "null")
              {
  
                  var newMessage = this.messagetext;
                  while (newMessage == null || newMessage == "" || newMessage == "null")
                  {
                      if (messageCounter == 10)
                      {
                          break;
                      }
                      var index = Math.floor(Math.random() * data.length) - 1;
                      if (index &gt;= 0)
                      {
                          newMessage = data[index].messagetext;
                      }
                      else
                      {
                          newMessage = data[0].messagetext;
                      }
                      messageCounter++;
                  }
                  htmlContents += newMessage;
              }
              else
              {
                  htmlContents += this.messagetext;
              }
              //htmlContents += "&lt;/p&gt;&lt;/div&gt;";
              htmlContents += "&lt;/span&gt;&lt;span style=\"clear: both; display: block;\"&gt;&lt;/span&gt;&lt;/h3&gt;";
              htmlContents += '&lt;/div&gt;';
              htmlContents += '&lt;/li&gt;';
          });
          //$('#slider-ul').empty();
          $('#slider-ul').replaceWith(htmlContents);
          console.log("Activating slider now");
          startSlider();
      });
  }
  </code></pre>
  
  <p>And this one starts the slider and set a timer for slider too:</p>
  
  <pre><code>$(document).ready(function () {
          loadImages();
          setInterval(loadImages, 60000);
      }); 
  </code></pre>