in Editable table (row) pressing add/edit will cause a page refresh in AngularJS

[ehsan-hakimi]

Thanks vitalets, such a useful module and perfect documentation. Would you mind to update the document in Editable row section. The sample code say

but if we use that, it will cause a page refresh. For someone who are not expert (like me) take some hours to find out that they should either use $event.preventDefault(), $event.stopPropagation() on add/edit button or (easier method ) to add (type="button") to both add/edit button which will prevent submition of form. Thanks

[ckosloski]

I think you forgot some code snippet in your comment above.

The code examples for editable row already have button type set to "button".

[ehsan-hakimi]

Hi Ckosloski, I am referring to this section of document http://vitalets.github.io/angular-xeditable/#editable-row in html section, add/edit/del button doesn't have any type. (however save/cancel button have it).

 <!-- form -->
        <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button class="btn btn-danger" ng-click="removeUser($index)">del</button>
        </div>  
      </td>
    </tr>
  </table>
  <button class="btn btn-default" ng-click="addUser()">Add row</button>
</div>

Thanks

[ckosloski]

OK, I will update the code sample to put a type="button" there.

[ghost]

@ehsan-hakimi @ckosloski Hello! I am new to angular and I'm having the same problem. I have a form

<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline"
                        shown="inserted == item">
                    <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary editable-table-button btn-xs" ng-click="saveNote(item)">Save</button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default editable-table-button btn-xs">Cancel</button>
                  </form>
                  <div class="buttons" ng-show="!rowform.$visible">
                    <button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit</button>
                  </div>

and when I press on Save, it reloads the page. I wouldn't mind if I woudn't have pagination, but if I edit something on page x, after saving and reloading, it jumps on the first page. How can I solve this? Thank you!

[ckosloski]

Is your saveNote method running and then the page reloads? Can you provide a plunker/jsfiddle showing your issue?

[ghost]

    $scope.saveNote = function (item) {
      var row =  $("#"+ item.id);
      var val =  row.find('input').val();
      Restangular.one('users', $scope.patientID).one('readings/bgs', item.id).patch({tags: {note: val}})     
    };

This is my saveNote function. The item is visually saved in the textbox and then I am saving it into the database using a patch request.

[ckosloski]

I think you need to change your form to have onaftersave="saveNote($data)" and remove the click event from the save button.
Take a look at the editable-row example.

[ehsan-hakimi]

I think, you need to add type="button" to your Edit button in your html code. This solved my issue.

[ghost]

@ckosloski @ehsan-hakimi I don't have access right now to my code, but I will try on Monday to add onaftersave="saveNote($data)". I already tried to chang the Edit from type="submit" to "button", as I saw in your first post here, but after doing this, the data didn't save and the form didn't cancel itself.

[ghost]

It's solved now, the problem was from some dropdown filters I had and weren't inside the table and for that I had to move these classes st-table="displayedCollectionBG" st-safe-src="smartTableDataBG" table st-set-filter="customFilter"> to a parent div. That caused the reload... Now I have to move those filters inside the table and put the classes back to the table. Thank you!

[ckosloski]

OK, can this issue be closed now?

[ghost]

Yes, I think so... :)

[ckosloski]

@eugef can you close this issue?