Last active
April 27, 2018 19:05
-
-
Save stevewithington/24732aec18f949f20c5ca7d402e96420 to your computer and use it in GitHub Desktop.
Mura CMS: How to add custom scripts to Mura forms loaded asynchronously
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Mura forms are loaded asynchronously. So, if you wish to run some scripts, you need | |
to use a special method to `reopen` the form, and add your scripts using | |
`Mura.DisplayObject.Form.reopen({})` | |
The most commonly needed examples are described below. | |
*/ | |
Mura(function(m) { | |
Mura.DisplayObject.Form.reopen({ | |
// triggered after the form has rendered on the browser | |
onAfterRender: function() { | |
var form_container = this.context.targetEl | |
, the_form = m(form_container).find('form'); | |
console.log('afterRender triggered'); | |
// This is where you register your custom form listeners, for example ... | |
m('button.form-submit').on('click', function(event) { | |
console.log('Form button clicked!') | |
console.log(event.target.form); | |
}); | |
} | |
// triggered when the form has been submitted, before processing/validation begins | |
, onSubmit: function () { | |
var the_button = event.target | |
, the_form = the_button.form; | |
console.log('onSubmit triggered'); | |
console.log(the_button); | |
console.log(the_form); | |
// you could run a script here (obviously) ... then, | |
// return true if you want to continue, or false if you wish to stop processing | |
return true; | |
} | |
// triggered after submit, and form has errors | |
, onAfterErrorRender: function() { | |
var resp = JSON.parse(event.currentTarget.response) | |
, errors = resp.data.errors; | |
console.log('afterErrorRender triggered'); | |
console.log(errors); | |
} | |
// triggered after successful form submit (no errors) | |
, onAfterResponseRender: function () { | |
var response_container = this.context.targetEl; | |
console.log('afterResponseRender triggered'); | |
console.log(response_container); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment