0

O meu botão funciona corretamente e de repente não funciona mais: Ao atualizar as informações do usuário com os dados corretos, não entra no evento do botão para atualizar mas sim no evento de adicionar usuário pois é exibido Usuario novo não adicionado, preencha corretamente!. Observei que isso ocorre apenas após adicionar usuário e ir editá-lo (alterando OU não as informações e elas corretas). Por que isso acontece? Os scripts de todo o site são num arquivo só (only single page), nenhum dado é passado por URL e consigo editar normalmente (sem adicionar usuários) ao recarregar a página.

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);
}

Adicionar Usuário
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>
10
  • Você quer dizer que não entra dentro desta if: if(nome != "" && empresa != "" && validateEmail(email)==true) {? Como é a função validateEmail?
    – Syzoth
    Commented 17/04/2015 às 18:32
  • Não entra no evento do botão mesmo! O console.log("Dados: " + nome + "\t" + empresa + "\t" + validateEmail(email)); não é exibido. Commented 17/04/2015 às 18:33
  • Então pelo que você diz alert('Preencha corretamente todos os campos!') não deveria executar, tem como fornecer um exemplo funcional do problema? ... Opa achei uma coisa.
    – Syzoth
    Commented 17/04/2015 às 18:34
  • Isso é BEM bizarro e observei que isso acontece quando eu edito APÓS adicionar um usuário, postarei o código. Commented 17/04/2015 às 18:35
  • Daniela pelo que entendi você usou handlebars.js, poderia fornecer um exemplo funcional do problema? Está um pouco complicado reproduzi-lo
    – Syzoth
    Commented 17/04/2015 às 18:37

1 Resposta 1

0

Não tenho muito conhecimento de backbone.js, pelo que entendi o template gera um loop pelo conteúdo passado para rendereziar:

<script type="text/x-handlebars-template" id="tpl-user-add">
...
</script>

Note que se você usou, para cada loop o ID #save se repete:

<button id="save" type="button" class="btn btn-success" data-id={{id}} >...</button>

Em html não podemos repetir IDs (acho que em lugar nenhum), ou seja a cada loop o id se repete.

A melhor alternativa seria usar uma classe, ou não usar nada (se não vai usar CSS neste id), então bastaria mudar o seletor do evento no BackBone para 'click button[data-id]', porém se necessitar usar o ID para aplicar algum CSS, como:

#save {...}

Você pode usar classe no lugar, o html:

<button class="save" type="button" class="btn btn-success" data-id={{id}} >...</button>

e o css:

button.save {...}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .