Getting an image source from JSON data

Question

I'm attempting to call a PHP file and have it return a result (a single record's 'pageLocation') from a database table ('page'). I then want to get that result into a variable, so I can use it while creating an image in html.

Currently, the image is being created but the source is not feeding into it, leaving a default empty image at the correct size.

Javascript:

        // Loads a list of comics created by the user from the database.

        function loadComic()
        {
        var xmlhttp = new XMLHttpRequest();
        var getID = '<?php echo $_SESSION["userID"]; ?>';
        var url = "loadCom.php?userID="+getID;


        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                loadComicJSON(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        }

        // JSON parsing for 'loadComic'.

        function loadComicJSON(response)
        {
            var arr = JSON.parse(response);
            var i;
            var out = "";

            document.getElementById("loadList").innerHTML="";

            if (arr.length == 0)
            {
                //Non-relevant code affecting layout if no comics are found.
            }
            else
            {   
                out+="<br>";

                for(i = 0; i < arr.length; i++)
                {

// Gets image source from database.

                    imgSrc = "";
                    tempID = arr[i].comicID;
                    $.post("getCover.php", {'comicID':tempID}, function(result)
                    {
                        imgSrc += ("" + result);
                    }
                    );

                    // Creates image item and associated radio button.

                    out += "<hr><br><img name = '" + ('com' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='" + imgSrc + "'><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br>";
                }

            }


        }

    </script>

PHP (getCover.php):

<?php
if (isset($_POST["comicID"]))
{
    include_once('includes/conn.inc.php');
    $checkID = $_POST["comicID"];

    $query = ("SELECT FIRST (pageLocation) FROM page WHERE comicID = '$checkID' ORDER BY pageNum");
    $result = mysqli_query($conn, $query);


    $conn->close();
    echo ($result);
}
else
{   
    $checkID = null;
    echo "Error. No comic found.";
}

?>

Thanks for any help provided.

What is in your $result? It seems to me that it is just a mysqli_result. — emha
– emha, Commented Mar 3, 2015 at 21:30
What I'm wanting to get is a file location , for example 'comics/0/0.jpg' where '0.jpg' is the image source I want to load. If $result is the wrong thing to be looking at then what should I be doing to get it? (The query should only return one result by my estimate). — alex494
– alex494, Commented Mar 3, 2015 at 21:35

dudeman · Accepted Answer · 2015-03-03 21:35:19Z

1

You need to get he data from the result, like:

$row = $result->fetch_assoc()

Also, yes, Jim G is right, you need to escape that POST variable.

answered Mar 3, 2015 at 21:35

dudeman

6034 silver badges11 bronze badges

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

6 Comments

alex494 Over a year ago

So in that case I would change the echo line to: echo ($row['pageLocation']); Is this correct? I assume I'd need to maybe put that in a loop.

dudeman Over a year ago

Yes, you can print_r($row); to see the structure.

alex494 Over a year ago

It still doesn't seem to be feeding it into the image tag.

dudeman Over a year ago

I would do print_r($row);die(); then look in my browser debug console under XHR requests to see what that response looks like.

alex494 Over a year ago

Pardon my ignorance but where would the XHR requests be found if I'm using Firebug

|

Collectives™ on Stack Overflow

Getting an image source from JSON data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related