Question

Turning off asynchronous requests in jQuery fixed the issue.

I have the following Javascript & AJAX request (using jQuery) in my page:

    "use strict";

    var hsArea, counter, hotspots, count;
    counter = 4;
    count = 0;
    hotspots = {};

    function fetchHotspotList() {
        $.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) {
            hotspots = json;
        });
    }

    function displayHotspot(type, id, number) {
        $.ajax({
            url: '/alpha/engine/hotspots/gethotspot.php',
            dataType: 'json',
            data: {'type' : type, 'id' : id},
            success: function(json) {
                console.log(json);
                var hotspot, extract;
                    extract = json.content;
                    extract = extract.replace(/<(?:.|\n)*?>/gm, '');
                    extract = extract.substring(0, 97);
                    extract = extract + "...";
                    json.content = extract;

                    hotspot = document.createElement("div");
                    hsArea.append(hotspot);
                    hotspot.setAttribute('class','hotspot');
                    hotspot.setAttribute('id','hotspot' + number);

                    $(hotspot).css('position', 'absolute');
                    $(hotspot).css('top', number * 100 + 100);
                    $(hotspot).css('left', number * 100 + 110);

                    hotspot.innerHTML = "<h1>"+ json.title + "</h1><p>" + json.content + "</p>";
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus, errorThrown);
            }
        });
        }

        function listHotspots() {
            for(count = 0; count < counter; count++) {
                (function(count) {
                    displayHotspot('scribble',hotspots[count], count);
                    count = count + 1;  
                })(count);
            }
        }

        function loadHotspots() {
            fetchHotspotList();
            listHotspots();
        }

    $(document).ready(function() {
        hsArea = $("#hotspotArea");
        fetchHotspotList();
        listHotspots();
    });

(Sorry the formatting is a bit off!) – Now, the $(document).ready() function assigns the hsArea variable as it should, however, a combination of fetchHotspotList() and listHotspots() returns:

Uncaught TypeError: Cannot call method 'replace' of null

However, if in the Google Chrome Javascript console, I run:

loadHotspots();

it fetches the data from the AJAX request and displays it properly on the page. At first I thought the problem was that I Wasn’t using the $(document).ready() handler, but adding it hasn’t fixed it. Neither has using an onload handler inside of the body tag.

Any help would be greatly appreciated.

Regards,
Ben.

Answer 1

It’s probably due to the fact that your listHotSpots function is called before fetchHotSpots returns (since it’s an async call).

You’re better off chaining the execution of listHotSpots to the completion of fetchHotSpots, like so:

function fetchHotspotList() {
    $.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) {
        hotspots = json;
        listHotSpots();
    });
}

You may be better off modifying listHotSpots to take the json data returned from your AJAX call. Hope this helps!