Get Javascript to work? $.ajax not working right?

Question

So, the Javascript code which can be found below doesn't seem to be functioning properly.

The goal is to get the text below the map to change on hover of the rooms.

The JSON (zadias.me/SVG/rooms.json) data that pulls the data seems to be where I'm faulting, I think. When I test/debug the code by placing .innerHTML statements that would print in the text field, it would work if I placed the .innerHTML before the $.ajax, however, if I put the .innerHTML function in the "success" part of the .ajax, it wouldn't work..

Javascript:

$(document).ready(function(){
var json = (function () { //this function obtains the data
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'http://zadias.me/SVG/rooms.json',
        'dataType': "json",
        'success': function (data) { 
            json = data;
        }
    });
    return json;
})();

function hashTag(){
    var hashTag, hash2;

    hashTag = location.hash; //obtains the part of the URL with the hash tag and what follows
    hashTag = hashTag.replace(/#*/, ''); //replaces the hash tag

    if(hashTag.length > 0){
        for(i=0 ; i<json.rooms.length ; i++){
            if (json.rooms[i].roomId == hashTag) //linear search through array of rooms to see if any equal the hashTag
            {
            document.getElementById('room_info').innerHTML = '<img src="images/' + json.rooms[i].image + '" /><h4>' + json.rooms[i].name + '</h4>' + json.rooms[i].HTMLdescrip;
            } //loads the data from the JSON data.
        }
    }
}; 

function setHash(){
    window.location.hash = this.id; //creates the hash link based on the object's id (object id acquired from the JSON data) and sets it
};

function setHTML(){
    for(i=0 ; i<json.rooms.length ; i++){
    if (json.rooms[i].roomId == this.id)
    {
    document.getElementById('room_info').innerHTML = '<img src="images/' + json.rooms[i].image + '" /><h4>' + json.rooms[i].name + '</h4>' + json.rooms[i].HTMLdescrip;
    }
  }
};

window.onload = hashTag();
$(".active").click(setHash);
$(".active").mouseenter(setHTML);
//$(".active").mouseover(setHTML);
$(".active").mouseleave(hashTag);
});

I understand that it's a bit localized, how could I change this up?

`'async': false,` is a very bad idea. Locks up the browser during the ajax call. — jfriend00, Jul 01 '13 at 15:23
`Uncaught TypeError: Cannot read property 'style' of null` on line 1 of `PresParkEisenhower2.svg`. `document.body.style` is causing it. — Reinstate Monica Cellio, Jul 01 '13 at 15:24
Thanks @Archer! I got rid of it, I don't seem to see any improvement.. @jfriend00 I tried getting rid of `'async':false`, but it didn't seem to do much. — user2533212, Jul 01 '13 at 15:31

score 0 · Answer 1 · answered Jul 01 '13 at 15:34

0

If I'm getting it right, you need the variable json to be global. Just take off the var at the beginning and see if that helps.

answered Jul 01 '13 at 15:34

Reinstate Monica Cellio

25,975
6
51
67

Worth a try. The only thing I can suggest is to put some `console.log()` statements in to dump out variable values and check them, or use the debugger and step through the code. – Reinstate Monica Cellio Jul 01 '13 at 15:41
Which I've now done. Mouse-over only returns an element with the id of svg. Looks like you can't select the rooms in the way you are doing. (Go to console and enter `$(".active")`). – Reinstate Monica Cellio Jul 01 '13 at 15:45
I'm rather new to Javascript and I'm not too familiar with console.log(). I'll do some research on it and hopefully it'll help. Thanks for the help! – user2533212 Jul 01 '13 at 15:45
From further reading it looks difficult to parse an svg element in the manner you're trying. I'd do some googling on that first. – Reinstate Monica Cellio Jul 01 '13 at 15:50

score 0 · Answer 2 · edited May 23 '17 at 10:25

You may want to try something more along these lines:

// this returns a promise
var json,
    response = $.ajax({
        'async': false,
        'global': false,
        'url': 'http://zadias.me/SVG/rooms.json',
        'dataType': "json",
        'success': function (data) { 
            json = data;
        }
    });

window.onload = function() {
    // ensures that the ajax has returned a value
    response.done(hashTag);
};

The document doesn't really have to be ready for you to run an AJAX request.

You may want to take a look here for accessing the SVG elements: How to access SVG elements with Javascript. Requires a change from <embed> to <object>

Michael Geary · Answer 3 · 2013-07-01T16:17:58.250

Here's a version of your code with a few updates:

var json;

$(document).ready(function(){
    $.ajax({
        'global': false,
        'url': 'http://zadias.me/SVG/rooms.json',
        'dataType': "json",
        'success': function (data) {
            json = data;
            hashTag();
            $(".active")
                .click(setHash)
                .mouseenter(setHTML)
                .mouseleave(hashTag);
        }
    });
});

function hashTag(){
    //get everything in the URL after the #
    var hash = location.hash.replace(/#*/, '');

    if(hash.length > 0){
        //linear search through array of rooms to find the hashTag
        $.each( json.rooms, function( room ) {
            if (room.roomId == hash) {
                $('#room_info').html(
                    '<img src="images/' + room.image + '" /><h4>' +
                    room.name + '</h4>' + room.HTMLdescrip
                );
            } //loads the data from the JSON data.
        });
    }
};

 // creates the hash link based on the object's id
 // (object id acquired from the JSON data) and sets it
function setHash(){
    window.location.hash = this.id;
}

function setHTML(){
    $.each( json.rooms, function( room ) {
        if (room.roomId == this.id) {
            $('#room_info').html(
                '<img src="images/' + room.image + '" /><h4>' +
                room.name + '</h4>' + room.HTMLdescrip
            );
        }
    });
}

What I changed:

Made the json variable global.
Removed the async:true. Never use that!
Removed global:false. You don't have any global Ajax event handlers, so this flag has no effect.
Removed unnecessary quotes around the $.ajax() property names.
Removed the event handler setup at the end of the code.
Moved that initialization inside the $.ajax() callback since that is when the data is ready.
Chained together the event handler setup on $(".active") instead of repeating the selector call.
Used $.each() instead of the for loops for simplicity.
Changed the json.rooms[i] references to room thanks to $.each().
Used $('#foo').html(html) instead ofdocument.getElementById()and.innerHTML`, again for simplicity.
Simplified the setup of the hashTag variable and changed its name to hash to avoid confusion with the function name.
Removed unnecessary semicolons at the end of function definitions.
Made the indentation and formatting more consistent.
Shortened the excessive line lengths.

Some of these changes are just stylistic, but they're things I recommend. Naturally you can pick and choose among those after looking through the code.

The important point is making sure that the json data is available not just where it's needed, but when it's needed, and without using async:false.

Get Javascript to work? $.ajax not working right?

3 Answers3