JAX – jQuery Ajax Helper for CakePHP

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)

  1. /*
  2.  
  3. JAXHelper - CakePHP Helper for Ajax with jQuery
  4. Author: Tulio Faria (www.tuliofaria.net)
  5.  
  6. Requeriments:
  7. - jquery: http://docs.jquery.com/Downloading_jQuery
  8. - jform (for some features like observeForm): http://jquery.com/plugins/project/form
  9.  
  10. Using:
  11. - include jquery.js and jquery.form.js in your view (yes, using plain html or html helper :) )
  12.  
  13. - include the helper Jax in your controller
  14. - call any of methods available: link, observeField and observeForm
  15.  
  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){
  37.  
  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:

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

Observe field:

  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:

  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 Comment

  1. 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. 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. 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?

  4. 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. 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. Opa, jóia…

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

    Abraços,

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

  8. 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. Bill,

    os exemplos virão em breve 🙂

    abraços,

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

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

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

    Abraços a todos,

  13. 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. Hi Mariano,

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

  15. Alisson S A Nascimento says:

    Vou Baixar! Estou com problemas com o AjaxHelper

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

  17. Thank you very much for your code.

    I will give it a try soon.

    Best wishes!

  18. 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. 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. Eu escrevi assim dentro do meu arquivo ctp:

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

  21. 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. 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. Como estou comecando no Cake, acabei nao achando pratico os exemplos…

    seria possivel disponibilizar um “demo” completo deste helper

  24. 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 !

Deixe uma resposta