how to load next data when button is clicked

Question

i have a list of patient on my firebase db more than 11 and what i wanted to do is load first 5 patient. but my problem is when i clicked the next button it reloads the page here is my script. but when i put /:next on my endpoint the script doesn't work. but when i removed it what happen is it loads the first 5 data but when i click next button/prev button it just reload the page.

router.get('/host/:next', function (req, res) {
    var ref = database.ref('patients').limitToFirst(5);

    var quickReplies = {
        messages: [
            {
                text:  "select now..",
                quick_replies: []
            }
        ]
    };

    var backButton = {
        "set_attributes":{
            "next":-1
        },
        "title":"\u23ea",
        "next":"0",
        "block_names":["list"]
    };

    var nextButton = {
        "set_attributes":{
        "next":1
        },
            "title":"\u23e9",
            "next":"0",
            "block_names":["list"]
    };

    ref.once('value', function (snapshot) {
        snapshot.forEach(function (childSnapshot) {
            var childKey = childSnapshot.key;
            var childData = childSnapshot.val();
            var setAttr = {
                set_attributes: {
                    title: childData.firstName,
                    next: 0
                },
                title: childData.firstName,
                next: 0,
                block_names: ['na']
            };

            quickReplies.messages[0].quick_replies.push(setAttr);
        });
        quickReplies.messages[0].quick_replies.unshift(backButton);
        quickReplies.messages[0].quick_replies.push(nextButton);
        res.send(quickReplies);
    });
});

and this is my json get request.. localhost:8100/api/users/host?next={{next}}

the default value for the next is 0..

score 0 · Answer 1 · answered Dec 22 '17 at 10:58

To prevent such behavior you need to add event.preventDefault() on your button click event. Just like this with native JS or with jQuery.
Second point, to make your request dynamically change data, you need to send json from your server and than parse it in front.
Or you can send rendered view directly to client and than change your DOM with this view.
For example like this with jQuery load:

$('body').load('<your api url which returns view');

Or you can make more actions with data using $.get() requests. Like this:

$.get('your api url which returns view or json', function(response){
  if(response.status === 'ok'){
    // append view or parse json
  } else {
    // some error with your data
  }
}).fail(function(){ //if server responds with 500 status });

how to load next data when button is clicked

1 Answers1