Ajax multiple file names in one string response

I want to return the file names to use in my html modal. But instead returning each file name, it returns all of them at once. Check the following image:

My modal code is:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <?php 
            $text = '<div class="fetched-data"></div>';
            echo $text;
        ?>

        <div class="modal-body"></div>
    </div>
</div>
</div>
</div>

My script to open modal and fetch the files is:

$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function(e) {
        var rowid = $(e.relatedTarget).data('id');
        $.ajax({
            type: 'post',
            url: 'fetch_record.php', // Here you will fetch records
            data: 'rowid=' + rowid, // Pass $id
            success: function(data) {
                alert(data);
                $('.fetched-data').html(data); // Show fetched data from database
                $('<div>').append($("#myModal .modal-body img").clone()).html();
            }
        });
    });
});

And finally my file to fetch the file names from the server is:

<?php

$uId = $_POST['rowid'];
$directory = 'uploads/'.$uId.'/thumb';

$scanned_directory = array_diff(scandir($directory), array('..', '.'));
$fi = new FilesystemIterator($directory, FilesystemIterator::SKIP_DOTS);
$number_files = iterator_count($fi);

foreach($scanned_directory as $img){
    echo $img;
}

?>

I want to show each image in my modal how should I do it?

Answer

This may help you,

$scanned_directory = array('1.jpg','2.jpg','3.jpg');

$result = "";

foreach($scanned_directory as $img){
    $result .= "<img src='".$img."'> <br>"; 
}

echo $result;

Advertisement

Answer