Forum: Rails-ES JQuery, rjs, js.erb JavaScript no intrusivo

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-24 21:40
Veamos, estoy desarrollando mi aplicación y me dispongo a terminar de
iterar una de las acciones que he hecho (en otro post lo he explicado).
Mi duda es: ¿Cuál es la forma más correcta para desarollar con JQuery y
Rails JavaScript no intrusivo?

Teniendo en cuenta que tengo las siguientes vistas:

plantilla.html.haml:

= div_flash(flash[:error])
- form_for :cambio, :url => cambiar_club_path(@club) do |f|
  %h1#equipo= "Listado de Jugadores del " + h(@club.nombre)
  %h2#titulares Titulares
  =render_partial('jugadores/listado', @titulares)
  %h2#suplentes Suplentes
  =render_partial('jugadores/listado', @suplentes)
  %h2#no_convocados No convocados
  =render_partial('jugadores/listado', @no_convocados)
  =f.submit 'Cambiar'

_listado.html.haml:

%table
  %thead.atributos
    %tr
      %th{:scope => "col"} Posición
      %th{:scope => "col"} Nombre
      %th{:scope => "col"} Apellidos
      %th{:scope => "col"} Velocidad
      %th{:scope => "col"} Resistencia
      %th{:scope => "col"} Regate
      %th{:scope => "col"} Robo
      %th{:scope => "col"} Pase
      %th{:scope => "col"} Tiro
      %th{:scope => "col"} Portero
      %th{:scope => "col"} Calidad
      %th{:scope => "col"} Edad
      %th{:scope => "col"} Sueldo
      %th{:scope => "col"} Claúsula
  %tfoot
    %tr
      %td{:colspan => "14"}= total_jugadores(listado.count)
  %tbody
  - for jugador in listado
    %tr.jugador
      %th{:scope => "row"}= jugador.posicion
      %td= h jugador.nombre
      %td= h jugador.apellidos
      %td= h jugador.velocidad
      %td= h jugador.resistencia
      %td= h jugador.regate
      %td= h jugador.robo
      %td= h jugador.pase
      %td= h jugador.tiro
      %td= h jugador.portero
      %td= h jugador.calidad
      %td= h jugador.edad
      %td= h jugador.sueldo
      %td= h jugador.clausula
      %td.selector= radio_button("jugador", "cambio1", jugador.id)
      %td.selector= radio_button("jugador", "cambio2", jugador.id)
%br

Y en el fichero application.js he hecho lo siguiente:

var clicks = 2

$(document).ready(function(){
  $("#cambio_submit").remove();
  $(".selector").remove();
  $(".jugador").click(function(){
    if(clicks == 2 || clicks == 1)
      $(this).animate({backgroundColor: "#68BFEF",
      color: "white"}, 500)
    if(clicks == 0)
      $(".jugador").animate({backgroundColor: "#ccddff",
      color: "black"}, 500);
    clicks--;
    if(clicks == -1)
      clicks = 2;
  });
});

Pero supongo que esta forma de hacer las cosas está muy mal. ¿Cuál sería
la mejor forma de estructurarse?
89e7c8b162c71e9905fbfe7d2ec376dc?d=identicon&s=25 Fernando Blat (ferblape)
on 2008-11-24 22:33
(Received via mailing list)
Yo lo veo bastante no intrusivo la verdad: no hay nada de Javascript
en tus vistas, ni ningún evento enlazado desde el html.

¿Qué problema le ves?

Lo único que se me ocurre es que en lugar de meter ese churro de JS,
que es bastante específico de esa vista, en un fichero js lo metas con
un content_for en la vista correpondiente.

A ver si alguien te sabe contestar mejor.

2008/11/24 Carlos Belizón <ruby-forum-incoming@andreas-s.net>:
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-24 22:45
Fernando Blat wrote:
> Yo lo veo bastante no intrusivo la verdad: no hay nada de Javascript
> en tus vistas, ni ningún evento enlazado desde el html.
>
> ¿Qué problema le ves?
>
> Lo único que se me ocurre es que en lugar de meter ese churro de JS,
> que es bastante específico de esa vista, en un fichero js lo metas con
> un content_for en la vista correpondiente.
>
> A ver si alguien te sabe contestar mejor.
>
> 2008/11/24 Carlos Belizón <ruby-forum-incoming@andreas-s.net>:

A eso me refería, ¿Cómo estructurar directorios y ficheros para una
correcta modularización de las acciones JavaScript?
Cdb09f77ecd371f212b3e517db22efac?d=identicon&s=25 Jordi Villar Alvarez (Guest)
on 2008-11-24 23:57
(Received via mailing list)
El 24/11/2008, a las 22:45, Carlos
Belizón escribió:
> A eso me refería, ¿Cómo estructurar directorios y ficheros para una
> correcta modularización de las acciones JavaScript?

Hombre puedes estructurar de manera sencilla, al estilo de las vistas
de la aplicación. Igual que se suele hacer con los *.css

Yo uso este código en el header -ten en cuenta que está en Haml:

-if File.exists?(RAILS_ROOT+"/public/stylesheets/
#{params[:controller]}/#{params[:action]}.js")
   %script{:type => "text/javascript", :src => "/javascripts/
#{params[:controller]}/#{params[:action]}.js"}

Así que solo te quedaría montar una estructura /
javascript/"controlador"/"accion".js

Con esto no solo lo tendrás estructurado sino que solo cargarás el JS
necesario para cada vista, y si hay código que sea general para todas
las vistas pues al aplication.js

No se si me he explicado muy bien pero espero que la idea se entienda,
cualquier duda ya sabes.
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-25 00:14
Jordi Villar Alvarez wrote:
> Hombre puedes estructurar de manera sencilla, al estilo de las vistas
> de la aplicaci�n. Igual que se suele hacer con los *.css
>
> Yo uso este c�digo en el header -ten en cuenta que est� en Haml:
>
> -if File.exists?(RAILS_ROOT+"/public/stylesheets/
> #{params[:controller]}/#{params[:action]}.js")
>    %script{:type => "text/javascript", :src => "/javascripts/
> #{params[:controller]}/#{params[:action]}.js"}

Yo también uso HAML, ¿Y dónde debería de poner ese código? ¿Y qué
consigo con ello?
>
> As� que solo te quedar�a montar una estructura /
> javascript/"controlador"/"accion".js
>
> Con esto no solo lo tendr�s estructurado sino que solo cargar�s el JS
> necesario para cada vista, y si hay c�digo que sea general para todas
> las vistas pues al aplication.js
>
> No se si me he explicado muy bien pero espero que la idea se entienda,
> cualquier duda ya sabes.

Si pudieras extenderte un poco más, me habrías ayudado de una forma
increíble ;).
Bf47b813b0de4867a015fd4b54ac2fb4?d=identicon&s=25 Miguel Michelson (samek)
on 2008-11-25 01:49
(Received via mailing list)
utiliza livequery y lowpro para jquery, asi puedes tener tus formularios
y
links no intrusivos, es decir , que funcionen con y sin ajax

Saludos!

Atte.
Miguel Michelson Martinez
---------------------------------------
www.artenlinea.com


2008/11/24 Carlos Belizón <ruby-forum-incoming@andreas-s.net>
Bf47b813b0de4867a015fd4b54ac2fb4?d=identicon&s=25 Miguel Michelson (samek)
on 2008-11-25 01:51
(Received via mailing list)
Atte.
Miguel Michelson Martinez
---------------------------------------
www.artenlinea.com


2008/11/24 Miguel Michelsongs <miguelmichelson@gmail.com>

> utiliza livequery y lowpro para jquery, asi puedes tener tus formularios y
> links no intrusivos, es decir , que funcionen con y sin ajax
>



y desde el lado del controller trata la llamada algo como esto


 def index
    @artist = User.find(params[:artist_id])
    @series  = @artist.series.order_by_id.paginate  :page =>
params[:page],:per_page => 4

    respond_to do |format|

      format.html # index.html.erb

      format.js do
        render :update do  |page|
          #page.alert "alert message"
          page.replace_html 'load_content', :partial => "series"
        end
      end

    end
  end


saludos!
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-25 17:19
Miguel Michelson wrote:
> utiliza livequery y lowpro para jquery, asi puedes tener tus formularios
> y
> links no intrusivos, es decir , que funcionen con y sin ajax
>
> Saludos!
>
> Atte.
> Miguel Michelson Martinez
> ---------------------------------------
> www.artenlinea.com
>
>
> 2008/11/24 Carlos Belizón <ruby-forum-incoming@andreas-s.net>

¿Qué consigo gracias a esas librerías? Ya que no me queda claro que
funcionalidad es la que me aporta frente a jquery a pelo.
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-25 19:12
Carlos Belizón wrote:
>> Yo uso este c�digo en el header -ten en cuenta que est� en Haml:
>>
>> -if File.exists?(RAILS_ROOT+"/public/stylesheets/
>> #{params[:controller]}/#{params[:action]}.js")
>>    %script{:type => "text/javascript", :src => "/javascripts/
>> #{params[:controller]}/#{params[:action]}.js"}

¿Dónde he de poner ese código? ¿Y qué consigo con ello?
Cdb09f77ecd371f212b3e517db22efac?d=identicon&s=25 Jordi Villar Alvarez (Guest)
on 2008-11-25 20:43
(Received via mailing list)
El 25/11/2008, a las 19:12, Carlos
Belizón escribió:>>> -if File.exists?(RAILS_ROOT+"/public/stylesheets/
>>> #{params[:controller]}/#{params[:action]}.js")
>>>   %script{:type => "text/javascript", :src => "/javascripts/
>>> #{params[:controller]}/#{params[:action]}.js"}

Buenas,

Tienes que ponerlo dentro del <head> y lo que hace, como ya he dicho
antes, es cargarte el js que definas para cada página, poniendo los
*.js al estilo de las vistas de la aplicación royo /public/
javascripts/"controller"/"action".js

Si aun y con esto no lo entiendes yo no se explicarlo mejor ;)
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-25 21:42
Jordi Villar Alvarez wrote:
> El 25/11/2008, a las 19:12, Carlos
> Beliz�n escribi�:>>> -if File.exists?(RAILS_ROOT+"/public/stylesheets/
>>>> #{params[:controller]}/#{params[:action]}.js")
>>>>   %script{:type => "text/javascript", :src => "/javascripts/
>>>> #{params[:controller]}/#{params[:action]}.js"}
>
> Buenas,
>
> Tienes que ponerlo dentro del <head> y lo que hace, como ya he dicho
> antes, es cargarte el js que definas para cada p�gina, poniendo los
> *.js al estilo de las vistas de la aplicaci�n royo /public/
> javascripts/"controller"/"action".js
>
> Si aun y con esto no lo entiendes yo no se explicarlo mejor ;)

Ya, ya te he entendido ;). De todas formas he estado mirando y remirando
y he encontrado un plugin que hace lo mismo que tu pero de modo más
elegante. Por si lo quieres:

http://agilewebdevelopment.com/plugins/javascript_...

De todas formas, muchas gracias ;).
Bf47b813b0de4867a015fd4b54ac2fb4?d=identicon&s=25 Miguel Michelson (samek)
on 2008-11-26 04:32
(Received via mailing list)
jquery+livequery+low pro, te permite convertir links html y formularios
html
normales en formularios ajax, pero en el caso que el usuario desactive
javascritp los links y los formularios funcionan normalmente.


un ejemplo de eso seria el siguiente: (entendiendo que ya cargaste esas
3
librerias js)

en application js

//Paginacion no intrusiva
jQuery(function($) {
  $(' div.pagination a').attach(Remote.Link, {
    type: 'GET',
    dataType: 'script' ,
        beforeSend:function(){
     //alert('cargando');
            $('.message').fadeIn('slow');
                    },
        complete:function(){
                $('.message').fadeOut('slow');
    }
    });
});

y en el controller

def show
    @artists =  User.with_art_works.recently_updated.paginate  :page =>
params[:page],:per_page => 9
    #@artists = User
    respond_to do |format|
      format.html # show.html.erb
      format.js do
        render :update do  |page|
          #page.alert "alert message"
          page.replace_html 'photos', :partial =>
"portfolios/small_photos"
        end
      end
    end
  end


la gracia de livequery es que te recarga el dom cuando el elemento es
cargado por ajax, eso significa que puedes usar esos elementos nuevos
que
aparecen por la consulta ajax y puede seguir manipulandolos con
javascritp,
lo que hace lowpro es que te permite encapsular funcionalidades de
manera
muy agradable , ademas viene con las funciones link.Remote y
Form.Remote,
que son las que se hacen el trabajillo in-obstrusivo

entonces lo que te hace es servir la pagina de dos formas una como
request
html normal y otra si pasa por ajax

aqui puedes ver un ejemplo funcionando

http://artenlinea.com/portfolios


saludos!




Atte.
Miguel Michelson Martinez
---------------------------------------
www.artenlinea.com


2008/11/25 Carlos Belizón <ruby-forum-incoming@andreas-s.net>
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-11-26 13:29
Miguel Michelson wrote:
> jquery+livequery+low pro, te permite convertir links html y formularios
> html
> normales en formularios ajax, pero en el caso que el usuario desactive
> javascritp los links y los formularios funcionan normalmente.
> la gracia de livequery es que te recarga el dom cuando el elemento es
> cargado por ajax, eso significa que puedes usar esos elementos nuevos
> que
> aparecen por la consulta ajax y puede seguir manipulandolos con
> javascritp,
> lo que hace lowpro es que te permite encapsular funcionalidades de
> manera
> muy agradable , ademas viene con las funciones link.Remote y
> Form.Remote,
> que son las que se hacen el trabajillo in-obstrusivo
> entonces lo que te hace es servir la pagina de dos formas una como
> request
> html normal y otra si pasa por ajax
>
> aqui puedes ver un ejemplo funcionando
>
> http://artenlinea.com/portfolios
>
>
> saludos!
>
>



Vale, ya he entendido bien la funcionalidad de LiveQuery, sirve más que
nada para que los eventos y demás modificaciones que se hagan vía JS
sobre un elemento del documento se tengan en cuenta cuando se añanda
nuevos elementos al DOM del documento. Veo que esto me va ahorrar
bastantes quebraderos de cabeza a la hora de procesar llamadas AJAX que
incorporen nuevos elementos al DOM de mi HTML.

Sin embargo sigo sin ver claro para qué sirve Lowpro, ya que la mayoría
de documentación que encuentro es para prototype y no para JQuery. Si
fueras tan amable de hacerme ver qué diferencia habría en tu código sin
el uso de lowpro me echarías un gran cable para ver cuál es su utilidad.
Bf47b813b0de4867a015fd4b54ac2fb4?d=identicon&s=25 Miguel Michelson (samek)
on 2008-11-26 14:37
(Received via mailing list)
Atte.
Miguel Michelson Martinez
---------------------------------------
www.artenlinea.com


2008/11/26 Carlos Belizón <ruby-forum-incoming@andreas-s.net>

> > lo que hace lowpro es que te permite encapsular funcionalidades de
> > http://artenlinea.com/portfolios
> sobre un elemento del documento se tengan en cuenta cuando se añanda
> nuevos elementos al DOM del documento. Veo que esto me va ahorrar
> bastantes quebraderos de cabeza a la hora de procesar llamadas AJAX que
> incorporen nuevos elementos al DOM de mi HTML.


oh si!

>
>
> Sin embargo sigo sin ver claro para qué sirve Lowpro, ya que la mayoría
> de documentación que encuentro es para prototype y no para JQuery. Si
> fueras tan amable de hacerme ver qué diferencia habría en tu código sin
> el uso de lowpro me echarías un gran cable para ver cuál es su utilidad.


es cierto, low pro esta para prototype y luego se porta para jquery, la
gracia de lowpro es que te permite escribir el javascript mas al estilo
oop
, mira dicen por ahi  que :

What is Low Pro? So what is Low Pro? It's a plugin that provides a way
of
making more object-oriented JavaScript through event delegation.
jQuery's
plugin architecture provides a really simple way of extending the core
functionality, but there is no easy way of making macros of code that do
several types of events on one element. Until now!"


por aqui puedes encontra rmas informacion

 http://www.danwebb.net/2008/2/3/how-to-use-low-pro...

+

google => lowpro+jquery

saludos!
94ac01209314464490a94b47f051be0b?d=identicon&s=25 alarkspur (Guest)
on 2008-11-26 14:39
(Received via mailing list)
> Sin embargo sigo sin ver claro para qué sirve Lowpro, ya que la
> mayoría
> de documentación que encuentro es para prototype y no para JQuery.

Echa un vistazo a este post,
<http://www.danwebb.net/2008/1/31/low-pro-for-jquery
 >

A mi si me aclaro bastante las cosas.

Saludos.
B7de309e2f3436b5b1c0b5c18dad089d?d=identicon&s=25 Carlos Belizón Ibañez (paliyoes)
on 2008-12-01 13:25
alarkspur wrote:
>> Sin embargo sigo sin ver claro para qu� sirve Lowpro, ya que la
>> mayor�a
> de documentaci�n que encuentro es para prototype y no para JQuery.
>
> Echa un vistazo a este post,
> <http://www.danwebb.net/2008/1/31/low-pro-for-jquery
>  >
>
> A mi si me aclaro bastante las cosas.
>
> Saludos.

Si no he entendido mal, Lowpro lo que hace es proporcionarme una forma
de crear clases de una forma más sencilla para modular mejor mis scripts
¿Me equivoco mucho?
5c15703984caa012845b3cea129da936?d=identicon&s=25 Manuel González Noriega (Guest)
on 2008-12-01 13:34
(Received via mailing list)
2008/12/1 Carlos Belizón <ruby-forum-incoming@andreas-s.net>

> alarkspur wrote:
>
> Si no he entendido mal, Lowpro lo que hace es proporcionarme una forma
> de crear clases de una forma más sencilla para modular mejor mis scripts
> ¿Me equivoco mucho?
>


Hola chicos,

estamos alargando el offtopic mucho, vamos a dejarlo aquí. En todo caso,
existen estupendas listas para hablar del tema como

http://lists.scriptia.net/listinfo.cgi/jquery-es-s...
http://javaescript.scriptia.net/
This topic is locked and can not be replied to.