Change src of element loaded with AJAX

Question

I'm trying to alter the src of img s loaded via. AJAX, wherein the <select> and <option> elements used to control the function are also loaded by AJAX.

I'm trying to do this in order to change the size of Flickr images on the page.

I've tried loading the element, and calling an existing function to update it, but of course the <select> option doesn't exist on document.ready() and thus returns null when I try to get it.

I've also tried loading a new <script type='text/javascript'></script> in the PHP file I'm using for my XML response, but although this shows on the page it obviously isn't picked up as a source.

How can I tell the Document to 're-ready' itself, or acknowledge new sources?

Here's my code as it stands:

Making the request

    function makeRequest (url, userID, searchString, selectedLicense) {
        event.preventDefault();

        var formData = new FormData();
        formData.append("userID", userID);
        formData.append("searchString", searchString);
        formData.append("selectedLicense", selectedLicense);

        var xmlRequest = new XMLHttpRequest();
            xmlRequest.open("POST", url, true);
            xmlRequest.send(formData);

        xmlRequest.onreadystatechange=function()
        {
            if (xmlRequest.readyState===4 && xmlRequest.status===200) {
                document.getElementById("working...").innerHTML="<p style='background-color:#BCED91; width:200px; text-align:center;'>Done!</p>";
                document.getElementById("results").innerHTML=xmlRequest.responseText;
            } else {
                document.getElementById("results").innerHTML="<p>Ready State: " + xmlRequest.readyState + "</p> <p>Status Code: " + xmlRequest.status + "</p>";
            }
        }
    }

The PHP

//more code before
        $resultString = $resultString . "<script type='text/javascript'>"
                                        . "function sizeChanged(i, select) {
                                                var sel = getSelectedOptionValue(select);
                                                var imgURL = document.getElementById(i.toString());

                                                alert(imgURL);
                                            }"
                                      . "</script>";

        //main loop
        foreach ($XML->photos->photo as $photo):
            $resultString = $resultString . '<div class="photoBox"' . photoBox($photoCounter) . "> <p>" . $photoCounter . ". <a href=\"" . $baseURL . $photo['owner'] . "/" . $photo['id'] . "\">" . $photo['title'] . "</a>" . "</p>"
                                          . " <p>" . "<img id='" . $photoCounter . "' src=\"http://farm" . $photo['farm'] . $imgURL . "/" . $photo['server'] . "/" . $photo['id'] . "_" . $photo['secret'] . "_" . $size . "\" alt=\"" . $photo['title'] . "\">" . "</p>"
                                          . "<select form='addInformationForm' id='selectSize" . $photoCounter . "' onChange='return sizeChanged(" . $photoCounter . ", selectSize" . $photoCounter . ");'>"
                                            . "<option value='n'>Small (320)</option>"
                                            . "<option value='z' selected='selected'>Medium (640)</option>"
                                            . "<option value='h'>Large (1600)</option>"
                                          . "</select>"
                                          . "</div>";
            $photoCounter++;
        endforeach;
//more code here
echo $resultString;

The HTML Output (Example)

<div class="photoBox" style="background-color:#FFFFFF">
    <p>1. <a href="http://www.flickr.com/photos/25053835@N03/8427833074">Killip's Adirondack Travelog, page 20</a></p>
    <p><img id="1" src="http://farm9.staticflickr.com//8184/8427833074_2f7e22e7ce_z.jpg" alt="Killip's Adirondack Travelog, page 20"></p>
    <select form="addInformationForm" id="selectSize1" onChange="return sizeChanged(1, selectSize1);">
         <option value="n">Small (320)</option>
         <option value="z" selected="selected">Medium (640)</option>
         <option value="h">Large (1600)</option></select>
</div>

Any advice much appreciated!

NOTE: This code is for an internal tool, not a client-facing website.

Answer 1

The <select> doesn't exists at onload , but it does when you create it:

var res = document.getElementById("results");
xmlRequest.onreadystatechange = function() {
    if (xmlRequest.readyState===4 && xmlRequest.status===200) {
        document.getElementById("working...").innerHTML="<p style='background-color:#BCED91; width:200px; text-align:center;'>Done!</p>";
        res.innerHTML = xmlRequest.responseText;
        var select = res.getElementsByTagName('select')[0];
        /* Use select here */
    } else {
        res.innerHTML="<p>Ready State: " + xmlRequest.readyState + "</p> <p>Status Code: " + xmlRequest.status + "</p>";
    }
};

Note that the <img> element should be available too, but you won't know its dimensions because it won't be downloaded. If you want to wait until it's loaded, you can add a load event listener.