lucaswxp 22 Denunciar post Postado Outubro 19, 2009 Olá pessoal, com este primeiro post falarei um pouco sobre ajax no CakePHP. Esta é apenas a parte 1, e veremos apenas o básico, com o passar do tempo irei postando mais aqui no blog. Pré-requisitos * Conhecimento básico sobre o framework CakePHP Conteúdo Antes de fazer qualquer coisa, precisamos baixar o framework prototype a biblioteca scriptaculos. Teoricamente você só precisa do prototype, o scriptaculos apenas cuida dos efeitos. E para os amantes de jQuery, não se desesperem, no final eu deixei uma solução para vocês ;D Primeiro de tudo vamos adicionar os helper Javascript, que incluirá o prototype em nossa app, e o helper Ajax que fará a mágica acontecer. <?php class AlgumController extends AppController { var $name = 'Algum'; var $helpers = array('Javascript' , 'Ajax'); var $uses = null; } ?> Na requisição, precisaremos da action que conterá o link (index), e outra action que renderizará o view para quando o link for clicado (actionajax). <?php class AlgumController extends AppController { var $name = 'Algum'; var $helpers = array('Javascript' , 'Ajax'); var $uses = null; function index(){ } function actionajax(){ $this->layout = 'ajax'; } ?> Perceba que na action "actionajax" estamos utilizando o layout de ajax. O layout "ajax" é apenas um layout vazio, e já vem por padrão no cake. Isso é necessário, pois se utilizássemos o layout default, incluiria não apenas o conteúdo que queremos, mas também o layout todo. Nosso controller já esta pronto, agora basta fazer os views. actionajax: <p>Conteúdo resgatado por Ajax.</p> index: <?php // Incluimos o framework echo $javascript->link('prototype' , false); // O destino a ir quando o javascript estiver desabilitado $href = array('action' => 'actionSemAjax'); $options = array( 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar 'url' => array('action' => 'actionajax'), // Onde buscar o conteudo ); echo $ajax->link('Efetuar requisição remota.' , $href , $options); ?> <div id="conteudoAjax"></div> Em index, antes de tudo, incluimos o prototype que cuidará da requisição para nos. Logo depois definimos uma variável $href. Esta variável é um parâmetro do método link - Ajax::link() - e será o conteúdo do atributo "href" da tag "a", isto é interessante, pois mesmo o usuário não tendo o javascript ele poderá ser encaminhado para uma outra action ou até a mesma (action) se utilizado o componente RequestHandler - falarei dele num outro post. Depois vem $options, que é o parâmetro mais importante daqui. O índice "update" aponta para o ID do elemento HTML que será atualizados com as novas informações. E o índice "url" deverá apontar onde você quer buscar as informações, atenção que este índice sobrescreve $href. Logo abaixo reunimos tudo o que definimos para formar o link, já pronto para efetuar a requisição. Para mais detalhes no método, veja na API. E por ultimo, criamos nosso elemento HTML que será atualizado quando "link" for clicado. Se você não quiser atualizar a div com o conteúdo, mas sim inserir antes ou depois do que ja esta presente na div, basta utilizar o índice "position", veja um exemplo: $options = array( 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar 'url' => array('action' => 'actionajax'), // Onde buscar o conteúdo 'position' => 'after' // Adiciona depois do conteúdo da div ); Position pode conter: top, bottom, after, ou before OK! Esta funcionando, mas não fizemos o mais legal, que é ver aquele loader do ajax dando voltinhas enquanto carrega *-* Fazer isso é muito fácil, basta de apenas mais duas linhas. Primeiro vamos colocar a imagem no view: <img src="caminho/ajax-loader.gif" id="ajax-loader" style="display: none" /> E depois basta adicionar o índice "indicator" em $options, indicando o ID do elemento que deverá aparecer enquanto a requisição é carregada: $options = array( 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar 'url' => array('action' => 'actionajax'), // Onde buscar o conteúdo 'indicator' => 'ajax-loader' // ID do loader ); Funciona! E ficamos por aqui =D, esta foi apenas a primeira parte, nas próximas, falaremos de coisas um pouco mais avançada, esta foi mais para pegar uma base ;D Não perca tempo e pega logo seu ajax loader personalizado: http://www.ajaxload.info/ Até a próxima o/ Ah é! Já ia me esquecendo. Para quem usa jQuery, teve um cara que fez seu próprio AjaxHelper parecido com o original, só que utilizando jQuery, você pode efetuar o download dele aqui: http://loadsys.com/files/jquery_ajax_helper.zip Atenção que não é completo que nem o padrão do cake, mas vem com os métodos mais utilizados. FONTE: http://lucaspelegrino.com/ Compartilhar este post Link para o post Compartilhar em outros sites
Sérgio Macedo 0 Denunciar post Postado Outubro 23, 2009 Belissimo tutorial… continue assim… Para trabalhar com nossa acentuação PT-BR basta apenas adicionar uma instrução na sua view: actionajax.ctp: <?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?> <p>Conteúdo resgatado por Ajax.</p> Compartilhar este post Link para o post Compartilhar em outros sites
lucaswxp 22 Denunciar post Postado Outubro 23, 2009 Não vejo o porque. UTF-8 também trabalha com nossa acentuação. O unico motivo que vejo para mudar de utf-8 para iso seria por incompatibilidade com o banco de dados =D Compartilhar este post Link para o post Compartilhar em outros sites