JAX - jQuery Ajax Helper for CakePHP

28/09/2007

Olá pessoal,

intediado com o helper do cake que trabalha com prototype? Eu também...

Então resolvi criar (inicialmente para uso próprio) o JAX - jQuery Ajax Helper. Que funciona de forma bem semelhante ao helper nativo do cake, mas com algumas melhorias...

O código pode ser visto abaixo: (e baixado aqui)

TEXTO PURO
PHP:
  1. /*
  3. JAXHelper - CakePHP Helper for Ajax with jQuery
  4. Author: Tulio Faria (www.tuliofaria.net)
  6. Requeriments:
  7. - jquery: http://docs.jquery.com/Downloading_jQuery
  8. - jform (for some features like observeForm): http://jquery.com/plugins/project/form
  10. Using:
  11. - include jquery.js and jquery.form.js in your view (yes, using plain html or html helper :) )
  13. - include the helper Jax in your controller
  14. - call any of methods available: link, observeField and observeForm
  16. */
  17.  
  18. class JaxHelper extends Helper {
  19.  
  20. var $helpers = array("Html");
  21.  
  22. function link($text, $url, $target, $options = null, $loading = null){
  23. $aId = 'link' . intval(rand());
  24. $url = $this->Html->url($url);
  25. $att = " ";
  26.  
  27. if (is_array($options)){
  28.  
  29. foreach($options as $k=>$v){
  30. $att.=$k.'="'.$v.'" ';
  31. }
  32.  
  33. }
  34.  
  35. echo "<a id="\" href="http://www.tuliofaria.net/%5C%22$url%5C%22">$text</a>";
  36. echo $this->_jsBlock("\$(\"#$aId\").click( function(){  \$.post(\"$url\", function(data){
  38. \$(\"$target\").html(data); }); return false; }); ");
  39. }
  40. function observeField($element, $options){
  41. $event = $options["event"];
  42. $update = $options["update"];
  43. $url = $this->Html->url($options["url"]);
  44.  
  45. $code = $options["loading"].'
  46. $.ajax({
  47. type: "POST",
  48. url: "'.$url.'",
  49. data: $("'.$element.'").serialize(),
  50. success: function(data){
  51. $("'.$update.'").html(data);
  52. '.$options["complete"].'
  53. }
  54. });
  55. ';
  56.  
  57. return $this->_jsBlock($this->_addReady("\$(\"$element\").$event(function(){ $code })"));
  58. }
  59.  
  60. function observeForm($element, $options){
  61. $event = $options["event"];
  62. $update = $options["update"];
  63. $url = $this->Html->url($options["url"]);
  64.  
  65. $code = '$("'.$element.'").ajaxSubmit({
  66. target:        \''.$update.'\',
  67. beforeSubmit:  function(){'.$options["loading"].'},
  68. success:       function(){'.$options["complete"].'}
  69. }
  70. );';
  71.  
  72. return $this->_jsBlock($this->_addReady("\$(\"$element\").$event(function(){ $code return false; })"));
  73. }
  74.  
  75. function _jsBlock($content){
  76. return "<script type="\">$content</script>";
  77. }
  78. function _addReady($content){
  79. return "\$(function(){ $content } );";
  80. }
  81.  
  82. function test(){
  83. echo $this->_jsBlock($this->_addReady("alert(\"Jax Helper has been installed and ready to use!\");"));
  84. }
  85. }
  86. ?>

Exemplos:

Link:

TEXTO PURO
PHP:
  1. link("Click Here!", "/contatos/info/1/", "teste", "teste"); ?>

Observe field:

TEXTO PURO
PHP:
  1. $options["event"] = "change";
  2. $options["update"] = "#teste";
  3. $options["url"] = "/contatos/info/1/";
  4. $options["loading"] = "$('#loading').fadeIn('slow');$('#teste').hide();";
  5. $options["complete"] = "$('#teste').fadeIn('slow');$('#loading').fadeOut();";
  6. echo $jax->observeField("#texto", $options); ?>

ObserveForm:

TEXTO PURO
PHP:
  1. $options["event"] = "submit";
  2. $options["update"] = "#teste";
  3. $options["url"] = "/contatos/info/1/";
  4. $options["loading"] = "$('#loading').fadeIn('slow');$('#teste').hide();";
  5. $options["complete"] = "$('#teste').fadeIn('slow');$('#loading').fadeOut();";
  6.  
  7. echo $jax->observeForm("#testando", $options); ?>

Em breve publicarei exemplos mais decentes de uso.

Qualquer sugestão ou dúvida, comente!

Abraços,

25 Comentários »

  1. Danilo Miguel said,

    Setembro 28, 2007 @ 16:36

    Eu sou suspeito em falar, mas ficou show!
    Não testei ainda, era pra ter feito isso antes da publicação, mas vc esqueceu de me enviar.. enrolado...rsrsrs

    Mas pelo visto está shoe de bola!!! Vou testar, e usar, o mais rápido possível!

  2. Rafael Marin said,

    Setembro 29, 2007 @ 22:44

    Opa, sou novo por essas bandas.
    To me aventurando com CakePHP e acho que achei um site brasileiro.
    Muito bom os artigos sobre o framework.
    Abraços

  3. John-Henrique said,

    Outubro 1, 2007 @ 16:48

    Acho que seria melhor colocar um link para fazer o download do helper, aqui deu erro na hora de desmembrar as quebras de linha.

    A propósito o que significa isso?
    [code]"

  4. Tulio Faria said,

    Outubro 2, 2007 @ 16:14

    Dimiguel,
    valeu pelo elogio... :)

    Rafael,
    pretendo em breve trazer mais notícias sobre CakePHP... E ajudar ainda mais quem está começando...

    Olá John-Henrique,
    está disponível para download...

    abraços a todos,

  5. Rafael Brugnollo said,

    Outubro 4, 2007 @ 01:33

    Falae Tulio Blz...

    Cara... sabe me indicar um passo-a-passo para iniciante em Ajax + cakephp?!

    valeu cara... to tentando fazer funcionar esse seu código... mas não tenho noção de ajax no cake...

    VALEU!!

  6. Tulio Faria said,

    Outubro 5, 2007 @ 15:22

    Opa, jóia...

    Então, eu pretendo fazer um desses... Eu ainda não achei nada muito didático por aí...

    Abraços,

  7. Guto said,

    Novembro 7, 2007 @ 10:19

    Perfeito para quem já trabalha com o Jquery, valeu!

  8. Bill said,

    Novembro 13, 2007 @ 15:39

    Achei bem bacana o Helpers, só falta mostrar um exemplo bem "passo a passo" pra quem apanha de ajax e javascript que nem eu..rs

    Abraços amigo

  9. Tulio Faria said,

    Novembro 17, 2007 @ 15:50

    Bill,

    os exemplos virão em breve :)

    abraços,

  10. Guto said,

    Novembro 26, 2007 @ 21:57

    Só um lembrete, quem baixar o código não esqueça de colocar

  11. Marco Souza said,

    Novembro 26, 2007 @ 23:15

    Blz a todos , estou gostando dos posts e videos do Tulio, se alguem conseguiu utilizar esses help, post o codigo ai. vlw aguardo

  12. Tulio Faria said,

    Dezembro 1, 2007 @ 15:00

    Olá, eu estou devendo os exemplos ainda... Em breve irei disponibilizar... Fim de ano sempre é uma grande correria.

    Abraços a todos,

  13. Mariano Guezuraga said,

    Maio 14, 2008 @ 14:47

    For portability you should open you code like <?php and not <?.
    I'll check this later, but I was expecting something like this. Nice work!

  14. Tulio Faria said,

    Maio 17, 2008 @ 22:27

    Hi Mariano,

    yes, I have to change this in my scripts. I like to open the php escope with < ?
    :)

    Thanks for your comment!

  15. Alisson S A Nascimento said,

    Agosto 8, 2008 @ 10:11

    Vou Baixar! Estou com problemas com o AjaxHelper

  16. Jero Ahumada said,

    Agosto 12, 2008 @ 14:30

    Just what I was looking for.
    I will test it right now.
    Thanks!

  17. mihai said,

    Outubro 16, 2008 @ 06:23

    Thank you very much for your code.

    I will give it a try soon.

    Best wishes!

  18. Rafael Almeida said,

    Dezembro 19, 2008 @ 18:51

    Olá Tulio,

    Gostaria de saber se onde uso
    echo $ajax->observeField($html->domId('Pgrupo.marca_id'),array('update' => $html->domId('pgrupo_id'),'url' => array('controller' => 'pgrupos','action' =>'list')));

    ficaria
    echo $jax->observeField($html->domId('Pgrupo.marca_id'),array('update' => $html->domId('pgrupo_id'),'url' => array('controller' => 'pgrupos','action' =>'list')));

  19. SimonJPA said,

    Fevereiro 12, 2009 @ 22:31

    Boa Noite,

    Eu estou usando seu artigo é daí, eu escrevi o link assim dentro do meu arquivo ctp:

    So que quando eu escreve assim ele dá esse erro:

    Fatal error: Call to undefined function link() in C:\@SimonJPA\jax\site\app\views\sistema\index.ctp on line 3

    Eu coloquei assim no meu controller:

    var $helpers = array('Fckeditor','Jax');

    É assim no meu app/view/layouts/default.thtml:

    echo $javascript->link('jquery');
    echo$javascript->link('jquery.form');

    O que eu estou fazendo errado?

    Atenciosamente

  20. SimonJPA said,

    Fevereiro 12, 2009 @ 22:32

    Eu escrevi assim dentro do meu arquivo ctp:

    php link("Click Here!", "/contatos/info/1/", "teste", "teste");

  21. antonio said,

    Março 6, 2009 @ 09:44

    Blz man,

    eu estou começando com o cakephp e o prorio php agora e nao consigo entender direito, vc ja disponibilizou algum passo a passo sobre como utilizar o cake e o ajax juntos?

    abraços

  22. Rasheed said,

    Março 18, 2009 @ 06:50

    Hi
    can we use prototype + scriptaculous and Jquery in a single cake Project?

    I am using Prototype+scpitaculous for ajax functionality & other effects , now i want to Jquery using this Helper for some Tab functionality

    Is it possible? or i have to remove prototype if i use jquery?

    Please help.

    Thaks in advance
    - Rasheed M A

    rasheeed 77 [at] gmail [dot] com

  23. nome said,

    Junho 16, 2009 @ 12:40

    uma bosta

  24. Jo said,

    Fevereiro 20, 2010 @ 21:13

    Como estou comecando no Cake, acabei nao achando pratico os exemplos...

    seria possivel disponibilizar um "demo" completo deste helper

  25. Jo said,

    Fevereiro 20, 2010 @ 21:29

    Agora que vi que este helper foi abandonado. desculpe a pergunta acima, acredito que nao tera resposta certo. (poderia ter mais comentarios dentro do codigo, como data de criacao, e que tipo de parametro a funcao espera. )

    Abraco !

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário