0

Senhores, estou com uma dúvida nesta parte do meu código:

Preciso mandar uma requisição e depois desabilitar o botão de submit. O código Jquery que faz isso já está funcionando, mas quando utilizo pela segunda vez, mesmo trocando o ID, ele desabilita todos os botões presentes na página.

Alguem tem alguma dica do que fazer?

     <div class="col-md-6">
                                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:51M</b></span>
                        Última atualização de <b>Locais</b>
                    </li>

                    <form action="http://localhost/W-OS-PRO/index.php/local/atualizar">

                        <input type="submit" id="local" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                        <script type="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=local]").prop("disabled", "disabled");
                            });
                        </script>
                    </form>     

                    <div></form>
                        <li class="list-group-item list-group-item-success" align="right">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                    </li>


                </ul>
                        </div>

        <div class="col-md-6">
                                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:52M</b></span>
                        Última atualização de <b>Itens</b>
                    </li>

                    <form action="http://localhost/W-OS-PRO/index.php/item/atualizar">

                        <input type="submit" id="itens" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                        <script type="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=itens]").prop("disabled", "disabled");
                            });
                        </script>
                    </form>     

                    <div></form>
                        <li class="list-group-item list-group-item-success" align="right">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                    </li>


                </ul>
                        </div>

        <div class="col-md-6">
                        <ul class="list-group">
                <li class="list-group-item list-group-item-success">
                    <span class="badge"><b>Qua, 09 de Dez de 2015 02H:44M</b></span>
                    Última atualização de <b>Agentes</b>
                </li>

                <form action="http://localhost/W-OS-PRO/index.php/agente/atualizar">

                    <input type="submit" id="agentes" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                    <script type="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=agentes]").prop("disabled", "disabled");
                            });
                    </script>
                </form>     

                <div></form>
                    <li class="list-group-item list-group-item-success" align="right">
                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                </li>


            </ul>
                </div>
2
  • Você já tentou referenciar so o id do elemento ao inves do $("input[id=***]")? Se não tente assim: $("#agentes")... 9/12/2015 às 17:08
  • Chegado, dá um tapa nesse código aí 9/12/2015 às 17:34

1 Resposta 1

0

Eu recomendaria você fazer da seguinte forma:

HTML:

 <form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="1">
    <input type="submit" id="local_1" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form>

<form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="2">
    <input type="submit" id="local_2" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form> 

<form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="3">
    <input type="submit" id="local_3" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form>

jQuery:

$('.form').submit(function(){
   var id = $(this).data('id');
   $('#local_'+id).attr('desabled','desabled');
   return false;
});

note que eu acrescentei apenas class="form" data-id="1" no formulário e separei o javascript do HTML, então assim não precisaria você ficar repetindo o javascript no meio do HTML

$(window).on('beforeunload', function () {
      $(".........").prop("disabled", "disabled");
 });

e reparei que você está carregando o script <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> várias vezes no HTML sem necessidade. Você pode carrega-lo no head ou no rodapé do site apenas uma vez. Então seu código html ficaria da seguinte forma:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="seu-script.js"></script>
</head>
<div class="col-md-6">
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">
            <span class="badge"><b>Qua, 09 de Dez de 2015 02H:51M</b></span>
            Última atualização de <b>Locais</b>
        </li>
    <form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="2">

        <input type="submit" id="local_1" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
    </form>     

    <div></form>
        <li class="list-group-item list-group-item-success" align="right">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
    </li>


</ul>
        </div>

<div class="col-md-6">
                <ul class="list-group">
    <li class="list-group-item list-group-item-success">
        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:52M</b></span>
        Última atualização de <b>Itens</b>
    </li>

    <form action="http://localhost/W-OS-PRO/index.php/item/atualizar" class="form" data-id="2">

        <input type="submit" id="local_2" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
    </form>     

    <div></form>
        <li class="list-group-item list-group-item-success" align="right">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
    </li>


</ul>
        </div>

<div class="col-md-6">
        <ul class="list-group">
<li class="list-group-item list-group-item-success">
    <span class="badge"><b>Qua, 09 de Dez de 2015 02H:44M</b></span>
    Última atualização de <b>Agentes</b>
</li>

<form action="http://localhost/W-OS-PRO/index.php/agente/atualizar" class="form" data-id="2">

    <input type="submit" id="local_3" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
</form>     

<div></form>
    <li class="list-group-item list-group-item-success" align="right">
        <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
</li>


</ul>
</div>
1
  • Aproveito e recomendo a tirar esses scripts do meio da página e jogar para o fim. Ou melhor, jogar em um arquivo.js e fazer apenas uma referencia no fim do <body>. Vc pode sofrer com double binding desse jeito. 9/12/2015 às 17:26

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 .