Get new data with button click ajax

Question

I need help on how to refresh data when I click a button. What's it's doing is duplicating every time I click the button. Please help.

Here's my jquery code

$(document).ready(function() {
$('#button1').click(function(event) {
    $.ajax({
        url : 'http://localhost/api/eric_api.php?q=series',
        type : 'GET',
        dataType : 'json',
        success : function(data) {
            var table = $("#list");
            $.each(data, function(idx, elem) {
                table.append("<tr><td>" + elem.user + "</td></tr>");
            });

        },
        error : function() {
            alert('There was an error');
        }
    });
});
 });

And my html code is

<?php include 'eric_api.php'; ?>

<!DOCTYPE html>


<html>
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/api_calls.js"></script>
    <link rel="stylesheet" href="css/normalizer.css" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div>
        <table id="list"></table>
    </div>
    <div>
        <button id="button1">Get Data</button>
    </div>
</body>

I'm getting the right data returned I just want to refresh data and duplicated values cascading down my page. Thanks.

Sridhar R · Accepted Answer · 2013-11-14 11:35:54Z

1

Try this..You should clear the old data to append new data

 $('#button1').click(function(event) {
    $("#list").empty();//Clear old data before ajax
    $.ajax({
        url : 'http://localhost/api/eric_api.php?q=series',
        type : 'GET',
        dataType : 'json',
        success : function(data) {
            var table = $("#list");
            $.each(data, function(idx, elem) {
                table.append("<tr><td>" + elem.user + "</td></tr>");
            });

        },
        error : function() {
            alert('There was an error');
        }
    });
});

answered Nov 14, 2013 at 11:35

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Evans Over a year ago

Thanks for you reply it still isn't returning all the values that it should. It only returns one row when it should be two.

Sridhar R Over a year ago

whenever you click button it will call and clear the old data and fetch new data from db

john Smith · Accepted Answer · 2013-11-14 11:46:58Z

1

it's just a guess, but ofcourse you have to remove the old entrys before like :

       table.empty();
       $.each(data, function(idx, elem) {
            table.append("<tr><td>" + elem.user + "</td></tr>");
        });

edited Nov 14, 2013 at 11:46

answered Nov 14, 2013 at 11:29

john Smith

18k12 gold badges80 silver badges124 bronze badges

3 Comments

Eric Evans Over a year ago

Thanks for the quick reply I tried that but it's not returning all my values from database.

Eric Evans Over a year ago

Sridhar and demouser are both correct. Thanks I can't put checks on both so I'll go with first reply. Thank you both.

john Smith Over a year ago

sorry it's wrong to empty the table inside the loop, i updated answer

demouser · Accepted Answer · 2013-11-14 11:39:40Z

0

Try this

 success : function(data) {
    var table = $("#list");
    table.html(''); // empty table on success
    $.each(data, function(idx, elem) {
       table.append("<tr><td>" + elem.user + "</td></tr>");
    });
}

answered Nov 14, 2013 at 11:39

demouser

1

Collectives™ on Stack Overflow

Get new data with button click ajax

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related