Access Each JSON Array Element onClick Using AJAX PDO PHP

Question

I'm trying to access each element stored as a Base64 image/blob in a JSON array constructed from a MySQL query.

The idea is to click a button that goes through each element and displays the image.

I have gotten it to display the first image however when i click again, the next image doesn't show.

Any help will be much appreciated.

AJAX:

   $(function () {
        $('#getimg1').on('click', function () {
             $.ajax({
            type:'GET',
            dataType: 'json',
            url: 'http://testing/api/getimg',
            success:function(getinfo){
                 $.each(getinfo, function(i, displayimg){

                $('#HTMLBox').prop('src','data:image/png;base64,' + displayimg.XXX ---- //Here I'm suspecting something?); 

                 });
            }
        }); 
    });  
    });

PHP:

 $sql = "SELECT img from artistlocation";

    try{
        $db = new db();
        $db = $db->connect(); 
        $stmt = $db->query($sql);
        $data = array();
        while($result = $stmt->fetch(PDO::FETCH_OBJ))    
        {
            $data[] = base64_encode($result->img);
        }
       echo json_encode($data);
    }
    catch(PDOException $e){
        echo '{"error": {"text": '.$e->getMessage().'}';
    }

I'm using just 2 images to test this.

How are you passing what "number" image you're on? From what I can see, you're simply querying, and returning the same elements. So, either you need to load them each in a container, and use another function to switch between, or you need to pass some parameter to your Ajax call that will say "skip the first x images" — Adam J, Apr 16 '18 at 20:48
@webdevsoup Yes i see your point. Each click just querys the database and returns the array but nothing is making it go between elements in that array. Any ideas on how to do such a thing? — style237, Apr 16 '18 at 20:51
There's a few ways to go about doing it, you can send data in your AJAX call, or you can load all of the images in to separate "containers" within your HTML. Without seeing your HTML, I can't tell you how to do it. — Adam J, Apr 16 '18 at 20:54
@webdevsoup My HTML is very basic. All I have is a img tag with an src that changes to the one set by the AJAX call. I prefer to not create multiple containers as im essentially my goal is to make a 'slideshow' out of the image from the database — style237, Apr 16 '18 at 20:59
Your slideshow will need to have many "containers" that you show and hide, that way you're not using up resources with multiple ajax calls to fetch images every single time the user wants to view the next image. — Adam J, Apr 16 '18 at 21:05
@webdevsoup Could you possibly give me example code of this being done please? I'm still very new to this and you seem to be the boss man with this kind of thing. — style237, Apr 16 '18 at 21:08
There's a lot that goes in to giving an example like that. Here's a link to another StackOverflow example of such a thing: https://stackoverflow.com/questions/12068734/jquery-simple-image-slideshow-tutorial — Adam J, Apr 16 '18 at 21:12
Are you trying to display more images with each click or replace the previous one? — Sebastian Sulinski, Apr 16 '18 at 21:13
@SebastianSulinski replace the current image with each click — style237, Apr 16 '18 at 21:17
From what I can see looking at your PHP set up - you are returning all images with the first ajax call - perhaps you could store them somewhere and just rotate through them with each click - let me write up some code to illustrate it. — Sebastian Sulinski, Apr 16 '18 at 21:18

score 0 · Answer 1 · answered Apr 16 '18 at 20:57

So, if you wanted to do something really dirty, you could track how many images you've loaded via a hidden input. You can increment that upon your ajax success. Then, what you can do is pass to your PHP via your AJAX that value, and run something like:

SELECT * FROM images LIMIT 1 OFFSET $images_already_fetched

By passing an OFFSET declaration, you're telling it to skip that many rows.

Sebastian Sulinski · Accepted Answer · 2018-04-16T21:34:45.990

Because the ajax call you make will return all of the image records, I think it would be more efficient to store that data in a variable and then just rotate through the images rather than making call to your php code with each click. Here's what I would suggest, if you're using just jQuery:

var images = [],
    index = 0,
    count = 0,
    max = 0;

$.getJSON("http://testing/api/getimg", function(data) {
    images = data;
    count = images.length;
    max = count - 1;
});

$('#getimg1').on('click', function() {

    if (count === 0) {
        return;
    }

    if (index === max) {
        index = 0;
    } else {
        index++;
    }

    $('#HTMLBox').attr('src', 'data:image/png;base64,' + images[index]);

});

I must admit I didn't test it, but I believe it should work - if you could try and see how you get on.

This worked an absolute treat Sabastian! Thank you very much :) — style237, Apr 16 '18 at 22:37

Access Each JSON Array Element onClick Using AJAX PDO PHP

2 Answers2