Adding a record to a dynamic table (using AngularJS) reloads the entire page

Question

The table footer is used to add a new record to the table. After adding by clicking button, the new record is actually added to the table body but up to a second, after that the entire page is reloaded and the inserted record disappears.

Table is created correctly from the prepared data array.
Deleting records works fine.

Where can I have a problem? I don't want to have page reloads.

Table:

<table class="table">
            <thead>
            <tr>
                <th>Nazwa tchnologii</th>
                <th>Poziom zaawansowania</th>
                <th>-</th>
            </tr>
            </thead>

            <tfoot>
            <tr>
                <!--Text for new record-->
                <th><input type="text" ng-model="nazwaTechnologii" class="form-control"></th>
                <!--Button to add-->
                <th><button ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button></th>
            </tr>
            </tfoot>

            <tbody id="cialoTabeli">
            <tr ng-repeat="technologia in technologie track by technologia.id" id="{{technologia.id}}">
                <td>{{technologia.nazwa}}</td>
                <!--Button to remove-->
                <td><input type="button" ng-click="usunTechnologie(technologia.id)" class="btn btn-danger btn-sm">Usuń!</input></td>
            </tr>
            </tbody>
 </table>

Piece of code JavaScript/AngularJS:

var indeks = 5;
$scope.dodaj = function () {
      $scope.technologie.push({ 'id': ++indeks, 'nazwa': $scope.nazwaTechnologii});
      $scope.nazwaTechnologii='';
};

$scope.technologie = [   //prepared values
    {"id":1,"nazwa":"C++"},
    {"id":2,"nazwa":"java"},
    {"id":3,"nazwa":"Python"},
    {"id":4,"nazwa":"C"}
];

Can we see more of the HTML and controller code? I tried your code in a plunker (plnkr.co/edit/gVdUeAKX8WAu3w0MCW21) and it seems to work fine, so there is likely something else going wrong - likely that you have all of this inside a form and are accidentally submitting the form. — james00794
– james00794, Commented Oct 31, 2017 at 22:04

davidkonrad · Accepted Answer · 2017-10-31 22:04:59Z

2

To quote MDN :

type
The type of the button. Possible values are: submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

Means you need to set the button type to button in order to prevent the page from being "submitted" :

<button type="button" ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button>

answered Oct 31, 2017 at 22:04

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

Collectives™ on Stack Overflow

Adding a record to a dynamic table (using AngularJS) reloads the entire page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related