0

I have spent all day but still can't figure out how to make load more button with jquery which will change value of variable in my php script, start my for loop and load more photos from my photos folder. My Jquery script is:

$(document).ready(function() {
    $("button").click(function(){
        $("php").attr({
            "$b" : "16"
        });
    });
});

My php code is:

$charnum = strlen($file);
$b = 8;
    $directory = "resource/galery/";
    if (is_dir($directory)) {
    if ($dh = opendir($directory)) {
        for ($i = 0; ($file = readdir($dh)) && $i < $b; ++$i) {
            if($file !="." && $file!=".."){
            echo '
            <div class="img">
            <a target="_blank" href="/resource/galery/'.$file.'">
            <img class="img-responsive" src="/resource/galery/'.$file.'">
            </a>
            <div class="desc">'.substr($file, 0, $charnum - 4).'</div>
            </div>';
        }
        }
        closedir($dh);
    }
}

I want to change $b from 8 to bigger number. Or maybe there is another way to do this. Thank you.

Ibragim Šabanovič
  • 7
  • 3
  • Can you also include the jQuery code you are using to request the PHP please. – Harry Beasant Mar 20 '16 at 18:07
  • Is that is what you are looking for http://stackoverflow.com/questions/15774669/list-all-files-in-one-directory-php? – Undefitied Mar 20 '16 at 18:13
  • Are you thinking your jQuery code will be modifying the PHP of the same page it's loaded in? PHP is server side and finished once the user sees the page. If you want to work with the PHP again, you will need to use Ajax and make an additional call to a PHP page. – ThrowBackDewd Mar 20 '16 at 18:14

1 Answers1

0

I think you got things a bit mixed up, the JavaScript and PHP are run in two different worlds - one on the client and one on the server side.

So you can not "directly" change variables from JavaScript. You have to do this by passing a variable via a HTTP request such as a GET or POST request, the PHP script will then render a response which can be accessed in your JavaScript.

Here's a possible paging solution:

JS:

$(document).ready(function() {
  $("button").click(function(){
    // try to get current page, or start off with 0 and increment by one.
    var page = (parseInt($(this).data('page')) || 0) + 1; 
    // save current page as data state on the button
    $(this).data('page', page);

    // we call the PHP script and pass a GET variable which indicates
    // which page we want to load.
    $.get('yourphpscript.php?'+ $.param({page: page}), function(data) {
      // append the result from your PHP script to #result element
      $('#result').append(data);
    });
  });
});

PHP (yourphpscript.php):

// 8 images per page
$perPage = 8;

// sanitize page to be a number, default to 0 - the "first page"
$page = intval(is_numeric($_GET['page']) ? $_GET['page'] : 0);

$charnum = strlen($file);
$directory = "resource/galery/";
if (is_dir($directory)) {
  if ($dh = opendir($directory)) {
    // loop up to and including the requested page
    for ($i = 0; ($file = readdir($dh)) && ($i % $perPage) <= $page; ++$i) {
        // only output if we are on the requested page
        if($file !="." && $file!=".." && ($i % $perPage) == $page) {
          echo '
          <div class="img">
          <a target="_blank" href="/resource/galery/'.$file.'">
          <img class="img-responsive" src="/resource/galery/'.$file.'">
          </a>
          <div class="desc">'.substr($file, 0, $charnum - 4).'</div>
          </div>';
        }
    }
    closedir($dh);
  }
}

HTML:

<div id="result">
  <!-- images go here -->
</div>
<button type="button">Load more</button>
sled
  • 14,525
  • 3
  • 42
  • 70