My button works correctly and suddenly it does not work anymore: Updating user information with correct data does not enter the button event to update, but rather on the add event user because Usuario novo não adicionado, preencha corretamente! is displayed. I noticed that this occurs only after adding user and going to edit it (altering OR not the information and they correct). Why does it happen? The site-wide scripts are in a single (only single page) file, no data is passed by URL and I can edit normally (without adding users) when reloading the page.
HTML
<script type="text/x-handlebars-template" id="tpl-users-edit">
<button id="back" class="btn btn-info"><i class="glyphicon glyphicon-menu-left"></i> Voltar</button>
<div id="UserViewEdit">
<table class="table" id="users">
<thead>
<tr>
<th>Nome</th>
<th>Empresa</th>
<th>Perfil</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<td><div class="col-sm-9"><input class="form-control" id="nome" name="nome" type="text"/></div></td>
<td><div class="col-sm-9"><input class="form-control" id="empresa" name="empresa" type="text"/></div></td>
<td><div class="col-sm-9"><select class="form-control" id="perfil" name="perfil">
<option value="administrador">Administrador</option>
<option value="usuario">Usuário</option>
</select>
</div>
</td>
<td><div class="col-sm-9"><input class="form-control" id="email" name="email" type="email"/></div></td>
</tr>
</tbody>
</table>
<p style="text-align:right"><button id="recovery" type="button" class="btn btn-info"><i class="glyphicon glyphicon-share-alt"></i> Recuperar senha</button>
<button id="save" type="button" class="btn btn-success" data-id={{id}} ><i class="glyphicon glyphicon-save"></i> Salvar</button></p>
</div>
</script>
JS
'click button#save': function (evt) {
var nome = $('#nome').val();
var email = $('#email').val();
var empresa = $('#empresa').val();
console.log("Dados: " + nome + "\t" + empresa + "\t" + validateEmail(email));
if(nome != "" && empresa != "" && validateEmail(email)==true) {
console.log("entrou mas deu erro")
var json = {
id: localStorage.getItem('id'),
nome: nome,
email: email,
perfil: this.$el.find("#UserViewEdit select[name=perfil]").val(),
empresa: empresa
}
$.ajax({
url: 'api/user/update',
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify(json),
success: function (data) {
alert("Alterado com sucesso!")
window.location = 'index.jsp#InstanciaManager';
}
});
}else{
alert('Preencha corretamente todos os campos!')
}
}
ValidateEmail
function validateEmail(email){
var re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
Add User
JS
App.UserAddView = Backbone.View.extend({
el: $("#content"),
tpl: Handlebars.compile($('#tpl-user-add').html()),
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.tpl());
},
events: {
'click button#back': function (evt) {
evt.stopImmediatePropagation();
var instancia = Backbone.history.fragment.split("/")[1];
Backbone.history.navigate("UserView/"+instancia, {trigger : true});
},
'click button#save': function (evt) {
evt.stopImmediatePropagation();
var nome = this.$el.find("#edit-form input[name=nome]").val();
var email = this.$el.find("#edit-form input[name=email]").val();
var empresa = this.$el.find("#edit-form input[name=empresa]").val();
if(nome != "" && validateEmail(email) != false && empresa != "" ) {
var model = new App.UserModel({
instancia : localStorage.getItem('instancia'),
nome: nome,
email: email,
perfil: this.$el.find("#edit-form select[name=perfil]").val(),
empresa: empresa
});
model.save({}, {
success: function (model, response) {
var password = response.senha;
var dlg = Handlebars.compile($('#tpl-password-dialog').html());
var $modal = $(dlg()).modal();
$modal.show(function (evt){
$('.mensagem').append(password);
});
if(response.senha.toString() != "Erro: Esse email já está cadastrado!"){
$modal.on('click','#fechar', function(){
var instancia = Backbone.history.fragment.split("/")[1];
Backbone.history.navigate("UserView/"+instancia, {trigger : true});
});
$modal.on('hidden.bs.modal', function(){
var instancia = Backbone.history.fragment.split("/")[1];
Backbone.history.navigate("UserView/"+instancia, {trigger : true});
})
}
}
});
}else{
alert('Usuario novo não adicionado, preencha corretamente!')
}
}
}
});
HTML
<script type="text/x-handlebars-template" id="tpl-user-add">
<div id="UserAddView"> <div class="col-sm-4">
</div>
<div class="col-sm-4">
<h1>Adicionar Usuário</h1>
<div class="well">
<form id="edit-form" class="form-horizontal" role="form" action="">
<tr class="adicionar">
<div class="form-group">
<label class="col-sm-3 control-label" >Nome</label>
<div class="col-sm-9">
<input class="form-control" name="nome" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" >Empresa</label>
<div class="col-sm-9">
<input class="form-control" name="empresa" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" >Email</label>
<div class="col-sm-9">
<input class="form-control" name="email" type="email"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" >Perfil</label>
<div class="col-sm-9">
<select class="form-control" name="perfil">
<option value="administrador">administrador</option>
<option value="usuario">usuario</option>
</select>
</div>
</div>
</tr>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<td>
<button id="back" type="button" class="btn btn-info"><i class="glyphicon glyphicon-menu-left"></i> Voltar</button>
</td>
<td>
<button id="save" type="button" class="btn btn-success"><i class="glyphicon glyphicon-save"></i> Salvar</button>
</td>
</div>
</div>
</form>
</div>
</div>
</tr>
<div class="col-sm-4"></div>
</div>
</script>