Form ready / init event on Ninja Forms - Backbone / Marionette

Question

I am currently working with the "NinjaForms" plugin for WordPress, which provides custom form management for the backend. It's based on Marionette / Backbone JS. After some research, I had no problem triggering JavaScript functions on input change and on form submit. However, I have not found a way to fish for an event once the form is initialised / rendered / shown (any of these, really).

What I am doing right now is initialising a Marionette object, adding listeners to a radio and then adding functions to execute it on event:

if(typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend( {
        initialize: function() {
            // init listener
            this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction);
            // field change listener
            this.listenTo( Backbone.Radio.channel( 'fields' ), 'change:modelValue', this.valueChanged);
            // submit listener
            this.listenTo( Backbone.Radio.channel( 'forms' ), 'submit:response', this.actionSubmit );
        },

        // init action
        initAction: function() {
            console.log("init");
        },

        // input update action
        valueChanged: function(model) {
            console.log("update");
        },

        // submit action
        actionSubmit: function( response ) {
            // handled via php

            console.log("submit");
        },
    });

    // initialise listening controller for ninja form
    new mySubmitController();
}

However, the line this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction); is not working. I have tried the events view:render, view:show, show:view, render:view without success.

I searched in the Backbone / Marionette documentations, but could not find a fitting event. This question might be a duplicate, but I could not really find any topic regarding form initialisation events with Backbone.

you are settle handlers for two channels. if this channels stays idlle - means there is no events you are listening then you never see your console.log messages. You can check handler like that: Backbone.Radio.channel('forms').trigger('view:show') - this should output to console "init". if you do not see any logs in console it means that: a) first if statement is false and your mySubmitController not created. b) your events never triggered on that channels — taburetkin
I don't want to trigger events manually, I want to listen to an event that's fired once the form is rendered, so that I can then manipulate the form DOM with Javascript. However, the triggering does output "init" into the console. — N. M.
i just tell you that if nobody triggers the event - it will not rised. if you expect that, say ninjaforms, triggers that events for you then a) it not happens, b) ninja triggers other events you are not listening, c) your if statement is false — taburetkin
and of course there is no any special triggers for form rendering by default. — taburetkin

N. M. N. M. · Accepted Answer · 2018-08-06T10:02:45

after some long search, googling and frustration I've found a solution. Using the following JavaScript-Code, you can execute code on form render:

// if there is a ninja form on this page
if(typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend( {
        initialize: function() {
            // init listener
            this.listenTo( nfRadio.channel( 'form' ), 'render:view', this.initAction );
        },

        // init action
        initAction: function() {
            // code to execute on form render
        },
    });

    // initialise listening controller for ninja form
    new mySubmitController();
}

Form ready / init event on Ninja Forms - Backbone / Marionette

1 Answers