| |
Aug 09
Hoje irei dar um exemplo de como usar JSON com Prototype em uma chamada via Ajax. Não estou muito acostumado com o Prototype mas comecei a usar por ser um especificação de um projeto que estou trabalhando atualmente.
O JSON é um acrônimo para “JavaScript Object Notation” e é um padrão para a troca de mensagens. JSON é muito usado em chamadas Ajax por ser mais simples e mais leve que SOAP que usa XML.
Abaixo segue um exemplo de um objeto JSON que irei usar neste tutorial.
Crie um arquivo chamado conteudo.htm e insira o código abaixo.
{ "jogos" : [
{ "nome": "World of Warcraft", "preco": "49,90" },
{ "nome": "Diablo 3", "preco": "89,90" },
{ "nome": "StarCraft 2", "preco": "49,90" }
]
}
Agora basta criar um arquivo com o nome index.htm e inserir o conteúdo abaixo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
</head>
<body>
<input type="button" name="pesquisar" onclick="pesquisar();" value="pesquisar"/>
<script>
function pesquisar () {
var request = new Ajax.Request('conteudo.htm', {
'method' : 'post',
'parameters' : {
'codigo' : '1'
},
'onComplete' : function(response) {
var text = response.responseText.stripTags();
// Transformo o texto em objeto
var objeto = text.evalJSON();
var jogos = objeto.jogos;
var str = "";
jogos.each(function(jogo) {
str += jogo.nome + ' ';
str += jogo.preco + '\n';
});
alert(str);
}
});
}
</script>
</body>
</html>
Agora é necessário que os dois arquivos estejam no mesmo diretório para que o exemplo funcione.
Clicando no botão pesquisar será feita uma consulta via Ajax para conteudo.htm retornando os valores do arquivo.
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Tags: ajax, javascript, JSON, Prototype, SOAP, XML
Jun 28
Esta semana descobri um problema em se usar nome da classes de estilo para identificação em funções javascript. A situação foi que outro programador ao migrar o layout do sistema apagou o nome de classes que estavam sendo usadas no JS via Prototype para validação de campos. Como não existia um padrão para o nome das classes minha solução para evitar futuros problemas foi criar um padrão de nomenclatura “jsNomeDaClasse” assim quando alguem ver o “js” na frente do nome da classe indica uma referencia para uma funcao JS.
No exemplo abaixo eu usei o padrão jsNomeDoBotao para que se algum programador ver o nome dessa classe saiba que tem uma função JS atribuida e não apague ou altere o nome
da classe em uma manutenção ou troca de layout do sistema.
<html>
<head>
<title>Validar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form>
<input class="jsNomeDoBotao" type="button" name="botao_1" value="botao 1" /><br/>
<input class="jsNomeDoBotao" type="button" name="botao_2" value="botao 2"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_3" value="botao 3"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_4" value="botao 4"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_4" value="botao 5"/>
</form>
<script type="text/javascript">
// Adiciono um alert para todos os inputs com o nome de class jsNomeDoBotao.
$(".jsNomeDoBotao").bind("click", function(event) {
alert(this.name);
});
</script>
</body>
</html>
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Tags: javascript, padrão, Prototype
Feb 08
Desde semana passada o antigo webservice dos correios parou de funcionar com PAC.
Foi feita a correção do código e agora o PAC esta funcionando novamente.
Sistema para Calcular Frete 1.1
Documentação para utilizar o webservice dos Correios para efetuar o calculo de forma personalizada.
SCPP_Manual_Implementacao_Calculo_Remoto_de_Precos_e_Prazos
Abaixo segue o código para manipular os dados do webservice usando o PHP.
Segue o exemplo do código abaixo funcionando.
<?php
/**
* Faz consulta no webservice dos correios e gera array dos valores.
* @copyright Phaneronsoft
* @author Marcelo Korjenioski - faleconosco@phaneronsoft.com
* @see http://www.phaneronsoft.com
* @filesource correios.php
* @version 1.0
*/
// PESO: Peso total do pacote em Quilos, caso seja menos de 1Kg, ex.: 300g, coloque 0.300
define('PESO',0.300);
// COMPRIMENTO: comprimento do volume em centímetros - somente número de 16 a 60
define('COMPRIMENTO',30);
// ALTURA: altura do volume em centímetros - somente número de 2 a 60
define('ALTURA',15);
// LARGURA: largura do volume em centimetros - somente número de 5 a 60
define('LARGURA',20);
// CODIGO_SERVICO: É possivel fazer mais de uma consulta ao mesmo tempo, basta separar os códigos por virgula.
// Neste caso PAC 41106 e SEDEX 40010
define('CODIGO_SERVICO','41106,40010');
// CEP_ORIGEM: seu CEP com 8 dígitos - somente números
define('CEP_ORIGEM','81010210');
// CEP_DESTINO: CEP do seu cliente com 8 dígitos - somente números
define('CEP_DESTINO','60245965');
// Crio um objeto para manipular o XML.
$doc = new DomDocument;
// Carrega o arquivo XML com um arquivo DOMDocument
$doc->Load("http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . CODIGO_SERVICO . "&nVlPeso=" . PESO . "&sCepOrigem=" . CEP_ORIGEM . "&sCepDestino=" . CEP_DESTINO . "&nCdFormato=1&nVlComprimento=" . COMPRIMENTO . "&nVlAltura=" . ALTURA . "&nVlLargura=" . LARGURA);
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Carrega o arquivo XML com um arquivo DOMDocument
$correios = "http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . CODIGO_SERVICO . "&nVlPeso=" . PESO . "&sCepOrigem=" . CEP_ORIGEM . "&sCepDestino=" . CEP_DESTINO . "&nCdFormato=1&nVlComprimento=" . COMPRIMENTO . "&nVlAltura=" . ALTURA . "&nVlLargura=" . LARGURA;
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Defino o nome dos elementos filhos no arquivo XML que eu desejo.
$children = array('Valor','PrazoEntrega');
// Faço um loop para pegar todos os elementos pai (root) encontrados.
$valor = array();
for ($i=0; $i < $root->length; $i++) {
// Pega o valor do atributo do elemento pai (root).
$id = $root->item($i)->getElementsByTagName('Codigo')->item(0)->nodeValue;
// Busca por elementos filhos (child) definidos no array
foreach ($children as $child) {
$valor[$id][$child] = $root->item($i)->getElementsByTagName($child)->item(0)->nodeValue;
}
}
echo '<pre>';
var_dump($valor);
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Tags: CEP, correios, Frete, manual, PAC, Sedex, webservice
Nov 20
Descobrir ID de elemento através de uma Class usando JQuery é o tema de hoje.
Eu não sou o tipo do programador que fica se preocupando com a quantidade de linhas por arquivo.
Gosto mesmo é de criar um código simples e de fácil manutenção. Esta semana estava querendo colocar
um efeito “slide” em algumas listas porem não queria criar uma função para cada lista. Então resolvi
criar uma classe comum para elas e atribuir IDs para os botões e para as listas. Desta maneira foi simples
resolver meu problema pois posso identificar os IDs dos elementos através da classe.
Segue o código abaixo para explicar melhor a situação.
Segue o exemplo funcionando
<head>
<title>Descobrir id de elemento usando uma classe com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
ul {list-style:none;}
* {margin:0;padding:0;border:0px;}
html {height:100%;}
.agrupa_programacao {float:left;display:inline;width:970px;margin-top:30px;}
.divisao_programacao {float:left;display:inline;width:230px;margin-right:10px;}
.lista_programacao,.lista_programacao2 {float:left;display:inline;width:228px;margin-top:5px;background:#fff;border:1px solid #bbb;}
.lista_programacao2 {margin-top:0px;border-top:0px}
.tit_programacao, .tit_programacao2, .tit_programacao3 {float:left;display:inline;width:198px;height:20px;background:#acbcc0 url(../img/seta.jpg) no-repeat 9px 16px;padding:12px 0 12px 30px;text-align:left;font:14px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#fff;border-bottom:1px solid #fff;}
.tit_programacao2 {color:#133c8b;background:#f4f1f1;}
.tit_programacao3 {background:#d9eff3 url(../img/seta2.gif) no-repeat 9px 7px;padding:5px 0 5px 30px;color:#133c8b;font:bold 12px Verdana, Arial, Helvetica, sans-serif;}
h3.tit_programacao3{border-left:1px solid #BBBBBB;border-right:1px solid #BBBBBB;cursor:pointer;}
.txt_programacao, .txt_programacao2, .txt_programacao3 {float:left;display:inline;width:198px;padding:10px 15px 10px 15px;background:#f4f1f1;font:11px Verdana, Arial, Helvetica, sans-serif;color:#5e5e5e;border-bottom:1px solid #fff;}
.txt_programacao2 {background:#d7d7d7;}
.txt_programacao3 {background:#fff;}
</style>
</head>
<body>
<div>
<h3 id="frutas">Frutas</h3>
<ul id="frutas_lista">
<li id="1">Abacaxi</li>
<li id="2">Pera</li>
<li id="3">Maça</li>
</ul>
<h3 id="verduras">Legumes</h3>
<ul id="verduras_lista">
<li id="1">Alface</li>
<li id="2">Couve</li>
<li id="3">Cenoura</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){ // Inicio o script apenas quando toda a pagina estiver carregada.
// Atribuo a função onclick em todos os elementos com a classe informada
$(".tit_programacao3").click(function () {
//Pego o ID do elemento.
var id = $(this).attr('id');
// Como defini os ids para o titulo e lista, apenas faço uma
// concatenação para identificar a lista para receber a ação.
if ($("#" + id + "_lista").is(":hidden")) {
$("#" + id + "_lista").slideDown("normal");
} else {
$("#" + id + "_lista").slideUp("normal");
}
});
});
</script>
</body>
</html>
Associando a classe com id é possível reduzir a quantidade de código facilitando a manutenção e agilizando o desenvolvimento.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Tags: Descobrir, JQuery, Listas
Oct 28
Hoje estava conversando com um amigo que começou a estudar AJAX
para fazer uma entrevista de emprego para programador Jr e que pediam conhecimentos básicos de PHP, AJAX e JQuery.
Perguntei para ele o que você entende por AJAX?
“É um bagulho que pega informações do lado servidor sem
precisar recarregar a página.”
A resposta esta certa e o conceito é este.
Então hoje resolvi criar um post sobre o que é o tal de AJAXem um
exemplo pratico e simples de entender que mostrei para meu amigo.
Vamos usar o JQuery para fazer a conexão AJAX.
No exemplo vamos pegar o conteúdo de uma pagina “texto.html” e adicionar
o conteúdo na página “index.html” em uma tag span.
Vamos criar uma página index.html com o código abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXEMPLO BASICO DO USO DO AJAX COM JQUERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<input type="button" onclick="ajax();" value="Pegar texto" name="Pegar texto" />
<br />
<span id="conteudo_ajax"></span>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ajax () {
// Caso queira limpar o valor do elemento antes de adicionar remova o comentario abaixo.
//$("#conteudo_ajax").empty();
jQuery.ajax({
type: "get", // Defino o método de envio POST / GET
url: 'texto.html', // Informo a URL que será pesquisada.
success: function(html){
$("#conteudo_ajax").append(html); // Adiciono o valor dentro do elemento.
}
});
}
</script>
Agora crie uma página texto.html com o texto para pesquisa
Texto que foi pego usando AJAX.
O código é simples mas já dá uma idéia de como funciona o AJAX para quem esta começando a estudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Tags: ajax, iniciante, JQuery, PHP
Aug 14
Não é possível fazer upload de arquivo via Ajax porem alguém encontrou a solução usando iframe. Vamos chamar de fake upload via Ajax. No AJAX F1 tem um tutorial de como fazer este sistema de AJAX file upload.
Um leitor do solicitou uma ajuda com a listagem do itens após o upload do arquivo e também para remover ele. Resolvi criar um sistema baseado no AJAX F1 e disponibilizar.
O sistema esta bem crú então conforme for passando o tempo vou melhorar o código.
Aqui esta o link para o dowload do exemplo com css e imagens.
No exemplo aqui postado esta sem o css para o código fica menor.
Vamos criar um arquivo index.php e colocar o código abaixo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviar e Remover Arquivos</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
// Quando inicia o Upload o elemento a mensagem de progreso fica visível e o formulário é ocultado.
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success,file){
var result = '';
if (success == 1){
// Caso o retorno do envio do arquivo vindo do iframe seja 1 ele adiciona o arquivo na lista.
result = '<span>O arquivo foi enviado com sucesso!<\/span><br/><br/>';
adicionar(file);
}
else {
// Se ocorrer erro mostra a mensagem.
result = '<span>Ocorreu um erro na hora de enviar o arquivo!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" value="Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
// Remove elementos
function removeElement(id) {
// Declara variável lista que indica onde o elemento será removido.
var lista = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);
// Função removeChild irá procurar elementos que estão dentro da variável lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}
// Adiciona elementos basedo no valor do file input
function adicionar(id) {
// Pega a id do item da lista criado baseado no nome do arquivo
var valor = id;
// Cria uma variavel com referencia ao Id do Elemento
var lista = document.getElementById('lista');
// É criado uma tag <li> que contem informação do elemento adicionado.
// Também é adicionado um <input> do tipo hidden com o nome do arquivo.
// Estou usando o nome do arquivo como ID na lista criada.
var dado = '<li id="element_' + valor + '">'
+ '<form action="delete.php" method="post" target="delete_target">'
+ '<label for="file">' + valor + '</label>'
+ '<input name="file" value="' + valor +'" type="hidden"/>'
+ '<input id="item_' + valor + '" type="submit" value="Remover" name="Remover"/></form></li>';
// Pega o código HTML dentro da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;
return true;
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">Enviar e Remover Arquivos</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<!-- Mensagem de progresso de envio do arquivo -->
<p id="f1_upload_process">Carregando...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>Arquivo:
<input name="myfile" id="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" value="Enviar" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
<div id="arquivos">
<fieldset>
<legend>Arquivos</legend>
<div>
<!-- Lista onde será adicionado a relação dos arquivos enviados -->
<ul id="lista"></ul>
</div>
<iframe id="delete_target" name="delete_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</fieldset>
</div>
<div id="footer">
<a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a> /
<a href="http://www.phaneronsof.com" target="_blank">Powered by Phaneronsoft</a>
</div>
</div>
</body>
Agora vamos criar um arquivo php que o iframe irá solicitar para enviar o arquivo. Vamos nomear de upload.php
<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
// Pega o nome do arquivo para devolver para a lista HTML via Javascript.
$file_name = $_FILES['myfile']['name'];
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
//Caso o arquivo seja enviado com sucesso retorna 1.
$result = 1;
}
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>,'<?php echo $file_name; ?>');</script>
E por ultimo criar um arquivo com o nome delete.php que irá remover o arquivo que foi enviado.
<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
// Pega o nome do arquivo para devolver para a lista HTML via Javascript ara ser removido da lista.
// Estou usando o nome do arquivo como ID na lista.
$file = $_POST['file'];
$target_path = $destination_path. $_POST['file'];
@unlink($target_path);
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.removeElement('element_<?php echo $file; ?>');</script>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Tags: ajax, Upload
Aug 01
Acredito que não seja novidade para muitos esta ferramenta de gerar textos elaborada pelo Padre Levedo.
Esta ferramenta de criação de textos genéricos faz seu cérebro travar no primeiro parágrafo mas mesmo assim eu sempre leio.
Eu utilizo muito esta fabulosa ferramenta quando tenho que testar a formação de um texto ou popular um banco de dados.
Acredito que o uso dela é uma evolução dos insert com “asdjf asldfkja dsfjasdlfasdlkf” ou “test test teste teste”.
Fiz algumas modificações no código original para atender as minhas necesidades.
Exemplo da Ferramenta.
<html>
<head>
<title> O Fabuloso Gerador de Lero-lero!</title>
<script type="text/JavaScript">
validchars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz()_/!$";
tab0 = new Array(
"Caros amigos, ",
"Por outro lado, ",
"Assim mesmo, ",
"No entanto, não podemos esquecer que ",
"Do mesmo modo, ",
"A prática cotidiana prova que ",
"Nunca é demais lembrar o peso e o significado destes problemas, uma vez que ",
"As experiências acumuladas demonstram que ",
"Acima de tudo, é fundamental ressaltar que ",
"O incentivo ao avanço tecnológico, assim como ",
"Não obstante, ",
"Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se ",
"Pensando mais a longo prazo, ",
"O que temos que ter sempre em mente é que ",
"Ainda assim, existem dúvidas a respeito de como ",
"Gostaria de enfatizar que ",
"Todavia, ",
"A nível organizacional, ",
"O empenho em analisar ",
"Percebemos, cada vez mais, que ",
"No mundo atual, ",
"É importante questionar o quanto ",
"Neste sentido, ",
"Evidentemente, ",
"Por conseguinte, ",
"É claro que ",
"Podemos já vislumbrar o modo pelo qual ",
"Desta maneira, ",
"O cuidado em identificar pontos críticos n",
"A certificação de metodologias que nos auxiliam a lidar com "
);
tab1 = new Array(
"a execução dos pontos do programa ",
"a complexidade dos estudos efetuados ",
"a contínua expansão de nossa atividade ",
"a estrutura atual da organização ",
"o novo modelo estrutural aqui preconizado ",
"o desenvolvimento contínuo de distintas formas de atuação ",
"a constante divulgação das informações ",
"a consolidação das estruturas ",
"a consulta aos diversos militantes ",
"o início da atividade geral de formação de atitudes ",
"o desafiador cenário globalizado ",
"a mobilidade dos capitais internacionais ",
"o fenômeno da Internet ",
"a hegemonia do ambiente político ",
"a expansão dos mercados mundiais ",
"o aumento do diálogo entre os diferentes setores produtivos ",
"a crescente influência da mídia ",
"a necessidade de renovação processual ",
"a competitividade nas transações comerciais ",
"o surgimento do comércio virtual ",
"a revolução dos costumes ",
"o acompanhamento das preferências de consumo ",
"o comprometimento entre as equipes ",
"a determinação clara de objetivos ",
"a adoção de políticas descentralizadoras ",
"a valorização de fatores subjetivos ",
"a percepção das dificuldades ",
"o entendimento das metas propostas ",
"o consenso sobre a necessidade de qualificação ",
"o julgamento imparcial das eventualidades "
);
tab2 = new Array(
"nos obriga à análise ",
"cumpre um papel essencial na formulação ",
"exige a precisão e a definição ",
"auxilia a preparação e a composição ",
"garante a contribuição de um grupo importante na determinação ",
"assume importantes posições no estabelecimento ",
"facilita a criação ",
"obstaculiza a apreciação da importância ",
"oferece uma interessante oportunidade para verificação ",
"acarreta um processo de reformulação e modernização ",
"pode nos levar a considerar a reestruturação ",
"representa uma abertura para a melhoria ",
"ainda não demonstrou convincentemente que vai participar na mudança ",
"talvez venha a ressaltar a relatividade ",
"prepara-nos para enfrentar situações atípicas decorrentes ",
"maximiza as possibilidades por conta ",
"desafia a capacidade de equalização ",
"agrega valor ao estabelecimento ",
"é uma das consequências ",
"promove a alavancagem ",
"não pode mais se dissociar ",
"possibilita uma melhor visão global ",
"estimula a padronização ",
"aponta para a melhoria ",
"faz parte de um processo de gerenciamento ",
"causa impacto indireto na reavaliação ",
"apresenta tendências no sentido de aprovar a manutenção ",
"estende o alcance e a importância ",
"deve passar por modificações independentemente ",
"afeta positivamente a correta previsão "
);
tab3 = new Array(
"das condições financeiras e administrativas exigidas.",
"das diretrizes de desenvolvimento para o futuro.",
"do sistema de participação geral.",
"das posturas dos órgãos dirigentes com relação às suas atribuições.",
"das novas proposições.",
"das direções preferenciais no sentido do progresso.",
"do sistema de formação de quadros que corresponde às necessidades.",
"das condições inegavelmente apropriadas.",
"dos índices pretendidos.",
"das formas de ação.",
"dos paradigmas corporativos.",
"dos relacionamentos verticais entre as hierarquias.",
"do processo de comunicação como um todo.",
"dos métodos utilizados na avaliação de resultados.",
"de todos os recursos funcionais envolvidos.",
"dos níveis de motivação departamental.",
"da gestão inovadora da qual fazemos parte.",
"dos modos de operação convencionais.",
"de alternativas às soluções ortodoxas.",
"dos procedimentos normalmente adotados.",
"dos conhecimentos estratégicos para atingir a excelência.",
"do fluxo de informações.",
"do levantamento das variáveis envolvidas.",
"das diversas correntes de pensamento.",
"do impacto na agilidade decisória.",
"das regras de conduta normativas.",
"do orçamento setorial.",
"do retorno esperado a longo prazo.",
"do investimento em reciclagem técnica.",
"do remanejamento dos quadros funcionais."
);
Array.prototype.shuffle = function() {
var temp;
var a, b;
if (this.length < 2) return;
for (i=0; i < 20; i++) {
a = Math.floor(Math.random() * this.length);
b = Math.floor(Math.random() * this.length);
temp = this[a];
this[a] = this[b];
this[b] = temp;
}
}
Array.prototype.chr = function(index, pos) {
return this[index].charAt(pos);
}
function leroLero(atitle, lines) {
var texto = document.getElementById('texto');
var conteudo = "";
conteudo += "<h1>"+atitle+"</h1>";
firstshot = 1;
paragraph = 0;
while(lines > 0) {
if (firstshot == 1) {
if (lines % 101 == 0 &amp;amp;amp;&amp;amp;amp; lines % 19 == 0) {
conteudo += tab0.chr(1,0)+tab0.chr(0,1)+tab3.chr(0,0)+tab2.chr(11,21)+tab2.chr(2,0)+tab3.chr(20,3)+tab1.chr(16,15)+tab0.chr(7,3)+tab3.chr(22,25)+tab1.chr(28,6)+tab1.chr(15,13)+tab3.chr(2,1)+tab3.chr(0,3)+validchars.charAt(52)+validchars.charAt(48)+validchars.charAt(48)+validchars.charAt(48)+tab3.chr(4,21)+tab2.chr(10,0)+tab0.chr(0,1)+tab3.chr(0,0)+tab2.chr(11,21)+tab3.chr(2,7)+tab1.chr(16,15)+tab0.chr(7,3)+tab3.chr(22,25)+tab1.chr(28,6)+tab1.chr(15,13)+tab3.chr(2,1)+tab3.chr(4,21)+tab1.chr(13,2)+tab3.chr(19,4)+tab2.chr(17,1)+tab3.chr(9,18)+tab2.chr(1,0)+tab0.chr(14,38)+tab1.chr(0, 31)+tab3.chr(9,18)+tab2.chr(11,16)+tab1.chr(4,17)+validchars.charAt(53);
break;
}
firstshot = 0;
}
tab0.shuffle();
tab1.shuffle();
tab2.shuffle();
tab3.shuffle();
for (i = 0; i < tab0.length; i++) {
if (paragraph == 0) {
conteudo += "<p>";
}
conteudo += tab0[i]+tab1[i]+tab2[i]+tab3[i]+" ";
if (++paragraph >= (2+ Math.ceil(Math.random() * 3))) {
conteudo += "</p>";
paragraph = 0;
}
if (--lines <= 0) break;
}
}
conteudo += "</body></html>";
texto.innerHTML = conteudo;
}
</script>
<style type="text/css">
* {
font-family:"Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:12px;
}
body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}
body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}
div#wrapper {
margin:auto;
position:relative;
width:450px;
z-index:0;
}
.formSearch fieldset {
border:1px solid #CCCCCC;
margin:0;
padding:0 10px;
}
.formMain label {
display:block;
float:left;
margin-right:4px;
padding-bottom:5px !important;
}
.formMain legend {
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
padding:10px 5px;
}
.formMain .button {
background:#F5EED3;
border:1px solid #CCCCCC;
color:#666666;
cursor:pointer;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
margin:18px 0 0 !important;
overflow:visible;
text-transform:uppercase;
width:100%;
}
.formMain .inline {
margin:15px 0 0 !important;
}
.formMain .text, .formMain .select, .formMain .textarea, .formMain .password {
border:1px solid #B6B6B6;
display:block;
text-transform:uppercase;
}
.formMain fieldset span.nameField {
color:#666666;
text-transform:uppercase;
}
h1 {
border-bottom:1px solid #F58220;
margin:0;
padding:0;
font-weight:bold;
font-size:large;
}
#texto h1 {
border-bottom:0;
}
h1 span {
-x-system-font:none;
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
#value {
-x-system-font:none;
color:#9B0000;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
p {
text-indent:25px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1><span>Instruções</span></h1>
<p>O Fabuloso Gerador de Lero-lero v2.0 é capaz de gerar qualquer quantidade de texto vazio e prolixo, ideal para engrossar uma tese de mestrado, impressionar seu chefe ou preparar discursos capazes de curar a insônia da platéia.</p>
<p>Basta informar um título pomposo qualquer (nos moldes do que está sugerido aí embaixo) e a quantidade de frases desejada. Voilá! Em dois nano-segundos você terá um texto - ou mesmo um livro inteiro - pronto para impressão.</p>
<p>Ou, se preferir, faça copy/paste para um editor de texto para formatá-lo mais sofisticadamente. Lembre-se: aparência é tudo, conteúdo é nada.</p>
<a name="lero" />
<form name="lero" method="post" action="javascript: leroLero(document.lero.titulo.value, document.lero.linhas.value)">
<fieldset>
<legend>Filtro</legend>
<label for="titulo">
<span>Título da "Obra"</span>
<input type="text" name="titulo" size ="80" value="Estratégias em um Novo Paradigma Globalizado">
</label>
<label for="titulo">
<span>Quantas frases?</span>
<input type="text" name="linhas" size ="8" value="50">
</label>
<label for="pesquisar">
<input type="submit" id="pesquisar" name="pesquisar" tabindex="3" value="Gerar" />
</label>
</fieldset>
</form>
<div id="texto"></div>
<a href="#lero">Voltar ao inicio da pagina</a>
</div>
</body>
</html>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Jul 22
Para diminuir a carga no seu servidor uma dica é utilizar as bibliotecas que o google fornece.
As bibliotecas disponiveis hoje são:
jQuery, jQuery UI, Prototype, scriptaculous, MooTools, Dojo, SWFObject e a biblioteca de interface do usuário do Yahoo! (YUI).
Para carregar a biblioteca é simples.
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
Neste link Google Ajax de bibliotecas do Google é possivel encontrar a documentação completa do uso.
Em um exemplo aqui no site sobre Sistema para Calcular Frete SEDEX e PAC a partir de CEP informado eu faço o uso do prototype para resgatar os dados via AJAX.
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados e ajudar a comunidade.
May 28
Estava precisando calcular o envio de SEDEX para vender alguns produtos no mercado livre e fui procurar no Google se alguem já tinha criado algo para simplificar o calculo para agilizar para o usuário.
Entrei um código no fórum http://forum.prestashopbr.com e fiz alguma alterações para se encaixar no que eu precisava. Estou compartilhando o código.
Exemplo funcionando.
<?php
if($_POST) {
function frete($cod_servico,$cep_origem,$cep_destino,$peso,$comprimento=0,$altura=0,$largura=0) {
$cep_destino = eregi_replace("([^0-9])","",$cep_destino);
$cep_origem = eregi_replace("([^0-9])","",$cep_origem);
// Crio um objeto para manipular o XML.
$doc = new DomDocument;
// Carrega o arquivo XML com um arquivo DOMDocument
$doc->Load("http://ws.correios.com.br/calculador/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . $cod_servico . "&nVlPeso=" . $peso . "&sCepOrigem=" . $cep_origem . "&sCepDestino=" . $cep_destino . "&nCdFormato=1&nVlComprimento=" . $comprimento . "&nVlAltura=" . $altura . "&nVlLargura=" . $largura);
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Defino o nome dos elementos filhos no arquivo XML que eu desejo.
$children = array('Valor','PrazoEntrega');
// Faço um loop para pegar todos os elementos pai (root) encontrados.
$valor = array();
for ($i=0; $i < $root->length; $i++) {
// Pega o valor do atributo do elemento pai (root).
$id = $root->item($i)->getElementsByTagName('Codigo')->item(0)->nodeValue;
if($root->item($i)->getElementsByTagName('Erro')->item(0)->nodeValue > 0) {
echo $root->item($i)->getElementsByTagName('MsgErro')->item(0)->nodeValue;
die;
}
// Busca por elementos filhos (child) definidos no array
foreach ($children as $child) {
$valor[$id][$child] = $root->item($i)->getElementsByTagName($child)->item(0)->nodeValue;
}
}
return $valor;
}
// Código do Serviço que deseja calcular, veja tabela acima:
if ($_POST['cep-destino']) {
//$cod_servico = $_POST['servico'];
$cep_origem = '81010210';// CEP de Origem, em geral o CEP da Loja
$cep_destino = $_REQUEST['cep-destino'];// CEP de Destino, você pode passar esse CEP por GET ou POST vindo de um formulário
$peso = '0.300';// Peso total do pacote em Quilos, caso seja menos de 1Kg, ex.: 300g, coloque 0.300
// COMPRIMENTO: comprimento do volume em centímetros - somente número de 16 a 60
$comprimento = 30;
// ALTURA: altura do volume em centímetros - somente número de 2 a 60
$altura = 15;
// LARGURA: largura do volume em centimetros - somente número de 5 a 60
$largura = 20;
$fretes = frete('41106,40010',$cep_origem,$cep_destino,$peso,$comprimento,$altura,$largura);
foreach ($fretes as $servico => $campos ) {
$valor = str_replace(",", ".", $campos['Valor']);
$valor = $valor + 4.00;
$valor = number_format($valor,2, ',', '');
if($servico == '41106') {
echo " Valor PAC " . $valor . " prazo de entrega {$campos['PrazoEntrega']} dia(s).<br/>";
} elseif ($servico == '40010') {
echo " Valor SEDEX " . $valor . " prazo de entrega {$campos['PrazoEntrega']} dia(s).<br/>";
}
}
}
} else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="<a href="http://demo.phaneronsoft.com/img/favicon.ico">http://demo.phaneronsoft.com/img/favicon.ico</a>" rel="shortcut icon" type="image/x-icon" />
<title>Sistema para Calcular Frete SEDEX e PAC a partir de CEP informado. | Phaneronsoft</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js">http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js</a>" type="text/javascript"></script>
<script type="text/javascript">
function submitForm() {
/*
usa método request() da classe Form da prototype, que serializa os campos
do formulário e submete (por POST como default) para a action especificada no form
*/
function mostrarLoading(){
$('loading').style.display = 'block';
$('value').innerHTML = ' ';
}
$('form-pesquisa-repasse').request({
onLoading:mostrarLoading,
onComplete: function(transport){
/*
se o retorno for diferente de -1, entende-se que não houve problemas, então apaga-se
os campos do formulário usando o método reset() da classe Form
*/
if(transport.responseText !=-1) {
$('loading').style.display = 'none';
$('value').innerHTML = transport.responseText;
} else {
$('form-pesquisa-repasse').reset();
$('loading').style.display = 'none';
$('value').innerHTML = 'Erro ao consultar';
}
}
});
return false;
}
</script>
<style type="text/css">
* {
font-family:"Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}
div#wrapper {
margin:auto;
position:relative;
width:450px;
z-index:0;
}
.select {
text-transform:uppercase;
width:99%;
border:1px solid #B6B6B6;
display:block;
}
.formSearch fieldset {
border:1px solid #CCCCCC;
margin:0;
padding:0 10px;
}
label {
display:block;
/*float:left;*/
margin-right:4px;
padding-bottom:5px !important;
}
legend {
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
padding:10px 5px;
}
.button {
background:#F5EED3;
border:1px solid #CCCCCC;
color:#666666;
cursor:pointer;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
margin:10px 0 0;
overflow:visible;
text-transform:uppercase;
width:150px;
}
.formMain .inline {
margin:15px 0 0 !important;
}
.text, .select, .textarea, .password {
border:1px solid #B6B6B6;
display:block;
text-transform:uppercase;
}
fieldset span.nameField {
color:#666666;
text-transform:uppercase;
}
h3 {
border-bottom:1px solid #F58220;
margin:0;
padding:0;
}
h3 span {
-x-system-font:none;
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
#value {
-x-system-font:none;
color:#9B0000;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
#rastrear {
padding-top:30px;
}
#loading {
display:none;
color:#9B0000;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
text-transform:capitalize;
}
</style>
</head>
<body>
<center>
</center>
<div id="wrapper">
<h3>
<span>Pesquisa valor de frete</span>
</h3>
<form id="form-pesquisa-repasse" action="" method="post" onsubmit="submitForm(); return false;" class="formMain formSearch wsizep100">
<fieldset>
<legend>Filtrar Referência</legend>
<label class="wsize010" for="cep-destino">
<span class="nameField">CEP Destino</span>
<input id="cep-destino" class="text" type="text" value="" maxlength="9" title="CPF destino" name="cep-destino" tabindex="2"/>
</label>
<label for="pesquisar" class="wsize010">
<input type="button" onclick="submitForm(); return false;" value="pesquisar" class="button inline"/>
</label>
</fieldset>
</form>
<span>* Digitar somente número no CEP</span>
<br />
<span id="value"></span>
<span id='loading'>Pesquisando...</span>
</div>
</body>
</html>
<?php
} // fim else
?>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
<?php
//script original pego em http://forum.prestashopbr.com/viewtopic.php?f=9&t=322&start=30
#####################################
# Código dos Serviços dos Correios #
# FRETE PAC = 41106 #
# FRETE SEDEX = 40010 #
# FRETE SEDEX 10 = 40215 #
# FRETE SEDEX HOJE = 40290 #
# FRETE E-SEDEX = 81019 #
# FRETE MALOTE = 44105 #
# FRETE NORMAL = 41017 #
# SEDEX A COBRAR = 40045 #
#####################################
if($_POST) {
// Código do Serviço que deseja calcular, veja tabela acima:
if ($_POST['servico']) {
$cod_servico = $_POST['servico'];
}
// CEP de Origem, em geral o CEP da Loja
$cep_origem = '81010210';
// CEP de Destino, você pode passar esse CEP por GET ou POST vindo de um formulário
$cep_destino = $_POST['cep-destino'];
$cep_destino = eregi_replace("([^0-9])","",$cep_destino);
// Peso total do pacote em Quilos, caso seja menos de 1Kg, ex.: 300g, coloque 0.300
$peso = '0.300';
// URL de Consulta dos Correios
$correios = "http://www.correios.com.br/encomendas/precos/calculo.cfm?servico=".$cod_servico."&cepOrigem=".$cep_origem."&cepDestino=".$cep_destino."&peso=".$peso."&MaoPropria=N&avisoRecebimento=N&resposta=xml";
// Capta as informações da página dos Correios
$correios_info = file($correios);
// Processa as informações vindas do site dos correios em um Array
foreach($correios_info as $info){
// Busca a informação do Preço da Postagem
if(preg_match("/\<preco_postal>(.*)\<\/preco_postal>/",$info,$tarifa)){
$embalagem = 4.00; // Aqui você pode colocar o valor da embalagem para envio do produto
$total = $tarifa[1] + $embalagem;
}
}
// Neste exemplo estou colocando apenas PAC e SEDEX
switch ($cod_servico) {
case 41106:
$nome_servico = "Valor do frete via PAC ";
break;
case 40010:
$nome_servico = "Valor do frete via SEDEX ";
break;
}
// Caso venha valor de resposta é numerio e maior que o custo da embalagem senão ocorreu algum erro na solicitação.
if(is_numeric($total) && ($total > $embalagem)) {
// Quando encontra o valor da postagem, exibe na página formatando em padrão de moeda 10,89
// Caso você não queira formatar basta comentar a linha abaixo que será exibido assim 10.89 e basta executar o comando abaixo
$total = number_format($total,2,',','.');
echo $nome_servico . $total;
} else {
echo 'Erro ao consultar verifique se CEP esta correto';
}
} else {
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function submitForm(form) {
/*
usa método request() da classe Form da prototype, que serializa os campos
do formulário e submete (por POST como default) para a action especificada no form
*/
form.request({
onComplete: function(transport){
/*
se o retorno for diferente de -1, entende-se que não houve problemas, então apaga-se
os campos do formulário usando o método reset() da classe Form
*/
if(transport.responseText !=-1) {
$('value').innerHTML = transport.responseText;
} else {
form.reset();
$('value').innerHTML = 'Erro ao consultar';
}
}
});
return false;
}
</script>
<style type="text/css">
* {
font-family:"Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}
div#wrapper {
margin:auto;
position:relative;
width:450px;
z-index:0;
}
.formMain .select {
text-transform:uppercase;
width:99%;
border:1px solid #B6B6B6;
display:block;
}
.formSearch fieldset {
border:1px solid #CCCCCC;
margin:0;
padding:0 10px;
}
.formMain label {
display:block;
float:left;
margin-right:4px;
padding-bottom:5px !important;
}
.formMain legend {
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
padding:10px 5px;
}
.formMain .button {
background:#F5EED3;
border:1px solid #CCCCCC;
color:#666666;
cursor:pointer;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
margin:10px 0 0;
overflow:visible;
text-transform:uppercase;
width:100%;
}
.formMain .inline {
margin:15px 0 0 !important;
}
.formMain .text, .formMain .select, .formMain .textarea, .formMain .password {
border:1px solid #B6B6B6;
display:block;
text-transform:uppercase;
}
.formMain fieldset span.nameField {
color:#666666;
text-transform:uppercase;
}
h3 {
border-bottom:1px solid #F58220;
margin:0;
padding:0;
}
h3 span {
-x-system-font:none;
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
#value {
-x-system-font:none;
color:#9B0000;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
</style>
</head>
<body>
<div id="wrapper">
<h3>
<span>Pesquisa valor de frete</span>
</h3>
<form id="form-pesquisa-repasse" action="" method="post" onsubmit="submitForm(this); return false;">
<fieldset>
<legend>Filtrar Referência</legend>
<label for="servico">
<span>Envio</span>
<select id="servico" name="servico" title="Serviços dos Correios" tabindex="1">
<option value="41106">PAC</option>
<option value="40010">SEDEX</option>
</select>
</label>
<label for="cep-destino">
<span>CEP Destino</span>
<input id="cep-destino" type="text" value="" maxlength="9" title="CPF destino" name="cep-destino" tabindex="2"/>
</label>
<label for="pesquisar">
<input type="submit" id="pesquisar" name="pesquisar" tabindex="3" value="Pesquisar" />
</label>
</fieldset>
</form>
<span>* Digitar somente número no CEP</span>
<br />
<span id="value"></span>
</div>
</body>
</html>
<?php
} // fim else
?>
May 06
Neste exemplo irei mostrar como criar elementos dentro do código html usando javascript e remover elemento estes elementos.
Criei uma lista de pedidos para exemplificar o uso destas funções.
Exemplo funcionando.
Crie um arquivo html chamado pedidos.html e insira o código abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<script type="text/javascript">
// Remove elementos
function removeElement(id) {
// Declara variavel lista que indica onde o elemento será removido.
var lista = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);
// Função removeChild irá procurar elementos que estão dentro da variavel lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}
// Adiciona elementos basedo no valor dos combo box (select)
function adicionar(id) {
// Cria uma variavel que captura o valor do elemento selecionado no combo box.
var valor = document.getElementById(id).value;
// Cria uma variavel com referencia ao Id do Elemento
var lista = document.getElementById('lista');
// Cria uma variavel para inidicar a quantidade de elementos com o mesmo Id. Com valor inicial 1.
var qtd = 1;
// Verifica se elemento com o Id informado existe.
if(document.getElementById('element_' + valor)){
// Caso o elemento exista é atribuido o valor referente a quandide de vezes que foi adicionado
// este elemento.
qtd = document.getElementById('item_' + valor).value;
// Apos pegar o valor da quantidade. O elemento é removido para que não ocorra duplicação.
removeElement('element_' + valor);
// Incrementa a quantidade do elemento para o proximo registro.
qtd++;
}
// Variavel que contem dados dos novos elementos na lista.
// É criado uma tag <li> que contem informação do elemento adicionado.
// Dentro deste registro é adicionado um link <a> para remover o elemento.
// Tambem é adicionado um <input> do tipo hidden com o valor e a quantidade do elemento.
var dado = '<li id="element_' + valor + '"><span><strong>'
+ valor +
' Qtd '
+ qtd +
'</strong> <a title="Remover" onclick="removeElement(\'element_' + valor + '\'); return false;" href="javascript:void(0);">Remover</a></span><input id="item_'
+ valor +
'" type="hidden" value="'
+ qtd +
'" name="pedido['
+ valor +
']"/></li>';
// Pega o codigo HTML dento da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;
}
</script>
<style type="text/css">
body {
background:#FFFFFF none repeat scroll 0 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
height:100%;
line-height:1.3em;
margin:0;
width:100%;
}
div#wrapper {
margin:auto;
position:relative;
width:906px;
z-index:0;
}
input {
border:1px solid #CDCDCD;
background:#FFFFFF;
color:#000033;
}
input, select, textarea, label, button {
line-height:normal;
margin:2px 1px 1px 2px;
}
ul, li {
list-style: none;
}
li {
background:#FDFDFD;
color:#000033;
padding: 2px;
margin: 4px;
text-transform: uppercase;
}
legend {
color: #EB7800;
font-size:14px;
font-weight: bold;
}
</style>
<title>Lista de Pedidos</title>
</head>
<body>
<div id="wrapper">
<fieldset>
<legend>Cardápio</legend>
<label for="desc_bebidas">Bebidas</label>
<select id="desc_bebidas" name="desc_bebidas">
<option value="coca-cola">Coca-Cola</option>
<option value="fanta">Fanta</option>
</select>
<!-- Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_bebidas');"><br>
<label for="desc_pratos">Pratos</label>
<select id="desc_pratos" name="desc_pratos">
<option value="espaguete">Espaguete</option>
<option value="pizza">Pizza</option>
</select>
<!-- Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_pratos');"> <br>
<label for="desc_sobremesas">Sobremesas</label>
<select id="desc_sobremesas" name="desc_sobremesas">
<option value="pudim">Pudim</option>
<option value="sorvete">Sorvete</option>
</select>
<!-- Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_sobremesas');"><br>
</fieldset>
<!-- Envia dados via POST para pedidos.php -->
<form action="pedidos.php" method="post">
<fieldset>
<legend>Descrição</legend>
<textarea rows="3" cols="100" id="desc_observacao" name="desc_observacao"></textarea>
</fieldset>
<div id="pedidos">
<fieldset>
<legend>Pedidos</legend>
<div>
<!-- Lista onde será adicionado registros dos valores dos combo box selecionados -->
<ul id="lista"></ul>
</div>
</fieldset>
</div>
<input type="submit" value="Enviar Pedido">
</form>
</div>
</body>
</html>
Crie um arquivo php chamado pedidos.php e insira o código abaixo.
<?php
// Organiza lista do array para o debug.
echo "<pre>";
// Mostra Array de entrada de POST e GET
print_r($_REQUEST);
?>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutorias aqui apresentados.
|
|
Comentários Recentes