Need help learning ajax, grabbing data from mysql

Question

I have an ajax script, which I kinda understand, but still need some extra help.

$('.images').click(function(){
    var imageId = $(this).attr('id');
    alert(imageName);
    $.ajax({
            type: "get",
            url: "imageData.php",
            dataType: "json",
            data: {getImageId: imageId},
            error: function() {
                alert("error");
            },
            success: function(data){
                alert(imageId);
                $("#images_"+imageId).html(data);
            }
        });
    //$('#images_'+imageId).toggle();

});

I have that code, it goes to this imageData.php file

<?php
if(isset($_GET)){
    $images = "";
    $path = 'img/';
    $imageId = $_GET['getImageId'];
    $sql = mysql_query("SELECT * FROM images WHERE iID = '".$imageId."'");
    while($row = mysql_fetch_array($sql)){
        $images .= $path.$row['images'];
}
    $json = json_encode($images);
?>
<img src='<?php echo $json;?>'/>

    <?php
}
    ?>

Why does it output error when I try to echo a string from $images, but it outputs correctly when I do echo $imageId;? I'm trying to output something from mysql, but not trying to output just the id.

Need help please, thank you

Do you get that error when jQuery ajax returns you the value ? Do a `echo json_encode($images);` — arma, May 02 '11 at 22:22
It doesn't return a value, i just get the error. I tried doing the json_encode($images); I don't get an error anymore, however, I don't get a successful alert either. — hellomello, May 02 '11 at 23:03
I'm not sure if json can be alerted try console.log instead. Does firebug console response is empty? — arma, May 02 '11 at 23:07
oh it works, it doesn't alert. but i can see if i double click on the object, it shows the string. But I have one more concern if you can answer it: I'm trying to output an image, but how do I do this? I have edited my code if you can take a look at it. Thank you for your help — hellomello, May 02 '11 at 23:14
Why are you using `json_encode`? What is the content of `$row['images']`? Currently you are creating a string of whatever and set this as the src of the **one** image. Could it be that you want to output more than one image? Does the query return more than one image from the DB? — Felix Kling, May 02 '11 at 23:21

arma · Answer 1 · 2011-05-02T23:23:51.390

1

As you may get many images because you use while loop you probably want to do this like so:

in php:

$x = 0;
$another = array();
while($row = mysql_fetch_array($sql)){
    $another[$x] = $path.$row['images'];
    $x++;
}

echo json_encode($another);

and in jquery (in your success callback):

$.each(data, function(i, v){
    // Do the image inserting to the DOM here v is the path to image
    $('#somelement').append('<img src="'+v+'"');
});

edited May 02 '11 at 23:23

answered May 02 '11 at 23:18

arma

4,084
10
48
63

when you say many images do you mean because append() keeps adding multiple same objects? – hellomello May 02 '11 at 23:41
Well as you did while loop in php i assumed you retrieve multiple images sometimes. And append() will keep adding images in loop till it has added all of them. – arma May 02 '11 at 23:42

Felix Kling · Accepted Answer · 2011-05-02T23:34:53.857

You don't need use json_encode here, there is not data that needs to be in JSON format. There is also no reason to loop over the result set, if the query only returns one image.

Try this:

<?php
if(isset($_GET['getImageId'])) {
    $path = '';
    $imageId = mysql_real_escape_string($_GET['getImageId']); // SQL injection!
    $result = mysql_query("SELECT images FROM images WHERE iID = '".$imageId."'");
    $row = mysql_fetch_array($result);
    if($row) {
        $path = 'img/' . $row['images'];
    }
}
?>
<?php if($path): ?>
    <img src='<?php echo $path;?>'/>
<?php endif; ?>

If the iID is actually an integer, you need to omit the single quotes in the query.

You also have to change the dataType from json to html, as you are returning an image tag (HTML) and not JSON:

$.ajax({
    type: "get",
    url: "imageData.php",
    dataType: "html",
    data: {getImageId: imageId},
    error: function() {
        alert("error");
    },
    success: function(data){
        $("#images_"+imageId).html(data);
    }
});

Another option is to return only text (the link) and create the images on the client side:

<?php
if(isset($_GET['getImageId'])) {
    $path = '';
    $imageId = mysql_real_escape_string($_GET['getImageId']); // SQL injection!
    $result = mysql_query("SELECT images FROM images WHERE iID = '".$imageId."'");
    $row = mysql_fetch_array($result);
    if($row) {
        echo 'img/' . $row['images'];
    }
}
?>

And in JavaScript:

$.ajax({
    type: "get",
    url: "imageData.php",
    dataType: "text",
    data: {getImageId: imageId},
    error: function() {
        alert("error");
    },
    success: function(data){
        $("#images_"+imageId).html('<img src="' + data + '" />');
    }
});

thank you, changing `$("#images_"+imageId).html('');` helped. Also, I'm trying to add toggle, which I did this `$("#images_"+imageId).toggle().html('');` but it toggles when i double click it for the first time, not single click it. any idea why it does this? Thank you — hellomello, May 02 '11 at 23:45
also, if you can help me. if I echo more than one thing, say i want to echo also `echo $row['userid']` how do I separate these two "images and userid" from data in ajax? — hellomello, May 04 '11 at 03:16

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

For outputing an image you must set src attribute of the image tag, if you already have one, or you can create it on the fly. See here how to do that > jQuery document.createElement equivalent?

edited May 23 '17 at 12:31

Community

1
1

answered May 02 '11 at 23:20

morgar

2,339
17
16

Need help learning ajax, grabbing data from mysql

3 Answers3