Array
(
)

Bloquear Refresh em Página Específica

Sidney Abreu
   - 24 ago 2016

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?

Matheus
   - 10 set 2016

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

Sidney Abreu
   - 10 set 2016

#Código

<!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>

Matheus
   - 10 set 2016

Pesquise sobre o método preventDefault ou defaultPrevented

ps: Que código confuso. hahaha!

Marcelo Santana
|
MVP
Pontos: 450
    10 set 2016

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,