Json data in a next and previous button

Question

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

well for this you can use `jqGrid`. It is designed to show data in a grid based structure with next and previous buttons and several other enhancements. — Jai, Feb 28 '14 at 12:54
Could you explain more what the problem with your current solution is? Does the function getPrev() work? What type of problem do have? — Mathias, Feb 28 '14 at 12:58
Mathias, what I need to do is to load test1 then after pressing next load test2 etc. I am getting data but all at once. — user2976554, Feb 28 '14 at 13:47

Pranav C Balan · Answer 1 · 2014-02-28T15:49:41.993

2

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;
}

edited Feb 28 '14 at 15:49

answered Feb 28 '14 at 12:59

Pranav C Balan

113,687
23
165
188

It may be useful to clear content before appending: `$( "#blogcont" ).empty();` at the beginnig of `done()`. – alpakyol Feb 28 '14 at 13:23
Hi Pranav,Thanks for clearing my code. As I said it is a beginners post. Would you have any advice on how to approach the problem I have? – user2976554 Feb 28 '14 at 14:57
I have to display each of my data from json in html separately by clicking on button prev and next... – user2976554 Feb 28 '14 at 15:02
Yes, each data 'one' and 'test1' i have to put into the JS array of objects which would have an information I need for blog (obviously it is only a test data). When I load it through AJAX, I should re-create this array of objects and display the first one along with a field keeping track of it’s index position in the JS array. So, when “Next” is clicked I increase that to display the next object of the array. If that makes it clearer. It is a part of my coursework and I am really struggling with it. I am not a programmer.... Thanks – user2976554 Feb 28 '14 at 15:28
You can use variety of methods to implement that `done(function(data) { var content = ""; $.each(data, function(key, val) { content += '
' + key + ':' + val + '
'; }); $('#blogcont').html(content) .find('p') .hide() .first().show(); $('button.next').click(function() { $('#blogcont').find('p:visible') .hide() .next('p').show(); }); }); return false; }` – Pranav C Balan Feb 28 '14 at 15:48
there is chance for error in that code , it's just typed by me not tested. – Pranav C Balan Feb 28 '14 at 15:57
Yeah there are some errors. It doesn't make a loop around but i will try to work on it. Thanks for your help :) – user2976554 Feb 28 '14 at 16:12

athms · Answer 2 · 2014-02-28T13:41:25.697

0

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.

edited Feb 28 '14 at 13:41

answered Feb 28 '14 at 13:00

athms

948
5
8

Hi Athms,I was trying to use it but looks like it doesn't pick up the var. – user2976554 Feb 28 '14 at 13:51
Is the variable coming back as undefined? If so, it is probably out of scope. http://msdn.microsoft.com/en-us/library/bzt2dkta(v=vs.94).aspx does a good job of explaining this. If you're still struggling, you can always set a global variable by using window.jsonData instead - it will then never be out of scope! – athms Feb 28 '14 at 14:11
Have you looked at the developer console for errors? You probably need to also change the .txt file to a .json file. – athms Feb 28 '14 at 14:21
I am using Visual Studio and unfortunately it doesn't read json file. It is just a part of my coursework and i have to use visual studio. I have checked console and there are no errors. – user2976554 Feb 28 '14 at 14:25
If you're running IIS to load the web page, this might help: http://stackoverflow.com/questions/19516829/allow-loading-of-json-files-in-visual-studio-express-2013-for-web – athms Feb 28 '14 at 14:30

Json data in a next and previous button

2 Answers2