Why does my JS display alert when you don’t need it?

Asked

Viewed 122 times

0

My button works correctly and suddenly doesn’t work anymore: While updating user information with the correct data, does not enter the event button to update but add-user event as it is displayed Usuario novo não adicionado, preencha corretamente!. I noticed that this occurs only after adding a user and editing it (changing the information OR the correct ones). Why does this happen? The scripts of the entire site are in one file (only single page), 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>
javascript html backbone

  • You mean you don’t go inside this if: if(nome != "" && empresa != "" && validateEmail(email)==true) {? How is the function validateEmail?

  • Does not enter the button event anyway! The console.log("Dados: " + nome + "\t" + empresa + "\t" + validateEmail(email)); is not displayed.

  • So from what you say alert('Preencha corretamente todos os campos!') should not run, can provide a functional example of the problem? ... Oops found something.

  • This is PRETTY bizarre and I noticed that this happens when I edit AFTER adding a user, I will post the code.

  • Daniela from what I understand you used handlebars.js, could provide a functional example of the problem? It’s a bit complicated to reproduce it

  • Does Daniela know what jsfiddle is? Or Stacksnippet? If you can reproduce the problem in them, it will probably be easier to detect where the fault is, thankful.

  • Guilherme so I will have time to do it. This Alert that is displayed when I update is the Alert user add script!

  • I changed the id of the buttons and worked correctly, the way with only single page occurs a confusion! Thanks.

  • As soon as possible I put the answer, I’m going to work, see you later.

  • Daniela, my first answer is just a "kick" for now, as soon as I get a break I’ll test your code and see if it can be something else

Show 5 more comments

1 answer

0


I don’t have much knowledge of backbone.js, so I understand the template generates a loop for the past content to render:

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

Note that if you used, for each loop the ID #save is repeated:

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

In html we can not repeat Ids (I think nowhere), ie at each loop the id repeats.

The best alternative would be to use a class, or not to use anything (if you’re not going to use CSS in this id), so simply change the event selector in Backbone to 'click button[data-id]', but if you need to use the ID to apply some CSS, such as:

#save {...}

You can use class instead, html:

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

and the css:

button.save {...}

Browser other questions tagged javascript html backbone

You are not signed in. Login or sign up in order to post.