Tópicos em Setembro, 2007

JAX - jQuery Ajax Helper for CakePHP

28 de Setembro de 2007 às 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,

Comentários (14)

Eu te ajudei? Que tal me ajudar?

13 de Setembro de 2007 às 23:41 · Categorias: Blog

Olá pessoal,

esta semana estava pensando sobre um assunto interessante: Minha conta do Dreamhost está vencendo :( a qual possibilitou eu colocar os vídeos tutoriais... :)
Não tão interessante assim né? rs...

Na verdade este post é para as boas almas que desejarem ajudar de alguma forma o blog... O link para doação está disponível  do lado esquerdo do blog, quem quiser doar usando o PagSeguro (do UOL) é só clicar lá... Quer ajudar de outra forma? Entre em contato comigo...

Claro que a ajuda será bem vinda tanto para o blog quanto para mim :) Vocês sabem como é né? Vida de universitário é uma tristeza :)
Abraços,

Comentários (12)