Phaneronsoft » JQuery http://www.phaneronsoft.com/phaneronsoft Desenvolvimento Web Fri, 15 Jul 2011 20:15:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Usando Prototype para consulta AJAX com JSON http://www.phaneronsoft.com/phaneronsoft/2010/08/09/usando-prototype-para-consulta-ajax-usando-json/ http://www.phaneronsoft.com/phaneronsoft/2010/08/09/usando-prototype-para-consulta-ajax-usando-json/#comments Mon, 09 Aug 2010 21:18:28 +0000 Marcelo Korjenioski http://www.phaneronsoft.com/phaneronsoft/?p=505 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 comen­tá­rio que terei pra­zer em ajudar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais e Posts aqui apresentados.

]]> http://www.phaneronsoft.com/phaneronsoft/2010/08/09/usando-prototype-para-consulta-ajax-usando-json/feed/ 0 Sistema e manual para Calcular Frete SEDEX, e-SEDEX e PAC dos Correios (versão 1.1) http://www.phaneronsoft.com/phaneronsoft/2010/02/08/sistema-para-calcular-frete-sedex-e-pac-1-1-pac-esta-funcionando/ http://www.phaneronsoft.com/phaneronsoft/2010/02/08/sistema-para-calcular-frete-sedex-e-pac-1-1-pac-esta-funcionando/#comments Mon, 08 Feb 2010 14:01:33 +0000 Marcelo Korjenioski http://www.phaneronsoft.com/phaneronsoft/?p=427 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&amp;nCdServico=" . CODIGO_SERVICO . "&amp;nVlPeso=" . PESO . "&amp;sCepOrigem=" . CEP_ORIGEM . "&amp;sCepDestino=" . CEP_DESTINO . "&amp;nCdFormato=1&amp;nVlComprimento=" . COMPRIMENTO . "&amp;nVlAltura=" . ALTURA . "&amp;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&amp;nCdServico=" . CODIGO_SERVICO . "&amp;nVlPeso=" . PESO . "&amp;sCepOrigem=" . CEP_ORIGEM . "&amp;sCepDestino=" . CEP_DESTINO . "&amp;nCdFormato=1&amp;nVlComprimento=" . COMPRIMENTO . "&amp;nVlAltura=" . ALTURA . "&amp;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 comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

]]> http://www.phaneronsoft.com/phaneronsoft/2010/02/08/sistema-para-calcular-frete-sedex-e-pac-1-1-pac-esta-funcionando/feed/ 2 Descobrir ID de elemento através de uma Class usando JQuery http://www.phaneronsoft.com/phaneronsoft/2009/11/20/descobrir-id-de-elemento-atraves-de-uma-class-usando-jquery/ http://www.phaneronsoft.com/phaneronsoft/2009/11/20/descobrir-id-de-elemento-atraves-de-uma-class-usando-jquery/#comments Fri, 20 Nov 2009 12:42:29 +0000 Marcelo Korjenioski http://www.phaneronsoft.com/phaneronsoft/?p=411 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.

Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apre­sen­ta­dos.
É isso pes­soal uma ótima semana e até o próximo post.

]]> http://www.phaneronsoft.com/phaneronsoft/2009/11/20/descobrir-id-de-elemento-atraves-de-uma-class-usando-jquery/feed/ 0 Exemplo Básico de AJAX com JQUERY http://www.phaneronsoft.com/phaneronsoft/2009/10/28/exemplo-basico-de-ajax-com-jquery/ http://www.phaneronsoft.com/phaneronsoft/2009/10/28/exemplo-basico-de-ajax-com-jquery/#comments Wed, 28 Oct 2009 16:33:42 +0000 Marcelo Korjenioski http://www.phaneronsoft.com/phaneronsoft/?p=403 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.

Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apre­sen­ta­dos.
É isso pes­soal uma ótima semana e até o próximo post.

]]> http://www.phaneronsoft.com/phaneronsoft/2009/10/28/exemplo-basico-de-ajax-com-jquery/feed/ 8 Verificar valores de input checkbox com JQuery http://www.phaneronsoft.com/phaneronsoft/2008/09/03/verificar-valores-de-input-checkbox-com-jquery/ http://www.phaneronsoft.com/phaneronsoft/2008/09/03/verificar-valores-de-input-checkbox-com-jquery/#comments Wed, 03 Sep 2008 13:54:30 +0000 Marcelo Korjenioski http://www.phaneronsoft.com/phaneronsoft/?p=10 Para executar o script abaixo é necessário o JQuery

http://docs.jquery.com/Downloading_jQuery

No exemplo estou usando o JQuery do  Google APIs.

Segue um exemplo em funcionamento.

</code></code></code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="application/javascript">
function checkBox() {
var files = '';
// Procura em todos os elementos com a classe cinput na página.
$(".cinput:checked").each(function(){
//Verifica se input checkbox esta marcado
//if(this.checked) {
// Adiciona valor do checkbox
files = files + ' [' + this.value + '] ';
//}
});
alert(files);
}
// Adiciona evento ao botão com a função bind
$("#botao").bind("click", function(){
checkBox();
});
</script>
</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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=“text/javascript”></script>
<script type=“application/javascript”>
function checkBox() {
var files = ”;
// Procura em todos os elementos com a classe cinput na página.
$(“.cinput”).each(function(){
//Verifica se input checkbox esta marcado
if(this.checked) {
// Adiciona valor do checkbox
files = files + ’ [‘ + this.value + ’] ‘;
}
});
alert(files);
}
// Adiciona evento ao botão com a função bind
$(“#botao”).bind(“click”, function(){
checkBox();
});
</script>
</body>
</html>

]]> http://www.phaneronsoft.com/phaneronsoft/2008/09/03/verificar-valores-de-input-checkbox-com-jquery/feed/ 7