Ajax, Jquery, PHP send get file list on click without refreshing the page

Question

First, I want to apologize if this is somewhere else. I'm looking for something simple. I have a PHP script that uses glob to retrieve a list of files from a directory. The directory is determined by a request sent though the address bar. ie. http://somewebsite.com/?loc=mydirectory I'm looking for a way to create a button that you can click on and the file list will display without refreshing the page. Here is the PHP code.

<?php
$BaseLoc='./';
$SecLoc='archives';
$FullLoc=$BaseLoc.$SecLoc.'/';
$loc=$_GET["loc"];
parse_str($_SERVER['QUERY_STRING'], $urlparams);
$GFloc=$urlparams['loc'];

function DirList() {
  global $FullLoc;
      $DirList=glob($FullLoc.'*',GLOB_ONLYDIR);

  foreach ($DirList as $dirlist) {
    $edl=explode ('/',$dirlist);
    $dirlist=end($edl);
    echo '<li><a href="?loc='.$dirlist.'">'.$dirlist.'</a></li>';
  }
}

function ListFiles($GFloc){
   global $FullLoc,$GFloc;
   $FileLoc=$FullLoc.$GFloc;
   $FileList=glob($FileLoc.'/*');
   foreach ($FileList as $filelist) {
     echo $filelist.' - '.$GFloc.'<br />';
   }
}
?>

keep in mind that this is a test project for the purposes of getting a handle on how to do this type of AJAX. I know there is some Jquery with .get and I could have sworn I'd done this before but for the life of me I just can't seem to wrap my head around it. I know it's got to be something simple with a button click and then write the result into a div. Any help would be appreciated or even a link to an answer that I missed. Thanks.

I'm editing this on 1-28-2017 to try and clarify what I'm attempting to do. With the current php code above. When this .php page is visited it generates a list of sub-folders inside a folder and turns that list into clickable links. Inside each of those sub-folders is a group of media files. Currently if I click on one of the now generated sub-folder links. The entire page refreshes and I get a display of all the files inside that sub-folder. This is done by using php get and a variable inside the url. The only thing I 'm trying to change is that I get the same result, without refreshing the page. If you want to see an example of this functionality as it currently is, you can go to my test page. http://testbed.myreth024.tk/ajax/ I keep thinking it's something simple with the jquery .get. I just can't seem to find a good example of how to pass those url parameters through. Anyway. Thanks again for all the responses.

Answer 1

<button type="button">Click Me</button>
<div id="iamdiv"></div>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){ //you can use class(with .yourclass) or id(with #yourid) instead of button if you need to be.

            $.ajax({
                type: 'POST',
                url: 'script.php',
                success: function(data) {
                    alert(data);
                    $("#iamdiv").html(data);

                }
            });
   });
});
</script>

In script.php

<?php 
 echo "You win";
?>

I hope that helps cheers!

Answer 2

I want to thank everyone for their time and input. I want to point out that I feel as programmers we have a tendency to over-complicate things. Eventually I arrived at a solution to this question. It's entirely possible I didn't ask the question as clearly as I could have. Before I post the code let me walk through the basics of what occurs. Hopefully this will help someone else who is looking for a similar solution. The index page opens and the php code executes and generates a directory listing. Each of the directory names is clickable through javascript. When a directory is clicked, the space below the directory listings displays a list of files in that directory. Here is the index file:

        <style>.menu{cursor:pointer;padding:1%;float:left;}</style>
            <?php 
            $loc=$_GET["loc"];
            function DirList() {
            global $loc;
            $dlist=glob("./files/*",GLOB_ONLYDIR); 
            $dend=$dlist[0]; 
            $dende=explode ('/',$dend); 
            $default=end($dende);
                foreach ($dlist as $Dlist) {
                    $edl=explode ('/',$Dlist);
                    $DList=end($edl);
            echo '<div class="menu" id="'.$DList.'">'.$DList.'</div> ';
                    }
                    if(!$loc){header("Location: ?loc=".$default);}

                }

            ?>
            <p></p>
            <div><?php DirList();?></div>
            <div><div id="flist" style="clear:both;border:1px solid black;min-height:25px;"></div></div>
            <p></p>
            <script type="text/javascript">
            $(".menu").click(function() {
                var dloc=this.id;
            $.get("file-list.php?loc="+dloc,function(data) {
                $("#flist").html(data);
            });
            });
            </script>

Then I have a file-list.php for the purposes of generating the list of files.

            <?php
            function FileList() {
            $loc=$_GET["loc"];
            $dloc = "./files/".$loc.'/';
            $flist=glob($dloc.'*');
            foreach ($flist as $fList)
                {
            $efl=explode ('/',$fList);
            $FList=end($efl);
echo '<div style="padding:1%;width:45%;margin:0px auto;">'.$FList.'</div>'; 
                }
            }
            FileList();
            ?>

Ultimately what I was missing was how I could take the data and put it into a div. When creating my links, I used the css id to store the directory name as well. This allowed me to reference it more easily in the code. Ultimately it was essentially about retrieving the "data" from the file-list.php and then simply writing that "data" into the div with the jquery .html. It ended up being a simple .get command which if I understand it, is a jquery ajax solution. If anyone has any questions or comments on how I could have asked the question better or ways to improve the code, feel free to let me know. I'm still learning some of this and I'm always open for improvement.