Images not loading on AJAX call

[waubain]

I am trying to display either daily or monthly webcam images depending on the status of a toggle switch. The default is Daily when the page loads and displays today's images as it should when the page first loads. The problem is when the button is toggled, the Monthly images do not load or neither do the Daily images. I am making an AJAX call to load the different images. All this works except the loading of the images when the button is toggled. There are 2 different php pages for Daily or Monthly images. The array contains the image and the file date.

Here is my code. I am not getting any errors on the console and the network status is 200. A test string on both pages does display when toggling the button.

<div id="cam_images">
                <?php include_once 'get_images_day.php';?>
            </div>

<script>
    function showWx(toggle) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("cam_images").innerHTML = this.responseText;
            }
        };
        if (toggle === 'month') {
            var url="get_images_month.php";
        }
        else {
            var url="get_images_day.php"; 
        }
        xmlhttp.open("GET",url,true); 
        xmlhttp.send();
    }
</script>

This is the php page displaying what I am trying to return

...build image array

   //echo "Day Images Test";   // for testing 
    for ($i = 0; $i < count($images); $i++) {
        echo "<div class='mySlides'>";
        echo "<img src='camgallery/".$images[$i][0]. "'>";
        echo "</div>";
    }
    echo "<a class='prev' onclick=\"plusSlides(-1)\">&#10094;</a>";
    echo "<a class='next' onclick=\"plusSlides(1)\">&#10095;</a>";
    echo " <div class='caption-container'>";
        echo "<span id='caption'></span>";
    echo "</div>";
    echo "<div class='row'>";
        for ($i = 0; $i < count($images); $i++) {
            echo "<div class='column'>";
            echo "<img class='demo cursor' src='camgallery/'".$images[$i][0]. "' style='width:100%' alt='".$images[$i][1]."''>";
            echo "</div>";
        }

Thank you in advance for looking.

 

[spamjim]

When directly accessing the following PHP files in a web browser, are you getting the expected data?
[ul]
[li]get_images_month.php[/li]
[li]get_images_day.php[/li]
[/ul]

If so, then you can limit your focus to JS and possibly seek assistance in the JS forum.

 

[waubain]

Yes, I am getting the expected data when directly accessing both PHP files in a browser.

I will give the JS forum folks a try. Thanks for responding.

 

[southbeach]

I have found that when direct call to the script works and not when called via AJAX the root cause normally is a fatal error in PHP due to missing parameters or http returns error 500

Your code checks for 200 to show image - What if it is not 200? Use F12 to look under the hood and see what is going on, check your request / response content (I use firefox, very friendly debugging tools).

Also, try using this

ini_set('display_errors', 'On');
error_reporting(E_ALL);

in your PHP script or look at your /var/log/apache2 (or where ever you keep your logs) to see what is going on

Finally, use console.log() in your JS to give you additional info on what is being returned.

AJAX can be tricky to troubleshoot but if you have things in place (like, in your PHP script you can write to a file and check that file to monitor where you hit what values ...).

Oh, if you are using session and process only runs once session is validated, an AJAX call requires you to reinstanciate the session where opening a 2nd tab does not.



--
SouthBeach

http://www.fp2php.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.