javascript - Form readyinit event on Ninja Forms - BackboneMarionette - Stack Overflow

admin管理员组

文章数量:1022752

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.

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.

• javascript
• wordpress
• backbone.js
• marionette
• ninja-forms

Share Improve this question Follow edited May 16, 2019 at 11:21 Henders 1,21511 gold badge2222 silver badges2828 bronze badges asked Aug 1, 2018 at 8:20 N. M.N. M. 60766 silver badges1515 bronze badges 7

• 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 Commented Aug 1, 2018 at 9:07
• and of course you should include backbone.radio lib – taburetkin Commented Aug 1, 2018 at 9:10
• 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. Commented Aug 1, 2018 at 9:33
• 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 Commented Aug 1, 2018 at 10:11
• and of course there is no any special triggers for form rendering by default. – taburetkin Commented Aug 1, 2018 at 10:13

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

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();
}

I wanted to implement some JS after Ninja Forms init and this method worked for me.

if (typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend({
        initialize: function () {
            this.listenTo(nfRadio.channel('form'), 'render:view', this.initAction);
        },
        initAction: function () {
            jQuery(document).ready(function ($) {
                jQuery('#nf-field-364,#nf-field-329,#nf-field-302,#nf-field-284').on('input', function () {
                    jQuery(this).trigger('change')
                })
            })
        },
    });
    new mySubmitController();
}

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.

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.

• javascript
• wordpress
• backbone.js
• marionette
• ninja-forms

Share Improve this question Follow edited May 16, 2019 at 11:21 Henders 1,21511 gold badge2222 silver badges2828 bronze badges asked Aug 1, 2018 at 8:20 N. M.N. M. 60766 silver badges1515 bronze badges 7

• 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 Commented Aug 1, 2018 at 9:07
• and of course you should include backbone.radio lib – taburetkin Commented Aug 1, 2018 at 9:10
• 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. Commented Aug 1, 2018 at 9:33
• 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 Commented Aug 1, 2018 at 10:11
• and of course there is no any special triggers for form rendering by default. – taburetkin Commented Aug 1, 2018 at 10:13

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

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();
}

I wanted to implement some JS after Ninja Forms init and this method worked for me.

if (typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend({
        initialize: function () {
            this.listenTo(nfRadio.channel('form'), 'render:view', this.initAction);
        },
        initAction: function () {
            jQuery(document).ready(function ($) {
                jQuery('#nf-field-364,#nf-field-329,#nf-field-302,#nf-field-284').on('input', function () {
                    jQuery(this).trigger('change')
                })
            })
        },
    });
    new mySubmitController();
}

本文标签： javascriptForm readyinit event on Ninja FormsBackboneMarionetteStack Overflow