I'm trying to return text from a .txt file using ajax

Posted by saad on Stack Overflow See other posts from Stack Overflow or by saad
Published on 2014-06-02T09:05:36Z Indexed on 2014/06/02 9:26 UTC
Read the original article Hit count: 197

Filed under:
|
|

I'm trying to get my first ajax script to work. The five images are all side by side. Whenever the user hovers the mouse over any of them, it sends a request to a .txt file on the server and the caption is displayed in the div#image_caption.

The problem is, even when I mouse over the image, the caption does not display. I'm not quite sure what could be causing this.

Here is the code

<!DOCTYPE html>

<html>

    <head>

            <style type="text/css">
                   div#images{overflow: auto;}
                   img{float: left;
                       width: 200px;
                       height: 200px;
                       margin-right: 15px;}
                   div#image_caption {width: 1040px;
                                      height: 300px;
                                      margin-top: 30px;
                                      border: 2px black solid;}
            </style>

            <script type="text/javascript" src ="jquery-2.0.3.js"></script>

            <script type="text/javascript">

                    $(document).ready(function() {
                            function show_caption(url) { //shows the caption once the mouse hovers over the image
                                    var asyncreq;
                                    if(window.XMLHttpRequest) { //IE 7+ and other browsers
                                            asyncreq = new XMLHttpRequest();  //define the request
                                    } else { //for IE 7-
                                            asyncreq = new ActiveXObject("Microsoft.XMLHTTP");
                                    }
                                    asyncreq.open("GET", url, true); //give it properties
                                    asyncreq.send(); //send the request to the server
                                    asyncreq.onreadystatechange = function() {
                                            if(asyncreq.readyState == 4 && asyncreq.status == 200) {
                                                    $("div#image_caption").html(asyncreq.responseText); //add the caption (response text from the file) to the box
                                            }
                                    }
                            } //end of show_caption(url)
                            function hide_caption() { //hides the caption once the mouse is gone
                                    $("div#image_caption").html("");
                            }
                    });
            </script>
    </head>
    <body>
            <h1>Hover over an image for more information.</h1>
            <div id = "images">
                    <img src="images/backg.jpg" mouseover = 'show_caption("backg_caption.txt");' mouseout = 'hide_caption();'/>
                    <img src="images/Desert.jpg"mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/>
                    <img src="images/Penguins.jpg" mouseover = 'show_caption("Penguins_caption.txt");' mouseout = 'hide_caption();'/>
                    <img src="images/Tulips.jpg" mouseover = 'show_caption("Tulips_caption.txt");' mouseout = 'hide_caption();'/>
                    <img src="images/odji1.jpg" mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/>
            </div>
            <div id = "image_caption">
            </div>
    </body>
</html>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery