CODEWITHSUNDEEP
javascriptjqueryjson
user2976554
user2976554

Reputation: 35

Json data in a next and previous button

I have to use a AJAX call to get Json data after clicking next and previous buttons. Json data should contain blog content displayed after clicking next or previous. Any suggestions how my function should look like? So far I have only:

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json"
    }).success(function (data) {
        $.each(data, function (key, val) {
            $('#blogcont').append(key+ val);
        });
        return false;
    });
}

And my Json file is only a test file:

   {"one":"test1", "two":"test2", "three":"test3" }

Sorry I am a beginner!!!! Thanks

Upvotes: 0

Views: 2392

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115242

Your $.ajax() syntax is incorrect 

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json",
        success: function(data) {
            var content = "";
            $.each(data, function(key, val) {
                content += "<p>" + key + ":" + val + "</p>";
            });
            $('#blogcont').html(content);
        }
    });
    return false;
}

or 

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json"
    }).done(function(data) {
        var content = "";
        $.each(data, function(key, val) {
            content += "<p>" + key + ":" + val + "</p>";
        });
        $('#blogcont').html(content);
    });
    return false;
}

Try this

function getPrev() {
    $.ajax({
        type: "GET",
        url: "../Content/test.txt",
        dataType: "json"
    }).done(function(data) {
        var content = "";
        $.each(data, function(key, val) {
            content += '<p>' + key + ':' + val + '</p>';
        });
        $('#blogcont').html(content)
                .find('p')
                .hide()
                .first().show();
        $('button.next').click(function() {
            $('#blogcont').find('p:visible')
                    .hide()
                    .next('p').show();
        });


    });
    return false;
}

Upvotes: 2

athms
athms

Reputation: 958

How about storing the JSON data as a variable, which you can then access using an index on click?

var jsonData;
$.ajax({
    type: "GET",
    url: "../Content/test.txt",
    dataType: "json",
    success: function (data) {
        jsonData= data;
    }
});

var clickIndex = 0;
$('.prev').click(function() {
    if(clickIndex > 0) {
        clickIndex -= 1;
    }
    get(clickIndex);
});
$('.next').click(function() {
    clickIndex++;

    get(clickIndex);
});

Your get function would then accept the index and find the JSON property:

function get(i) {
    var item = jsonData[i];
}

Note that you would need to add an if statement to check whether you have reached the index limit on click of .next. Also, this is fine for a test JSON file, but a better solution would be to be able to request just one relevant item from a web service returning the JSON.

Upvotes: 0

Related Questions