Jump to content
violin101

Ajuda - Mensagem de Erro usando Tabela

Recommended Posts

Caros amigos, saudações...

 

Estou com uma pequena dúvida para apresentar ao usuário uma Mensagem de ERRO após consulta de CEP.

 

Quando o usuário digita um CEP válido o sistema demonstra em uma TABELA os valores respectivos de FRETE de acordo com os CEP.

-----[ até aqui tudo bem ]-----

 

Meu problema é quando o usuário digita um CEP não válido. Nesta parte gostaria de Limpar a Tabela e mostrar uma TBODY de mensagem.

 

<div class="col-md-12" id="divCity" 
     style="display:none; margin-top:5px; margin-left:-23px;">
  <div class="col-md-12">                    
    <div class="input-group">
      <label for="cidadeUf" class="lblCitys">Cidade:</label>
      <input type="text" name="cidadeUf" id="cidadeUf" class="form-control" style="margin-top:-17px; background:#ffffff; border: 0 solid #ffffff;" disabled />
    </div>
  </div>   
  <br/>

  <div class="col-md-12" style="margin-top:-10px; margin-left:10px;">	  
    <div class="table-responsive">
      <table class="table tableList" id="tborden">
        <thead>
          <tr>
            <th colspan="3" style="text-align:left;">Prazo de Entrega para:</th> 
          </tr>
        </thead>			                                	
        <tbody>
          <tr class="message">
            <td colspan="3" class="text-center">O CEP informado não foi encontrado.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-md-12" style="margin-top:-10px; margin-left:10px;">	  		
    <span class="infprz">
      <i class='fa fa-caret-right'></i>&nbsp;
      Os prazos de Entrega e para Retirar na Loja, iniciam-se no 1º dia útil após a data da confirmação do pagamento.
    </span>
  </div>
</div> 

 

 

O JavaScript está assim:
 

    //Função para Buscar Cidade e Estado Via CEPs.
    $(function(){
        $("#btn_consulta").click(function(){
            var cep = $('#cepOrg').val();
            if (cep == '') {
            	alert('Informe o CEP antes de continuar');
            	document.getElementById("divCity").style.display = "none";	                        
                $('#cepOrg').focus();
                return false;
            }
            //Muda o Status do Button
            $('#btn_consulta').html('Aguarde...');					
		
			$.ajax({
				url: "<?php echo base_url();?>site/produtos/consulta",
				type: "POST",
				dataType:"json",
				data:{cep: cep},
				success:function(data){	   
					if (data.hasOwnProperty('erro')) {
                        /*
                        * Caso o usuário digita um CEP não válido o sistema apresenta um ALERT.
                        * nessa parte gostaria de mostrar a LINHA criada na Tabela anteriormente
                        */
						alert('CEP não encontrado');
						document.getElementById("divCity").style.display = "none";	
						$('#cepOrg').val('');
						$('#cidadeUf').val('');
						$('#cepOrg').focus();
						$('#btn_consulta').html('Consultar');	
						return false;
				    } else {
					    //Exibe os Dados Recebidos			
						$('#cidadeUf').val(data.localidade+'/'+data.uf);

	                    //Chama a Função para Exibir a DIV oculta
	                    statusDIV();
	                    
	                    //Chama a Função Monta Tabela, passando a Variável de Busca
	                    montaTable(cep);

	                    //Muda o Status do Button
						$('#btn_consulta').html('Consultar');				    	
				    }
                }			

			});//Fim - ajax CEP

        });//Fim - function button

    });//Fim - 1º.function	



    function montaTable(cep){
	    $.ajax({
	    	url: "<?php echo base_url();?>site/produtos/getByCep",
	        type: "POST",
	        dataType:"json",
	        data:{ cep: cep},
	        success:function(data){     
	        	//Remove Mensagem da Tabela
	        	$("#tborden tbody tr.message").remove();

	            var lin = "";
	            for (var i = 0; i < data.length; i++) {
	                lin += "<tr>";
	                lin += "<td width='30%' style='text-align:left; font-size:16px;'>" + data[i].cepRegiao + "</td>";
	                lin += "<td width='21%' style='text-align:left; font-size:16px;'>" + data[i].frtEntreg + "</td>";
	                if (data[i].vlrFrete != null && data[i].vlrFrete != 0) {
                       lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#19198F;'>" + mskVlr(data[i].vlrFrete) + "</td>";
	                } else {
	                  lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#137A13;'>Frete Grátis</td>";
	                }
	                lin += "</tr>";
	            }
	            //Atualiza a Tabela
	            $("#tborden tbody").empty();
	            //Adiciona os Itens a Tabela
	            $("#tborden tbody").append(lin);
	        }
	    });//Fim - ajax Valor Frete    	
    }   

 

 

Como consigo executar essa mensagem ?

 

Grato,

 

Cesar

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vmenezes
      ola galera . tenho uma aplicação com asp  e utilizo javascript para bater foto do cliente . consigo apos a foto batida salvar no pc com o ID do cliente,
      porem gostaria que assim que a foto fosse batida salvasse na raiz do proprio site.
      tem como fazer isso ?
      obg
    • By marco_fcp
      Estou tentando criar este código para quando escolher uma option no select, ele pegar nesse valor, e somar com quantos checksbox o utilizador quiser. Aí, no fim, no campo do valortotal conforme a option que escolher, irá subtrair um desconto do valor total. Penso ter feito os scripts, mas não estou a conseguir o resultado final com o desconto, dinâmico no mesmo campo.
      <!-- Pedido de Orçamento --> <div class="container-fluid mb-5"> <div class="row"> <div class="col-lg-2"></div> <div class="col-lg-8 mb-5"> <div class="caixa-orcamento pb-5"> <form action="" method="POST" onchange="atualizarPreco()" name="formulario"> <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3> <table class="m-auto"> <tr> <td class="fw-bold labels">Tipo de página web:</td> <td> <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente --> <select name="tipopagina" id="tipopagina" required> <option value="0"></option> <option value="400" id="estatica">Estática</option> <option value="500" id="dinamica" >Dinâmica</option> <option value="600" id="loja" >Loja</option> </select> </td> </tr> <tr> <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% --> <td class="fw-bold labels">Prazo em meses:</td> <td><input type="number" id="prazo"></td> </tr> </table> <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5> <!-- Cada check selecionado soma 400 ao valor total --> <div class="checkbox labels text-center mb-5"> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Quem Somos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Onde estamos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Galeria de fotografias <br> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">eCommerce <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Gestão Interna <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Notícias <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Redes Sociais </div> <h5 class="text-center labels">Orçamento estimado:</h5> <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p> <div class="resultado-orcamento text-center"> <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento --> <input type="text" id="valor-orcamento" name="valor-orcamento" value=""> <br> <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button> <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button> </div> </form> </div> </div> <div class="col-lg-2"></div> </div> </div> function atualizarPreco() { var preco = 0; // Tipo de página Selecionada com preços Diferentes if (document.getElementById('tipopagina').value == '400') { preco = 400; } if (document.getElementById('tipopagina').value == '500') { preco = 500; } if (document.getElementById('tipopagina').value == '600') { preco = 600; } // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%) var prazo = document.getElementById('prazo').value; if (prazo == 0) { preco = preco + 0; } else if (prazo == 1) { preco = preco - (preco * 0.05); } else if (prazo == 2) { preco = preco - (preco * 0.10); } else if (prazo == 3) { preco = preco - (preco * 0.15); } else { preco = preco - (preco * 0.20); } document.getElementById('valor-orcamento').value = preco; // Código que soma 400€ ao total por cada checkbox selecionado var soma1 = 0; function somar(check) { if ( check.checked ){ soma1 += 1*check.value; } else { soma1 -= 1*check.value; } document.getElementById("valor-orcamento").value = soma1; } }  
    • By luiz monteiro
      Olá, tudo bem?
       
      Estou tentando colocar um evento dropdown em um template.js mas sem sucesso.
       
      O script é o seguinte
       
      const template = `
      <nav id="sidebar">

          <ul class="list-unstyled menu">
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                      Home
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                      Analytics
                  </a>
              </li>
              <li>
              <a href="#">
                  <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
                  Ações
              </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                      Controles
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                      Configurações
                  </a>
              </li>
          </ul>

          </nav>
      `
      export default {
        name: "Sidebar", 
        template,
        delimiters: ["#{", "}#"]
      }
       
       
       
       
      ============Preciso colocar um dropdown na opção Ações, algo assim
       
                      <li
                          v-for="item in items">
                          <a :href="item.url"
                             v-if="!item.children">
                              
                          </a>
                          <span
                              v-else
                              v-on:mouseover="mouseover"
                              v-on:mouseleave="mouseleave">
                              {{ item.name }}
                              
                              <ul class=" dropdown"
                                 :class="{ isOpen }">
                                  <li
                                      v-for="child in item.children">
                                      <a :href="child.url">
                                          {{ child.name }}
                                      </a>
                                  </li>
                              </ul>
                          </span>
                      </li>
       
      var nav = new Vue({
          el: '#nav',
          data: {
              isOpen: false,
              items: [
                  {
                      url: '#acoes',
                      name: 'Ações',
                      children: [
                          {
                              url: '#link1',
                              name: 'Opção 1'
                          },
                          {
                              url: '#link2',
                              name: 'Opção 2'
                          },
                          {
                              url: '#link3',
                              name: 'Opção 3'
                          },
                      ]
                  }
              ]
          },
          methods: {
              mouseover: function () {
                  this.isOpen = true;
              },
              mouseleave: function () {
                  this.isOpen = false;
              }
          }
      });
       
       
       
      Quando coloco a programação no sidebar.js, não é exibido nada na tela nem mesmo retorna erro.
       
       
      =============No index os imports estão assim
       
          <script type="importmap">
            {
              "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
              }
            }
          </script>
          <script type="module">
            import { createApp } from "vue";
            import Sidebar from "/components/sidebar.js";
            import Welcome from "/components/welcome.js";
            const app = createApp({
                delimiters: ["#{", "}#"],
                components: {
                  Welcome,
                  Sidebar
                },
                data() {
                  return {}
                },
                methods: {
                
                }
              }).mount("#wrapper");
          </script>
        </body>
       
      Agradeço desde já.
       
       
       
    • By nathanmoreira
      Após diversos cálculos provindos de um código, recebo um número inteiro ao qual não sei o tamanho ao certo (pode variar de 1 pra frente). Quero passar esse número para string e formatar ele de maneira a colocar um ,00 no final e, a cada 3 números antes da virgula, um ponto. Ou seja, deixar o número num formato como: 45.114.477,00
       
      Como fazer? 
    • By kernmatheus
      Boa noite,
       
      Galera, utilizo uma aplicação que me permite inserir arquivos JavaScript customizados em algumas páginas, e por vezes quando realizo alguma alteração considerável no JS, preciso solicitar aos usuários da ferramenta para limparem o cache, evitando que eles fiquem com as regras antigas do JS e gere algum erro.
       
      Existe alguma forma de esporadicamente quando eu realizar alterações no JS, forçar a limpeza de cache nas máquinas clientes? Ou então de não permitir que o navegador salve cache deste JS que eu customizo as regras?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.