Question

I am trying to AJAX some content into the #BlogContainer div and cannot seem to get my click function working properly. It seems to be falling apart in the if statement, but I can’t figure out why. I have tested with alert and the return from the JSON is coming through as it should. The initial load also works fine its just the iterating through the JSON return and returning the url to the load function that doesn’t seem to be working.

The effect that I want to achieve is to load page content (blog entries) into the #BlogContainer div using .load and the URLs from the JSON file which point to the content, iterating to the next with each click on the #Nexus div.

My main question is what is the best method for loading dynamically through a JSON return? I had an each function which did the exact same thing as well (it seemed to return the correct result, but would not actually load the content). I decided to use the for loop instead since what I read indicated it was slightly more efficient, though I doubt it would have much impact in my case.

I am completely new to JS / JQ and previously had everything functioning the way I wanted using JQueryTools, but I thought the best way to learn would be to do it myself (with a little help of course 🙂 ).

HTML

<div id="BlogContainer"></div>
<div id="NexusRef" alt="03151201.htm">'03151201.htm'</div>

JSON

{
    "0": "'03151201.htm'",
    "1": "'01191201.htm'",
    "2": "'00000103.htm'",
    "3": "'00000102.htm'",
    "4": "'00000101.htm'"
}​

Javascript

$(function() {
    $('#Navigation').load('navi.htm');
    $('#BlogContainer').load('03151201.htm');
    $('#TT1').load('ajtt1.htm');
    $('#TT2').load('ajtt2.htm')
});

$(function() {
    $('#Nexus').click(function() {
        $.getJSON("BlogRoll.json", function(data) {
            var i = 0;
            var n = ($('#NexusRef').html());
            var length = data.length;

            for (i = 0; i < length; i++) {
                if (data[i] == n) {
                    $(function() {
                        $('#BlogContainer').load(data[i + 1]);
                    });
                } else {
                    alert(data[i + 1]);
                }
            }
        });
    });
});​

Answer 1

this should do it

$(function() {
    //assuming you have this JSON to work with:
    var pages = {
        "0": "'03151201.htm'",
        "1": "'01191201.htm'",
        "2": "'00000103.htm'",
        "3": "'00000102.htm'",
        "4": "'00000101.htm'"
    }

    //add a click handler to your button
    $('#Nexus').on('click', function() {

        //prepare a storage url
        var url;

        //pick out first link, copy, and remove it
        //works like Array.shift()
        for (var key in pages) {
            if (pages.hasOwnProperty(key)) {
                url = pages[key];
                delete pages[key]
                break;
            }
        }

        //Do a GET to retrieve contents and append to container
        $.get(url, function(contents) {
            var contents = url;
            $('#BlogContainer').append(contents);
        });
    });
});​