vitalets / angular-xeditable

Edit in place for AngularJS
http://vitalets.github.io/angular-xeditable
MIT License
1.91k stars 403 forks source link

$activate(name) not working #459

Closed moose-byte closed 8 years ago

moose-byte commented 8 years ago

I am trying to set the focus on a specific field with the $activate(name) method. I am invoking the method in my template using the ng-click directive.

ng-click="rowform.$activate('programId')"

I put a log statement in the $activate(name) method to see if it was being called. It looks like it's being called, but the parameter is not properly being passed. Instead, the value is undefined.

$activate: function(name) {
   console.log('activate field', name);
   ...
}

activate field undefined

ckosloski commented 8 years ago

Can you create a plunker showing this issue?

moose-byte commented 8 years ago

I updated the jsfiddle from the docs for the editable form: http://jsfiddle.net/beedaan/wvrqm1xb/

In the fiddle, I tried to set the focus to the status column. I called $activate from the template and from the controller. I couldn't get either to work. It would be greatly appreciated if someone could show me how to use the $activate(name) method to set the focus on the status field.

ckosloski commented 8 years ago

Are you trying to set it on edit or add?

moose-byte commented 8 years ago

I'm trying to set it on add.

On Mon, Apr 18, 2016 at 4:46 PM ckosloski notifications@github.com wrote:

Are you trying to set it on edit or add?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/vitalets/angular-xeditable/issues/459#issuecomment-211568639

ckosloski commented 8 years ago

The reason you are seeing "activate field undefined" is because be default, the activate function is called by the show method with an empty name value. This then sets the active field to the first entry field by default.

This also means that wherever you are setting calling $activate is not being called.

The problem is that when you click the add button, there is no form object yet, so you can't call activate on it yet.

One option is to set onshow="setFocus(rowform, user)" on the form object. In the add method, you set an "added" flag to true.

The setFocus method checks for the added flag and does a settimeout to wait for the form to finish rendering.

  $scope.setFocus = function(rowform, user) {
    if (user.added) {
      $timeout(function () {
        user.added = false;
        rowform.$activate('status');
      }, 50);
    }
  };
moose-byte commented 8 years ago

Very interesting! I'm in the middle of creating a setFocus() method to activate the field I'd like to. My trouble is stemming from the list of editables being created in an order that is different from order of appearance on the page. I have an editable-number element first in my editables array, even though it's the third element. Two editable-selects are before it. I need to understand how the editables array is created so I can better predict which field will have focus once the form is $shown.

The order that the elements are in, in the editables array are: number, checkbox, select1, select2, select3, select4

On the page, they appear in this order: select1, select2, number, checkbox, select3, select4

It looks like the selects are just shifted to the back of the array

Update: The setFocus method you suggested works for me. I would still like to learn more about how the editables array is constructed and why it seems like it's order is different from on page order.

moose-byte commented 8 years ago

I propose this issue is closed because we know that $activate() is indeed working. I will say that I think the documentation is lacking regarding the behavior of this method.

ckosloski commented 8 years ago

What do you think needs to be added to the documentation?

moose-byte commented 8 years ago

I think it would be worth mentioning that you cannot activate a form field if you are adding a row because the form is not available yet. You have to use the $timeout module and give the form a chance to be created, then activate the field.

On Fri, Apr 29, 2016, 10:44 AM ckosloski notifications@github.com wrote:

What do you think needs to be added to the documentation?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/vitalets/angular-xeditable/issues/459#issuecomment-215740668

ckosloski commented 8 years ago

@beedaan you should be able to close this issue yourself.

I will add something in the documentation in my next pull request.