title: Confused about where I should start with pagination {$.getJSON, php image array}
body: <p>Here's how my code is setup now:</p>
  
  <ul>
  <li><p>user visits a certain link on the page</p></li>
  <li><p><code>$.getJSON</code> sends a request to a php script</p></li>
  <li><p>php calls <code>scandir()</code> to create an array for the names of images (100s-1000s eventually but only a few now for testing, hence the need to add pagination)</p></li>
  <li><p>echos a json_encoded array</p></li>
  <li><p><code>$.each</code> item is used to create a string variable that is a new  tag</p></li>
  <li><p>prepend string variable to a div container that is a inline display of images</p></li>
  </ul>
  
  <p>Here's what I'm trying to do:</p>
  
  <ul>
  <li><p>have 50 items loaded with ajax at a time</p></li>
  <li><p>figure out how use <code>$.each</code> so that it works with the 50 item requirement</p></li>
  <li><p>figure out a different way to use <code>$.getJSON</code> so that not all xxxx number of images are requested at once</p></li>
  </ul>
  
  <p>My questions:</p>
  
  <ul>
  <li>how can I make a request that's made only one time at the top of a javascript event stay active throughout the duration of a user clicking through these pages?</li>
  </ul>
  
  <p>Php creating the array from scandir doesn't seem like it's a problem...maybe returning the whole array at once is a problem, but I can't figure how to create a loop that waits for user requests (clicking 'next' or 'prev') to iterate to the next 50 images in the array. </p>
  
  <p>I imagine the best place to work on would be before or inside of <code>$.each</code>, somehow using a loop to wait for a following ajax request to create the next 50  tags and prepend them to the .</p>
  
  <p>Here's the code:</p>
  
  <pre><code>     requestServer('ajax.php', flag);
              $('#Container').fadeIn('slow');
              $('.close_button').click(function() {
                  $('#Container').fadeOut('slow');
                  $('#welcome').fadeTo('slow',1);
                  $('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
                  $('#welcome').css({'position':'absolute','z-index':'10'});
              });
              flag = false;
              break;
  
      function requestServer(file, run_flag) {
          if (run_flag === true) {
              $.getJSON(file, function(data) {
                  $.each(data, function(key, val) {
                      var html = "&lt;img src='../images/"+val+"' style='display:inline' alt=null /&gt;";
                      $('#Container').prepend(html);
                  });
              });
          }
      }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;?php
      $images = scandir('../includes/scrapedImages/');
      foreach ($images as $key =&gt; $image) {
          if ($image == '.' || $image == '..') {
              unset($images[$key]);
          }
      }
      echo json_encode($images);
  ?&gt;
  </code></pre>