Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Sending data via form/js in Mojito (it works)

View application.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
[
{
"settings": [ "master" ],
"appPort": "8666",
"yui": {
"config": {
"filter": "raw"
}
},
"specs": {
"myform": {
"type": "HTMLFrameMojit",
"config": {
"deploy": true,
"child": {
"type": "MyForm"
}
}
}
}
},
{
"settings": [ "environment:development" ],
"staticHandling": {
"forceUpdate": true
}
}
]
View application.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
/*jslint anon:true, sloppy:true, nomen:true*/
YUI.add('myform-binder-index', function(Y, NAME) {
 
/**
* The myform-binder-index module.
*
* @module myform-binder-index
*/
 
/**
* Constructor for the MyFormBinderIndex class.
*
* @class MyFormBinderIndex
* @constructor
*/
Y.namespace('mojito.binders')[NAME] = {
 
/**
* Binder initialization method, invoked after all binders on the page
* have been constructed.
*/
init: function(mojitProxy) {
this.mojitProxy = mojitProxy;
},
 
/**
* The binder method, invoked to allow the mojit to attach DOM event
* handlers.
*
* @param node {Node} The DOM node to which this mojit is attached.
*/
bind: function(node) {
var me = this;
this.node = node;
var sendMe = function(event) {
event.preventDefault();
var value = this.node.one('#form-message').get('value');
this.mojitProxy.invoke('sendit', {
params: {
body: {
formValue: value
}
}
}, function(err, retObj){
if (!err) {
console.log('binder msg: ' + me.mojitProxy.data.get('message'));
} else {
console.log(err);
}
});
};
this.node.one('#submit-button').on('click', sendMe, this);
/**
* Example code for the bind method:
*
* node.all('dt').on('mouseenter', function(evt) {
* var dd = '#dd_' + evt.target.get('text');
* me.node.one(dd).addClass('sel');
*
* });
* node.all('dt').on('mouseleave', function(evt) {
*
* var dd = '#dd_' + evt.target.get('text');
* me.node.one(dd).removeClass('sel');
*
* });
*/
}
 
};
 
}, '0.0.1', {requires: ['event-mouseenter', 'mojito-client']});
View application.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
/*jslint anon:true, sloppy:true, nomen:true*/
YUI.add('myform', function(Y, NAME) {
 
/**
* The myform module.
*
* @module myform
*/
 
/**
* Constructor for the Controller class.
*
* @class Controller
* @constructor
*/
Y.namespace('mojito.controllers')[NAME] = {
 
/**
* Method corresponding to the 'index' action.
*
* @param ac {Object} The ActionContext that provides access
* to the Mojito API.
*/
index: function(ac) {
console.log('index: ' + new Date().toString());
ac.models.get('model').getData(function(err, data) {
if (err) {
ac.error(err);
return;
}
ac.assets.addCss('./index.css');
ac.done({
status: 'Mojito is working.',
data: data
});
});
},
sendit: function(ac) {
console.log('sendit: ' + new Date().toString());
var body = ac.params.getFromBody('formValue');
body = "Frankie says: " + body;
console.log(body);
ac.data.set('message', body);
// crucial
ac.done();
}
};
 
}, '0.0.1', {requires: [
'mojito'
, 'mojito-assets-addon'
, 'mojito-models-addon'
, 'mojito-params-addon'
, 'mojito-data-addon'
]});
View application.json
1 2 3 4 5 6
<div id="{{mojit_view_id}}">
<form id="my-form" method="post">
<input type="text" name="form_message" id="form-message" />
<input type="submit" id="submit-button" />
</form>
</div>
View application.json
1 2 3 4 5 6 7 8
[{
"settings": [ "master" ],
"root": {
"verbs": ["get"],
"call": "myform.index",
"path": "/"
}
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.