I have a database which contains the HTML Source for the image. Using jQuery and Json; I want to display the image. Here is the snippet I have written for it,

$(document).ready(function() {
        $("#domainID").click(function() {
            var domain_id = $(this).val();
            $("#picture").html('');
            $.getJSON('/index.php/admin/show_picture/' + domain_id, function(data) {
                img = "<img src=\"https://url/" + data.htmlImageFull + "\" />";
                var items = [];
                $.each(data, function(key, val) {
                    $("#picture").append(data[key].htmlImageFull);
                });
            });
        });
    });

The main thing is I will be retrieving the html source using the ID of the image associated with it. Any changes I have to make here? I am also using MySQL to check the id associated with the image.

and Here is the HTML,

<form method="post" action="/index.php/add">
    <p>
        <select name="id" id="id" size="15">
            <option>Select a Domain</option>
            <? foreach ($unmatchedDomains as $row) {
            ?>
            <option value="<?=$row->id?>"><?=$row->domain
                ?></option>
            <? }?>
        </select>
        </td>
        <select name="id" id="id">
            <option style="alignment-adjust: &#x2190;">Select Something</option>
            <? foreach ($some as $row) {
            ?>
            <option value="<?=$row->id?>"><?=$row->name
                ?></option>
            <? }?>
        </select>
        <input type="submit" value="Something" />
        <div id="email_content"></div>
        <div id="picture"></div>
    </p>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
</form>

Testing with the provided code shows no picture/image.

• jquery
• json

You need to append the img tag to the picture element.

$.each(data, function(key, val) {
    $("#picture").append("<img src=\"https://url/" + data[key].htmlImageFull + "\" />");
});