Jquery/Ajax Duplicating

Question

Good afternoon, I already researched this problem here in the forum and tried some solutions but I do not know what I can do wrong.

I have this Function that calls my Modal.

function verificarSenha() {
                            var forcarAlterarSenha = document.getElementById('forcarAlterarSenha').value;
                            if (forcarAlterarSenha < 1) {
                                $(document).ready(function () {
                                    $('#myModal').modal('show');
                                });
                            } else {
                                $(function () {
                                    $('#myModal').modal('hide');
                                });
                            }
                        }

Modal

<!-- Modal -->
                        <div class="modal fade" data-backdrop="static" id="myModal" role="dialog" style="padding: 40px 50px; background-color: #333; text-align: center;">
                            <div class="modal-dialog">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header" style="background: ${cortop}; color: ${corletra}">
                                        <!--                                            <button type="button" class="close" data-dismiss="modal">×</button>-->
                                        <h4><span class="glyphicon glyphicon-lock"></span> Senha Expirou</h4>
                                    </div>
                                    <div class="modal-body">

                                        <div class="form-group">
                                            <label for="senhaAtual"> Senha Atual:</label>
                                            <input type="password" name="senha" onkeyup="javascript:verifica(this);" class="form-control" id="senha" />
                                        </div>
                                        <div class="form-group">
                                            <label for="novaSenha"> Nova senha:</label>
                                            <input type="password" name="senhan" onkeyup="javascript:verifica(this);" class="form-control" id="senhan" />
                                        </div>
                                        <div class="form-group">
                                            <label for="confirmaNovaSenha"> Confirmar senha:</label>
                                            <input type="password" name="confirmaNovaSenha" onkeyup="javascript:verifica(this);" class="form-control" id="confirmaNovaSenha" />
                                        </div>  
                                        <strong><div  id="mostra"  ></div></strong><p/>
                                        <input type="button" id="btnabrir" name="btnabrir" value="Alterar" onclick="AlterarSenhaExpirada()" class="btn btn-default" />

                                    </div>
                                </div>
                            </div>
                        </div>

Function that changes the Password, I pass the data to my Servlet via Ajax .

function AlterarSenhaExpirada() {
                            if (document.formLogin.iduser.value > 0) {
                                if (document.formLogin.senha.value.length > 4) {
                                    if (document.formLogin.senhan.value.length > 7) {
                                        if (document.formLogin.senhan.value == document.formLogin.confirmaNovaSenha.value) {
                                            if (document.formLogin.senhaf.value != 'Fraca') {

                                                $('#btnabrir').click(function (event) {
                                                    var t_pagina1 = $('#t_pagina').val();
                                                    var iduser1 = $('#iduser').val();
                                                    var senhaAtual = $('#senha').val();
                                                    var novaSenha = $('#senhan').val();
                                                    var op1 = $('#op').val();

                                                    $.post('<%=request.getContextPath()%>/AjaxAlterarSenha', {t_pagina: t_pagina1, senha: senhaAtual, senhan: novaSenha, op: op1, iduser: iduser1}, function (responseText) {

                                                          if(responseText == 1){

                                                             $('#myModal').modal('hide');
                                                         }
                                                         if(responseText == -2){
                                                               mostra.innerHTML = '<div class="alert alert-danger" style="width: 100%" role="alert"> A senha precisa ser diferente da Anterior!</div>';
                                                             $('#myModal').modal('show');
                                                                 }
                                                         if(responseText == -1){
                                                             mostra.innerHTML = '<div class="alert alert-danger" style="width: 100%" role="alert">A senha atual não foi confirmada. Não foi possível realizar a alteração!</div>';
                                                             $('#myModal').modal('show');
                                                               }

                                                    });
                                                });
                                            } else
                                                alert('A senha informada é fraca, informe uma senha que contenha letras e numeros!');
                                        } else
                                            alert('A nova senha não foi repetida corretamente!');
                                    } else
                                        alert('A nova senha deve conter ao menos 8 digitos!');
                                } else
                                    alert('A senha antiga não foi informada corretamente!');
                            } else
                                alert('Sua sessão foi encerrada!');
                        }

It’s working, but when I press the button btnabrir it does not work only when I click for 2 time. And sometimes it is clicking from 1, but runs twice, passing by servlet 2 times. What can it be ?

Answer 1

You are causing this. First you click on the button and run the function: AlterarSenhaExpirada(), as is in the onClick.

<input type="button" id="btnabrir" name="btnabrir" value="Alterar" onclick="AlterarSenhaExpirada()" class="btn btn-default" />

In this function you declare a function for the same button.

$('#btnabrir').click(function (event) { }

This function is not executed the first time. It is only created.

So only when you click the second time will it work because it was declared earlier.

You can put this function click in a normal function.

function executaFuncao(){
    var t_pagina1 = $('#t_pagina').val();
    var iduser1 = $('#iduser').val();
    var senhaAtual = $('#senha').val();
    var novaSenha = $('#senhan').val();
    var op1 = $('#op').val();

    $.post('<%=request.getContextPath()%>/AjaxAlterarSenha', {t_pagina: t_pagina1, senha: senhaAtual, senhan: novaSenha, op: op1, iduser: iduser1}, function (responseText) {
        if(responseText == 1){
            $('#myModal').modal('hide');
        }
        if(responseText == -2){
            mostra.innerHTML = '<div class="alert alert-danger" style="width: 100%" role="alert"> A senha precisa ser diferente da Anterior!</div>';
            $('#myModal').modal('show');
        }
        if(responseText == -1){
            mostra.innerHTML = '<div class="alert alert-danger" style="width: 100%" role="alert">A senha atual não foi confirmada. Não foi possível realizar a alteração!</div>';
            $('#myModal').modal('show');
        }
    });
}

function AlterarSenhaExpirada() {
    if (document.formLogin.iduser.value > 0) {
        if (document.formLogin.senha.value.length > 4) {
            if (document.formLogin.senhan.value.length > 7) {
                if (document.formLogin.senhan.value == document.formLogin.confirmaNovaSenha.value) {
                    if (document.formLogin.senhaf.value != 'Fraca') {

                        executaFuncao();

                    } else
                    alert('A senha informada é fraca, informe uma senha que contenha letras e numeros!');
                } else
                alert('A nova senha não foi repetida corretamente!');
            } else
            alert('A nova senha deve conter ao menos 8 digitos!');
        } else
        alert('A senha antiga não foi informada corretamente!');
    } else
    alert('Sua sessão foi encerrada!');
}

Behold:

You have created two functions: One to verify the password and the other to execute when not stopping at any of the if.