Bloquear Refresh em Página Específica

24/08/2016

0

Boa tarde, amigos estou desenvolvendo um sistema web, onde crio vários elementos dinamicamente, o problema é que quando se dar um refresh na página eles se auto destroem, perdendo os dados preenchidos e os elementos criados.
Tem alguma forma de bloquear o refresh para uma pagina específica?
Sidney Abreu

Sidney Abreu

Responder

Posts

10/09/2016

Matheus

Sim, mas que tipos de elementos que você esta criando dinamicamente? inputs, divs...? forneça o código
Responder

10/09/2016

Sidney Abreu

<!DOCTYPE html>
<html lang="pt-br">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>teste</title>
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
   <script>
      $(document).ready(function(){
         $("#addTrajetoVolta").click(function(evento){
            
               $("#BlocoVolta").css("display", "block");
           
         });
      });
   </script>
   
   </head>
   <body >
      <div class="row"> </div>
      <div class="panel panel-default">
         <div class="panel-heading"><span class="subtitulo">Dados do Registro</span></div>
         <div class="panel-body">
            <form class="form-horizontal" name="form1" id="form1">
               <div class="form-group form-group-sm">
                  <div class="col-md-3">
                  <label for="exampleInputName2">Número do Ofício</label>
                      <div class="input-group">
                        <span class="input-group-addon">
                          221111-
                        </span>
                        <input type="text" class="form-control" id="exampleInputName3" placeholder="" >
                       
                        <span class="input-group-addon">
                          /2016
                        </span>
                      </div><!-- /input-group -->

                  </div>                  
                  <div class="col-md-2">
                     <label for="exampleInputName2">Data da Solicitação</label>
                     <input type="date" class="form-control" id="exampleInputName2" placeholder="" readonly="true">
                  </div>
                  <div class="col-md-4">
                     <label for="exampleInputName2">Orgão</label>
                     <input type="text" class="form-control" id="exampleInputName2" placeholder="" readonly="true">
                  </div>
                   <div class="col-md-3">
                     <label for="exampleInputName2">Solicitante</label>
                     <input type="text" class="form-control" name="Solicitante" placeholder="" readonly="true">
                  </div>
               </div>

               <div class="bs-callout bs-callout-nova" >
                  <div class="row subtitulo Azul"><strong><i class="fa fa-map-marker" aria-hidden="true"></i> Trajeto de Ida</strong></div>
                  <div class="form-group form-group-sm">
                     <div class="col-md-2">
                        <label for="exampleInputName2">Origem</label>
                        <input type="text" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Destino</label>
                        <input type="text" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Data Embarque</label>
                        <input type="date" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Horário</label>
                        <input type="time" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                     <label for="exampleInputName2">Horário</label>
                        <select class="selectpicker form-control">
                          <option>CONVECIONAL</option>
                          <option>EXCUTIVO</option>
                          <option>LEITO</option>
                        </select>


                     </div>


                     <div class="col-md-2">
                        <label for="exampleInputName2">Empresa</label>
                        <input type="text" class="form-control" name="Solicitante" placeholder="">
                     </div>

                  </div>     

                  <div class="form-group form-group-sm">
                     <div class="col-md-1">
                        <label for="exampleInputName2">Status</label>
                        <p class="corAzul"><i class="fa fa-caret-right" aria-hidden="true" ></i> <strong>Nova</strong></p>
                     </div>

                     <div class="col-md-4">
                        <label for="exampleInputName2">Passageiro</label>
                        <input type="text" class="form-control" name="iPassageiro" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Identidade</label>
                        <input type="text" class="form-control" name="iIdentidade" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">CPF</label>
                        <input type="text" id="iCPF" onKeyPress="MascaraCPF(form1.iCPF);" 
                        maxlength="14" onBlur="ValidarCPF(form1.iCPF);" class="form-control" name="iCPF" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Cartão Fidelidade</label>
                        <input type="text" class="form-control" name="iCartao" placeholder="">
                     </div>

                    <div class="col-md-1">
                        <label for="exampleInp utName2"> </label>
                        <a class="form-control btn btn-danger" href="">Remover </a>
                     </div>

                  </div>

                  <div class="form-group form-group-sm" id="passageiro">
                    <!-- Novo Passageiro -->
                  </div>                  

                  <a class="btn btn-primary" href="javascript:void(0)" id="add_field">Adicionar Passageiro</a>
                  <a class="btn btn-warning" href="javascript:void(0)" id="">Remover Trajeto</a>
                  <a class="btn btn-info" href="javascript:void(0)" id="addTrajetoVolta">Solicitar "ida e volta" para este trajeto</a>
                  

               </div>


               <!-- Trajeto de Volta -->
               <div class="bs-callout bs-callout-nova" id="BlocoVolta">
                  <div class="row subtitulo Vermelho"><strong><i class="fa fa-map-marker" aria-hidden="true"></i> Trajeto de Volta</strong></div>
                  <div class="form-group form-group-sm">
                     <div class="col-md-2">
                        <label for="exampleInputName2">Origem</label>
                        <input type="text" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Destino</label>
                        <input type="text" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Data Embarque</label>
                        <input type="date" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                        <label for="exampleInputName2">Horário</label>
                        <input type="time" class="form-control" name="Solicitante" placeholder="">
                     </div>

                     <div class="col-md-2">
                     <label for="exampleInputName2">Horário</label>
                        <select class="selectpicker form-control">
                          <option>CONVECIONAL</option>
                          <option>EXCUTIVO</option>
                          <option>LEITO</option>
                        </select>


                     </div>


                     <div class="col-md-2">
                        <label for="exampleInputName2">Empresa</label>
                        <input type="text" class="form-control" name="Solicitante" placeholder="">
                     </div>

                  </div>     

                  <div id="TrajetoVolta">
                  
                  </div>
                  
               </div>
               <!-- fim trajeto de volta -->
               
               <a class="btn btn-primary" href="javascript:void(0)" id="">Adicionar Trajeto</a>
               <button type="button" class="btn btn-success">Finalizar Ofício e Enviar</button>
               <button type="button" class="btn btn-danger">Cancelar Ofício</button>
            </form>
         </div>
      </div>
      <!-- / Formulario -->
      </div>

      <script>
         $(function () {             
            $(document).ready(function() {
                    var max_fields          = 10;   //max de 15 inscricoes de cada vez
                    var x = 1;
                    $('#add_field').click (function(e) {
                            e.preventDefault();     //prevenir novos clicks
                            if (x < max_fields) {
                                    $('#passageiro').append('\\
                                                    <div class="remove' + x + '">\\
                                                    <div class="col-md-1">\\
                                                      <label for="exampleInputName2">Status</label>\\
                                                      <p class="corAzul"><i class="fa fa-caret-right" aria-hidden="true" ></i> <strong>Nova</strong></p></div>\\
                                                    <div class="col-md-4">\\
                                                      <label for="exampleInputName2">Passageiro</label>\\
                                                      <input type="text" class="form-control" id="iPassageiro" name="iPassageiro[]" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-2">\\
                                                      <label for="exampleInputName2">Identidade</label>\\
                                                      <input type="text" class="form-control" name="iIdentidade[]" id="iIdentidade" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-2">\\
                                                      <label for="exampleInputName2">CPF</label>\\
                                                      <input type="text"  maxlength="14" class="form-control" name="iCPF[]" id="iCPF" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-2">\\
                                                      <label for="exampleInputName2">Cartão Fidelidade</label>\\
                                                      <input type="text" class="form-control" name="iCartao[]" id="iCartao" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-1">\\
                                                      <label for="exampleInp utName2"> </label>\\
                                                      <a class="form-control btn btn-danger remove_campo" id="remove' + x +'" href="">Remover</a>\\
                                                   </div>\\
                                                    </div>\\
                                    ');
                                    x++;
                            }
                    });






                     

                    
             
                    //this is not the best move, because will create overhead...
                    //but is for simplicity
                    //damn users
                    $('#passageiro').on("click",".remove_campo",function(e) {
                            e.preventDefault();
                            var tr = $(this).attr('id');
                            //alert ('remove: ' + tr);
                            $('#passageiro div.'+ tr).remove();
                            x--;
                    });
             
                            

             
            });
         });         
         </script>

         <script>
            $(function () {             
            $(document).ready(function() {
                    var max_fields          = 2;   //max de 15 inscricoes de cada vez
                    var x = 1;
                    $('#addTrajetoVolta').click (function(e) {
                            e.preventDefault();     //prevenir novos clicks
                            if (x < max_fields) {
                                    $('#TrajetoVolta').append('\\
                                       <div class="remove' + x + '">\\
                                             <div class="form-group form-group-sm">\\
                                                    <div class="col-md-1">\\
                                                      <label for="exampleInputName2">Status</label>\\
                                                      <p class="corAzul"><i class="fa fa-caret-right" aria-hidden="true" ></i> <strong>Nova</strong></p></div>\\
                                                    <div class="col-md-4">\\
                                                      <label for="exampleInputName2">Passageiro</label>\\
                                                      <input type="text" class="form-control" id="iPassageiro" name="iPassageiro[]" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-2">\\
                                                      <label for="exampleInputName2">Identidade</label>\\
                                                      <input type="text" class="form-control" name="iIdentidade[]" id="iIdentidade" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-2">\\
                                                      <label for="exampleInputName2">CPF</label>\\
                                                      <input type="text"  maxlength="14" class="form-control" name="iCPF[]" id="iCPF" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-2">\\
                                                      <label for="exampleInputName2">Cartão Fidelidade</label>\\
                                                      <input type="text" class="form-control" name="iCartao[]" id="iCartao" placeholder="">\\
                                                   </div>\\
                                                   <div class="col-md-1">\\
                                                      <label for="exampleInp utName2"> </label>\\
                                                      <a class="form-control btn btn-danger remove_campo" id="remove' + x +'" href="">Remover</a>\\
                                                   </div>\\
                                             </div>\\
                                             <a class="btn btn-danger"  href="" id="RemoveBlocoVolta">Remover Solicitação "ida e volta" para este trajeto</a>\\
                                       </div>\\
                                    ');
                                    x++;
                            }
                    });

                    



               });
            }); 

         </script>

    <script>
     $(document).ready(function(){
         $("#RemoveBlocoVolta1").click(function(evento){
            
               $("#BlocoVolta").remove();
           
         });
      });
      
   </script>
    

   <script src="js/MascaraValidacao.js" type="text/javascript"></script>      
   </body>
</html>
Responder

10/09/2016

Matheus

Pesquise sobre o método preventDefault ou defaultPrevented

ps: Que código confuso. hahaha!
Responder

10/09/2016

Marcelo Santana

Boa tarde, Sidney Abreu. Por gentileza, poderia postar o código completo da sua html.. Assim ficará mais fácil para a galera te ajudar... :)

Abraço,
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar