0

I'm creatinga pretty simple script, take a directory listing of files and put it into an array, of which I then iterate over and spit out html. It also handles complete pagination.

But when I make my ajax call to load a new set of data from the pagination, it loads and then jquery just seems to turn off.

I'm guessing I need some callback or redraw function as I replace the entire #content wrapper.

How can I get my javascript to reset after the ajax call?

This is the main php script, creates array and pagination:

<?php


$per_page=12;



$dir    = 'c:\\inetpub\\wwwroot\\'; //directory of gifs
$files1 = array_slice(scandir($dir), 2);  // remove . and .. from array
$array = array_chunk($files1, $per_page); // break the array into 12 images per page 
$count = ceil(count($files1) / $per_page); // count amount of pages

$pages = array_filter(array_merge(array(0), $array)); // push array +1 so pagination navigation matches correctly from 1

$pgkey = empty($_GET['showpage']) ? 1 : (int)$_GET['showpage'];

$pages[$pgkey];

// echo "<pre>";
// print_r($pages);
// echo "</pre>";

    foreach($pages[$pgkey] as $file)
    {
        echo '<div class="col-lg-3 col-md-2 col-sm-3 col-xs-4 thumb"> <a class="thumbnail" href="#">'."\n\r";  
        echo '<img class="freezeframe img-responsive" src="../gifs/images/'. $file . '" alt="">'."\n\r";
        echo '</a></div>'."\n\r";
    }

// Prev cannot be less than one
$prev = max(1, $pgkey - 1);
// Next cannot be larger than $pages_count
$next = min($count , $pgkey + 1); 
$is_first = $pgkey == 1;
$is_last  = $pgkey == $count;


    echo '<ul id="nav" class="pagination pagination-sm">';
    echo !$is_first ? '<li><a data-id="'. $prev .'"  href="#">Previous</a></li>' : '';

    for($i=1; $i < count($pages)+1; $i++)
    {
        echo '<li><a data-id="'. $i .'" href="#">'.  $i .'</a></li>';
    }

        //echo "we are at:"; echo $pgkey;
        echo !$is_last ? '<li><a data-id="'. $next .'" href="#">Next</a></li>' : '';


    echo '</ul>';
?>

and this is my html/javascript

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Thumbnail Gallery - Start Bootstrap Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/thumbnail-gallery.css" rel="stylesheet">
    <link href="css/overrides.css" rel="stylesheet">

    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/freezeframe.min.js"></script>

    <script>


             $("document").ready(function(){
            $('#nav li a').click(function(){

            var page_id = $(this).data('id');
            $.ajax
            ({ 
                url: 'gifs.php',
                data: {"showpage": page_id},
                type: 'get',
                 async:false,
                    success: function(result)
                    {

                        $('#content').html(result).fadeIn(700, function() 
                        {
                        });
                    }
                });
            });
      });
    </script>
</head>

<body>

    <!-- Page Content -->
    <div class="container">

        <div id="content" class="row">


    <?php include "files.php"; ?>


        </div>

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Jared 2015</p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->





</body>

</html>
Jared
  • 402
  • 6
  • 22

2 Answers2

1

You need to delegate the click event of your nav links, otherwise newly appended elements to the DOM won't have the event binded:

$("#content").on('click', '#nav li a', function() { });
taxicala
  • 21,408
  • 7
  • 37
  • 66
1

Since you replace your pagination links, you have to rebind the click event to the anchor tags of your pagination.

Tyr
  • 2,810
  • 1
  • 12
  • 21