Running code when array element is instanced

[punto-]

Hi.

I have a form with some arrays, and I need to run some code when a new element of the array is instanced (by pressing the "Add New Item" button). I put a postRender callback on the options for the array (it's inside the "items" structure), and the function runs when I press the new item button, but the element is never instanced. What's the proper way to do this? Do I need to return something from the function to approve the instancing? (doesn't seem likely since postRender would happen after it's been created).

Thanks!

[ambischof]

Check what the arguments are in the postRender function. There may be a callback function as the first argument which needs to be called to trigger subsequent setup functions.

e.g.:

postRender: function(callback){
  //Do stuff

  callback();
}

[punto-]

Are those different depending on the object? All the examples I see of postRender take a "control" or "field" parameter, which is used to lookup elements in the form (in the "callbacks" page and the "lookups" page of the documentation). Is this documented somewhere? Thanks.

…

On 13 December 2017 at 16:27, ambischof ***@***.***> wrote: Check what the arguments are in the postRender function. There may be a callback function as the first argument which needs to be called to trigger subsequent setup functions. e.g.: postRender: function(callback){ //Do stuff callback(); } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#583 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGVmPZbPSs7OePv74oWg3EgHwjwSKuGTks5tACU2gaJpZM4RAHjp> .

[ambischof]

I think they are different depending, and I don't know that it is in the docs. If you post the code or better yet, make a jsfiddle, I might be able to help.

[punto-]

The code is here: https://pastebin.com/gLH0gjzc The function is in line 48, it runs when the new item button is pressed, but the element doesn't spawn. When I comment it, it adds the element normally. (I didn't know about jsfiddle, but it didn't accept my code, I think it wants me to splits everything in all the boxes) Thanks

…

On 14 December 2017 at 11:17, ambischof ***@***.***> wrote: I think they are different depending, and I don't know that it is in the docs. If you post the code or better yet, make a jsfiddle, I might be able to help. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#583 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGVmPQrCH9jjDGrXlDU45CFfXMCnG-avks5tAS4RgaJpZM4RAHjp> .

[WhileTrueEndWhile]

The postRender callback does not belong in the options. It is located at the top level next to schema and options. Example:

{
    "schema": ...,
    "options": ...,
    "postRender": function(control) {
        // See 'children' and 'childrenByPropertyId' to get other controls:
        console.log(control);
    }
}

Update: Function signature and parameter usage have been corrected. See http://alpacajs.org/docs/api/events.html

[punto-]

So then is there a way to run code when a new array element is instanced? I tried the "change" event, but it doesn't fire when the array length changes, only when one of the inputs inside the elements change. Thanks.

[WhileTrueEndWhile]

Of course "postRender" doesn't help here... You could try to replace the event "change" with "add"....

[punto-]

It looks like "add" doesn't work either.. I made a test here https://pastebin.com/pWgr208n , change runs when a value inside the array element changes, but "add" and "remove" never run

[WhileTrueEndWhile]

The components for array and table do not seem to work correctly in this case. The events are not fired when an element is added to the array and it is even worse with the table, because the first time you add an element, the event remove is fired and nothing after that. The only chance I see is a bugfix... Or, since it is only the missing or incorrect firing of an event, you could overwrite the options.view.templates.container-array-toolbar property with a custom template (e.g. as simple JSON string) that adds an inline click event handler to the buttons. To do this, you should enhance the following template: https://github.com/gitana/alpaca/blob/master/src/templates/web-edit/container-array-toolbar.html.