title: Inserting Images into Flexslider using Ajax
body: <p>I have flexsider on my site and I want to pull my linked images into it to show a dynamic slide show. However my current setup works but not all the time it shows sometimes. How can I rectify this issue. I pull the image and its link from JSON webservice. My code is below:</p>
  
  <p>Ajax //load list on featuredtracks page</p>
  
  <pre><code>$(document).on( "pagebeforeshow", "#pagename", function( e ) {
   //ajax stuff
  });
  
  //callback function 
    function pagenamecallback(rtndata) 
   { 
     rtndata;
     var data= $("#featured");
     for(j=0;j&lt;=songs.length -1;j++)
     {
           var a = $("&lt;a href='./page.html' data-transition='fade'&gt;&lt;img src='"+ rtndata[j].track_art_url + "' style='width: 300px; height: 300px; margin: auto;' alt='featuredimage'&gt;&lt;/a&gt;");
  
      data.append($("&lt;li&gt;&lt;/li&gt;").append(a));
  }
  
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).on("pageshow", "#pagename", function( e ) {
  $('.flexslider').flexslider({
      randomize: true,
      animation: "slide"
  });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="flexslider"&gt;
    &lt;ul class="slides" id="featured"&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>