My backbone.js form has a single textfield (no submit button). I need to capture submit event (using enter key) in the view. Below is the sample code. Somehow the submit method is not called on pressing enter. Instead the form goes for a reload.
Script :
var FormView = Backbone.View.extend({
el: '#form',
events: {
"submit": "submit",
},
initialize: function () {
console.log("initialize");
},
submit: function (e) {
e.preventDefault();
console.log("submit");
}
});
new FormView();
HTML :
<form id="form">
<input type="text"/>
</form>
Add this to your Backbone view:
events: {
'submit form': 'submit'
}
Also, note that in your HTML, the form action has to be defined.
If you don't have the action defined, then do this:
events: {
'keyup': 'processKey'
}
processKey: function(e) {
if(e.which === 13) // enter key
this.submit();
}
If you're having trouble capturing submit events ensure that your 'el' property is defined in your view.
var myView = Backbone.View.extend({
el: $(body),
events: {
"submit form": "doMethod"
},
doMethod: function(e) {
e.preventDefault();
console.log('form fired');
}
});
Related
I have an MVC form with a submit button:
<form method="POST" id="submitProject" action="#Url.Action(SubmitProject, "ProjectSummary")">
<button type="submit" name="submitButton" id="submitProject" value="saveToProposed" class="btn btn-primary">Submit Project</button>
</form>
But when a user clicks on that button i want to show them a confirmation dialog before the post goes on its way:
$('#submitProject').submit(function (e) {
var currentForm = this;
e.preventDefault();
bootbox.dialog({
message: "Approve or Reject",
title: "Project Approval",
buttons: {
success: {
label: "Approve",
className: "btn-success",
callback: function () {
alert("Approved");
currentForm.submit();
}
},
danger: {
label: "Reject",
className: "btn-danger",
callback: function () {
alert("Rejected");
currentForm.submit();
}
},
main: {
label: "Cancel",
className: "btn-primary",
callback: function () {
return true;
}
}
}
});
});
in my controller i am trying to trap the value of the submit button like this:
[HttpPost]
public ActionResult SubmitProject(ProjectModel m, string submitButton)
{
}
if i do not have that preventDefault line in there i can see the value of the submitButton in the controller. With the preventDefault the value is always null.
this is something i have been struggling with for some time as i try to learn MVC. if i didn't have any client side interaction i would be fine. But trying to get js to play with mvc is giving me hearburn. what am i doing wrong?
A form only posts back the name/value pair of its submit button that was clicked. In your case your cancelling the buttons .click() event and then calling the .submit() function (i.e. the submit is no longer triggered by the click so its value is not sent in the request).
Rather than calling e.preventDefault();, call a function that returns true or false, in the same way that you can use the javascript .confirm() function to cancel the form submission (i.e. return confirm("...");
function confirmSubmit()
{
bootbox.dialog({
....
// for the success and danger buttons - return true;
// for the main button - return false
buttons: {
success: {
label: "Approve",
className: "btn-success",
callback: function () {
return true;
}
},
....
});
}
$('#submitProject').submit(function (e) {
return confirmSubmit();
});
Side note: your form only has one submit button, so the value of string submitButton will only ever be "saveToProposed". Not sure if you omitted it from your code, but I assume you would really have at least 2 submit buttons.
I have the code below. I want to on <Enter> of the input#editTodo, I want to save the model (Todo). I figured I need to listen to the keypress event then check that the keycode is 13, if so I save the model ...
TodoView = Backbone.Marionette.ItemView.extend({
triggers: {
"keypress #editTodo": "detectEnterAndSave"
},
initialize: function() {
this.on("detectEnterAndSave", function(e) {
console.log(e);
});
But I cant seem to get the event object? If so how do I know what key is pressed?
events: {
'keypress #editTodo' : 'detectEnterAndSave'
},
detectEnterAndSave : function(e) {
if (e.which === 13) {
// do something
}
}
I am using Backbone version 0.9.2,
jquery version 1.7.2 and
Backbone.Validation v0.5.2.
My html look like (1), the backbone.view (2) and the backbone.model (3).
It seems that my implementation does not work at all anymore.
When I click on submit button, it performs a POST request without making any form validation.
Any ideas why and how can I fix this problem?
Please see the comments in my code.
Thanks.
(1)
<form method="POST" class="form1">
<div class="control-group">
<label for="reason" class="control-label">Reason</label>
<div class="controls">
<textarea id="reason" name="reason" required="required" /></textarea>
</div>
</div>
<!-- other codes -->
</form>
(2)
var myView = Backbone.View.extend({
initialize: function () {
this.model = new MyModel();
this.model.bind('validated:invalid', function(model, attrs) {
console.log('validated:invalid', model, attrs); // It does not work
});
this.model.bind('validated:valid', function(model) {
console.log('validated:valid', model); // It does not work
});
},
events: {
'click [data-tid="submit"]': 'submitForm'
},
submitForm: function (event) {
event.preventDefault();
this.model.set(data);
this.model.save({
success: function () {
// some code
}
});
}
(3)
var MyModel = Backbone.Model.extend({
urlRoot: 'someUrl',
validation: {
reason: {
required: true,
msg: 'Reason is required'
}
}
});
You need to call Backbone.Validation.bind(this) after you created the model in initialize.
Hope this helps!
you can use form validation. I think you need to listen to the submit event.
Backbone works as they should.
events: {
'submit': 'submit'
}
Using the Jeditable plugin,
is possible to create, very easily, a submit and cancel button.
Here's a very simple code example (*)
Now let's suppose in MyView (Backbone.View) I would like to trigger the event click on the button submit which is created by Jeditable.
Here's the code regarding the Backbone.View (**).
When I trigger the event "click .submitBtn" the value of $('.edit_area').text is empty string.
In order to fix this issue I implemented the following code (* **)
Do you have some smart idea to improve the code of (* **)? I don't like callback using setTimeout.
(*)
$('.edit_area').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : '<div class="submitBtn">Ok</div>'
cancel : '<div class="submitBtn">Undo</div>'
});
(**)
MyView = Backbone.View.extend({
events: {
"click .edit_area" : "edit",
"click .submitBtn" : "close"
},
});
(* **)
close: function close ()
{
var that = this;
console.log($(this.el).find("[data-tid='editable']").text()); // empty string
setTimeout(function () {
console.log($(that.el).find("[data-tid='editable']").text()); // update string
that.model.save({
name: $(that.el).find("[data-tid='editable']").text()
});
}, 0);
},
in the initialize function
$('.edit_area').editable(this.close, {
type : 'textarea',
submit : 'OK',
});
Close function definition
close:function(value, settings) {
this.model.save({
name: value
});
});
Complete Code
var editableview = Backbone.View.extend({
initialize: function () {
_.bind(this.close, this);
},
render: function () {
$(this.el).find('.edit_area').editable(this.close, {
type: 'textarea',
submit: '<div class="submitBtn">Ok</div>'
cancel: '<div class="submitBtn">Undo</div>'
});
},
close: function (value, settings) {
this.model.save({
name: value
});
});
});
Var That = This is wrong. This is the DOM not the backbone view. You can do:
$('.edit_area').editable(this.close, {
type : 'textarea',
submit : 'OK',
submitdata: {view: this},
});
"view" in the hash would be the backbone view. It can be accessed in the close function.
close:function(value, settings) {
settings.submitdata.view.model.save({
name: value
});
});
I'm trying to add a listener to a Ext.form.Formpanel subelement Ext.form.BasicForm for the submit event and then reset the form via its .reset() method. In the doc at http://dev.sencha.com/deploy/touch/docs/?class=Ext.form.FormPanel it clearly states that:
submit : ( Ext.FormPanel this, Object result )
Fires upon successful (Ajax-based) form submission
But it somehow it won't really work for me.
This is my code:
var messInput = new Ext.form.FormPanel
({
fullscreen : true,
url : '/mess/',
standardSubmit : false,
listeners : {
el: {
submit: function(form, result) {
form.reset();
}
}
},
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
if i try it this way i get a
Uncaught TypeError: Object [object Object] has no method 'reset'
Can somebody explain what the problem is excatly here? do i need to call the parent Formpanel because i add the listener to the underlying el?
You are listening to basic js-event "submit" for the dom-element. You can't get (easily) sencha objects inside it. That's why Ext.form.FormPanel has beforeSubmit-event. The data is already collected so you can reset the form and process to ajax submit with return true;
form = new Ext.form.FormPanel({
fullscreen : true,
url : '/mess/',
listeners: {
beforesubmit: function(e, a) {
this.reset();
return true;
}
},
standardSubmit : false,
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
EDIT: This is the correct way, sorry about the last answer.