Backbone.js and form input blur
.live
is not needed here, there is nothing wrong with your event hash as well. There could be some thing wrong with template. I did just isolate the input field and focusout
event in this jsfiddle it's working fine.
<script type="text/template" id="formtemplate">
<form>
<input type="text" class="loginname" value="" placeholder="enter login"/>
</form>
</script>
...
var View = Backbone.View.extend({
events:{
'focusout .loginname':'checkUser'
},
render:function(){
this.$el.html($('#formtemplate').html());
},
checkUser:function(e){
alert('checkUser'); //works well
}
});
var view = new View();
view.render();
view.$el.appendTo('body');
Tom
Updated on June 04, 2022Comments
-
Tom almost 2 years
I am pretty much a backbonejs newbie. I am submitting form data to mysql.
I have one special input box where the use types in his or her email address as a user name. As it stands, I can check all my input fields (user, pass, address, phone, etc) client side, use an event on a button, load the model, use PHP to put the data into the db. This works just fine and is tested. The backend validation works fine and feeds to the browser when necessary.
Now I want to check the loginname field against the back end BEFORE writing the record (I know I can trap this on the back end in the final submit but want to do it here). If the user already has an account with the same email address I want to catch that client side. The issue is I can't seem to find a way to capture this blur (or onblur or change whatever I use) when I move off the loginname field so I can (in the render of the view is all I can figure) go off, use PHP again and send back a flag "new" or "existing"
No errors in Google developer tool
define([ 'jquery', 'underscore', 'backbone', 'lib/jquery-migrate-1.2.1', 'models/RegisterModel', 'text!templates/RegisterTemplate.html', 'lib/jquery.maskedinput-1.0', 'lib/bootstrap-acknowledgeinput.min', 'lib/jqBootstrapValidation' ], function($, _, Backbone, jQueryMigrate, RegisterModel, RegisterTemplate, MaskedInput,Ack, jqAck){ var RegisterView = Backbone.View.extend({ el: $("#container"), events: { 'click .btn-primary': 'saveClient', 'focusout .loginname': 'usercheck' }, usercheck: function() { //** not working console.log("usercheck detected"); alert("Alerts suck."); }, render: function(){ //Since our template has dynamic variables in it, we need to compile it var compiledTemplate = _.template( RegisterTemplate, this.model ); this.$el.html(compiledTemplate); //Replaces EVERYTHING inside the <div id="container"> this.$('#phone').mask('(999) 999-9999'); this.$('#phone2').mask('(999) 999-9999'); this.$('#zip').mask('99999'); $(function () { //** working $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); }); $('.loginname').live("click", function () { //** not working alert('AHHHHHH!'); }); $().acknowledgeinput({ // ** this works fine success_color: '#00FF00', danger_color: '#FF0000', update_on: 'keyup' });
** I looked in Chrome at the blur event for the input with name/id = loginname
HTML I did look at the blur for the elmement with id (Chrome says it's input#loginname) does have the blur event attached to it. I changed my code a bit, but still it doesn't seem to trigger. I never know with backbone if it's just something simple or one of those "this and scope" issues :)
<div id="container" class="row-fluid"> <div class="span6"> <div class="requiredNotice"><i class="icon-warning-sign icon-red"></i> Can't be blank!</div> <h3>New Client Registration:</h3> <form class="form-horizontal" method="POST"> <fieldset> <div class="control-group"> <label class="control-label required" for="loginname">UserID (Email </label> <div class="controls"> <div class="input-prepend" data-role="acknowledge-input"> <div data-role="acknowledgement"><i></i></div> <input type="email" data-type="email" required="required" placeholder="Use email account" maxlength="254" name="loginname" id="loginname" class="inputclass pageRequired input-xlarge" /> </div> <span class="loginname_error label label-info hide"></span> </div> </div> ... etc events: { 'click .btn-primary' : 'saveClient', 'focusout #input.loginname' : 'userCheck' // "blur input.loginname" : "userCheck" }, userCheck: function(e) { console.log("usercheck detected"); alert("Alerts suck."); },
-
Tom over 10 yearsThanks for looking. Still doesn't work. I don't seem to be able to put a break point on the event line, and the code never reaches the checkUser function.
-
Ravi Hamsa over 10 yearsinspect
.loginname
in chrome developer tools, and check in event listeners tab, it should have ablur
event associated with that. If not some thing wrong with your template/selectors