JAX - jQuery Ajax Helper for CakePHP

Setembro 28, 2007 at 15:28 · Categorias: CakePHP, JQuery, JavaScript, Úteis

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,

16 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!

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário