PHP Javascript Image rendering

Question

I have two forms in two different divs and in one of which I am trying to render the images from a folder:

First form renders a ul li and its id and name is matchListUL.

 echo '<li id="matchList" name="matchList"><a href="'.implode('; ', $data).'">'.implode('; ', $data).'</a></li>';

Through a javascript I am passing the value of selected li to a php file named loadimages.php. The following is the javascript.

<script>
  $(document).ready(function(){
  $('ul#matchListUL li a').click(function(){
      var match = $(this).attr('href');
      if (match !== null && match !=="") {
      $.post("loadimages.php", { match : match }, function(output){
      $("#imageload").html(output).show();
      });
          return false;
           })
      })
</script>

The second div has id and name as imageload. The loadimages.php is as follows:

$match = $_POST['match'];
$selectedDir = $_SESSION['seldir'];
$tarDir = "kennels/" . $selectedDir . "/" . $match;

$my_image_array = scandir($tarDir);                    
$img_string = "";
foreach($my_image_array as $img_name){
    if(strlen($img_name) > 2 ) {
        $imgname = $tarDir . $img_name;    
        $img_string .= '<img src = "' .$imgname. '">';
    }
}
echo $img_string;

When I run the code from loadimages.php, the images are not getting rendered. Do I have to change this line in my javascript to suit image rendering?

$("#imageload").html(output).show();

The same code when I run (with minimal modifications) from my main index.php, it renders images.

I tried an alternative to the code i have in loadimages.php where I hardcoded the path to the images folder:

$files = glob("kennels/projects/images/*.jpg");
for ($i=1; $i<count($files); $i++)
{
    $num = $files[$i];
    echo '<img src="'.$num.'" id="thumbNails"/>';

}

This too works perfectly from my index.php, while not rendering any images from loadimages.php.

If you are using mvc or another folder you may want to specify the part your kennels using /kennels/img/path assuming the kennels folder is in your main host directory that is the / path — Ezekiel
– Ezekiel, Commented Jan 13, 2018 at 14:54
Can you is the index.php in the same path as your loadimages.php? — Ezekiel
– Ezekiel, Commented Jan 13, 2018 at 15:01
@Ezekiel Yes, the kennels directory is in my main host directory, and yes, index.php and loadimages.php are in the same path. In fact, I do not have any directories yet for any of my files. All of them are in the host only except for images. — popeye
– popeye, Commented Jan 13, 2018 at 15:09
@Ezekiel Do you see any other anomalies in the code as I have it now? — popeye
– popeye, Commented Jan 13, 2018 at 15:11
Yes, i think i may have seen, $imagename = $tarDir.'/'.$img_name; should be the right thing. Once you make changes let me know so i can leave it as an answer for others also — Ezekiel
– Ezekiel, Commented Jan 13, 2018 at 15:19

Ezekiel · Accepted Answer · 2018-01-13 16:04:12Z

1

If you notice there is no .'/' after your $match variable

 $match = $_POST['match'];
$selectedDir = $_SESSION['seldir'];
$tarDir= "kennels/" . $selectedDir . "/" . $match;

So when you run it through a loop

$my_image_array = scandir($tarDir);                    
 $img_string = "";
 foreach($my_image_array as $img_name){
if(strlen($img_name) > 2 ) {
    $imgname = $tarDir . $img_name;    
    $img_string .= '<img src = "' .$imgname. '">';
   }
}
echo $img_string;

It will echo something like this "kennels/imagesImagefile.ext" instead of "kennels/images/Imagefile.ext"

So to solve this you either add the slash / after the $match variable or in between $tarDir and $img_name like this

 $imgname = $tarDir.'/'. $img_name;

Also in your jQuery post request Add to it a qoute to your first match

$.post("loadimages.php", { 'match' : match }, 
function(output)

edited Jan 13, 2018 at 16:04

answered Jan 13, 2018 at 15:32

Ezekiel

6965 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

popeye Over a year ago

Yes I got the same. But as I said, it is not working.

Ezekiel Over a year ago

Try qouting the first match in your jQuery $.post("loadimages.php", { 'match' : match }, function(output)

popeye Over a year ago

Thank you so much....the quotes around the match did work. Thanks a ton. If you can rephrase your answer, I will accept it. Thank you so much again. Been breaking my head for the entire day today.

Ezekiel Over a year ago

I will rephrase by adding to it

Collectives™ on Stack Overflow

PHP Javascript Image rendering

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related