16 dom ajax con jquery rails

7/18/2019 16 DOM AJAX Con jQuery Rails

http://slidepdf.com/reader/full/16-dom-ajax-con-jquery-rails 1/62

DOM y AJAX con jQuery + Rails

Ingeniería de Sistemas deInformación

Grado en Ingeniería en Tecnologías deTelecomunicación

GSyC



• ©2012 Departamento GSyC, URJC

– Algunos derechos reservados. Este trabajo se

distribuye bajo la licencia Creative CommonsAttribution-NonCommercial-ShareAlike 3.0

Unported License

– ©2012 Armando Armando Fox & DavidPatterson

• Licensed under Creative Commons Attribution-

NonCommercial-ShareAlike 3.0 Unported License

2 ©GSyC



Contenidos

• Introducción

• El Document Object Model (DOM)

• Registro de manejadores de eventos sobre

elementos del DOM • AJAX

• Otros usos de JavaScript

• Precauciones

3 ©GSyC



Consejos para aprender

• Asegúrate de tener la barra de herramientas de Firefox instalada (WebDeveloper Extension)

• Durante tu aprendizaje de JavaScript ten siempre a mano una consola

en tu browser para poder probar código

– En Firefox instala firebug: http://getfirebug.com

– En Safari o en Chrome, busca el menú de desarrollador y allí arranca laconsola de JavaScript

• Para depurar:

– console.log("hola mundo")

– alert("hola")

– Depurador de firebug

• Extensión de Firefox tilt para ver DOM en 3D: disponible en las últimasversiones de Firefox en el menú Tools->Web Developer

• Y para trastear con JavaScript + HTML + CSS:

– http://jsfiddle.net

4 ©GSyC



Introducción



Usos de JavaScript1. Client-side JavaScript :

– Código JavaScript que corre en el browser, asociado a la página Web

– Se usa JavaScript para mejorar la experiencia de usuario de aplicaciones SaaSque siguen el patrón arquitectónico MVC

– Se combina JavaScript con HTML y CSS

– Es importante que no se mezcle JavaScript con el código HTML

– Es importante que el servicio esté disponible para cliente no-JavaScript

2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs – Pueden operar offline – El código JavaScript en el browser usa un servidor delgado, sólo para almacenar

en la BD, recibiendo objetos JSON que convierte en HTML (en el browser)

– Se programan normalmente con frameworks, como Ember.js, Backbone.js oAngular de Google que soporta el patrón MVC

3. Aplicaciones SaaS pero con JavaScript en el servidor

– Frameworks como node.js y extensiones: meteor, express

6 ©GSyC



Client-side JavaScript

• En este tema no se abordan las aplicaciones tipo desktopprogramadas en JavaScript ni JavaScript en el servidor ni JavaScript

en los móviles

• Aprenderemos cómo usar JavaScript en el browser para mejorar la

interactividad con la interfaz

• Aprenderemos cómo usar jQuery como framework para consultar y

modificar los elementos del documento HTML cargado en el browser

• Aprenderemos a usar AJAX para que el código JavaScript cargado enuna página realice RPCs a las acciones de controladores Rails

– Las acciones Rails devolverán vistas parciales que el código JavaScript que correen el browser usará para modificar el documento HTML desde el que se hizo la

RPC

• Como ejemplos prácticos aprenderemos: – a ocultar películas no aptas para menores modificando sin intervención del servidor

– a mostrar una ventana flotante con la información de una película que ha sidoobtenido con AJAX

7 ©GSyC



La posición privilegiada de

JavaScript

• JavaScript es un lenguaje más

• Pero al correr en el browser el códigoJavaScript puede:

1.

Ser ejecutado como consecuencia de la interacción delusuario con la interfaz gráfica de la página: click de

ratón, ratón pasando por encima, pulsar tecla,…

2. Realizar peticiones HTTP al servidor sin necesidad de

tener que recargar toda una página

3. Ser ejecutado cuando el servidor envíe una respuestaHTTP a una petición

4. Consultar y modificar el documento cargado,redibujándolo si hay cambios

8 ©GSyC

¿Dónde poner el código

JavaScript? –

Las páginas que quieren usar funciones o variablesJavaScript tienen que incluir el código JavaScript

– Formas NO recomendadas: mezclado en el bodyhttp://pastebin.com/sTM4Z8wS

9 ©GSyC

<html><head><title>Update Address</title></head><body>

<script>

</script>

<form onsubmit="return checkValid()" id="addr" action="/update"><input onchange="RP.filter_adult" type="checkbox"/>

<a href="javascript:back()">Go Back</a></form>

</body></html>



¿Dónde poner el código

JavaScript? – La forma recomendada es guardar el código en fichero aparte y utilizar la

etiqueta HTML <script src="url"> para incluirlo en la sección HEAD deldocumento, no poniendo código mezclado en el body

• Misma justificación que para sacar el estilo a ficheros .css

• Helper Rails que genera la etiqueta: javascript_include_tag 'fichero_javascript'

– Los elementos HTML que vayan a iteraccionar con JavaScript:

• O bien se añaden al DOM en una función JavaScript setup()• O bien están siempre, pero invisibles, usando CSS para que tengan el atributohidden, y luego en una función JavaScript setup() al cargar la página se cambiasu estilo para que aparezcan

• De cualquiera de las dos formas, si el browser no tiene JavaScript activado nomostrará los elementos HTML que requieren JavaScript, lo que es bueno

– En Rails:

1. El código JavaScript que escribamos para nuestra aplicación se pone en ficheros conextensión .js en el directorio app/assets/javascripts

2. El helper de Rails javascript_include_tag 'application' puede incluirse en cualquier template, p.ej.en app/views/layouts/application.html.haml

– Este fichero JavaScript produce el efecto de que al desplegar en producción la aplicación, Rails concatenará ycomprimirá (minifying) todos los .js del directorio app/assets/javascripts junto a la biblioteca jQuery, y pondráun fichero único para toda la aplicación en el dir public

10 ©GSyC



El Document Object Model

(DOM)



DOM – DOM: Document Object Model

– World Wide Web Consortium Document Object Model:• "a platform and language-neutral interface that will allow

programs and scripts to dynamically access and update thecontent, structure and style of documents"

– O sea: una representación estandarizada, en forma de

árbol, de los elementos de un documento HTML, XML oXHTML

– Coloquialmente hablamos del DOM de una página

– Cada elemento DOM se define recursivamente puesuna de sus propiedades es un array de elementos hijo

• Por tanto, el nodo DOM que representa el elemento <html> incluyetodo el documento, con nodos hijos para <head> y <body>, y <body>tiene nodos hijos <h1>, <div>, …

• Cada elemento puede tener atributos: <img src=…>, <a href=…>,<div class=…>, <span id=…>,…

12 ©GSyC



DOM

13 ©GSyC

• Inspección del DOM en

Firefox:

– Arrancando firebug, o

– Menú Herramientas->Desarrollador Web ->Inspeccionar ,

• y abajo a la derecha,Vista 3D

• Si no lo ves, instala un

Firefox más reciente, oinstala la extensión tilt



Acceso al DOM desde

JavaScript –

Llamando a funciones JavaScript del objeto global(window) se puede recorrer y consultar el árbol DOM

de la página actual

– Llamando a funciones JavaScript se pueden añadir/ eliminar elementos al árbol DOM, modificar su

contenido y modificar/eliminar/añadir atributos (p.ej. ido class) de elementos, lo que provoca que se redibujela parte afectada de la página

– Cuando el browser carga una página, el HTML de la

página se parsea para generar su árbol DOM

– En un browser, el objeto global JavaScript está accesible enla variable global window

– En window.document está la raíz del árbol DOM de lapágina que está mostrando el browser, cambiando cada vez

que carga una nueva. 14 ©GSyC



JSAPI

– El objeto window ofrece algo más que el DOM

– Ofrece propiedades y funciones para manipular el DOM y otras

específicas del browser, con el nombre de API JSAPI

• location, document, document.head, document.body,document.write(string ), alert(string ), confirm(string ),…

• Ejemplo: prueba a asignar una url a window.location en la consola

– Las implementaciones de JavaScript son bastante similares en los

diferentes browsers

– Sin embargo, la API JSAPI no es tan uniforme entre browsers – Existen varias bibliotecas que recubren JSAPI para homogeneizar:

YUI, Prototype, DoJo. La más usada: jQuery

15 ©GSyC



jQuery

– jQuery es una API que recubre JSAPI,proporcionando uniformidad entre browsers

• Usaremos jQuery y no JSAPI

– jQuery extiende JSAPI con animaciones,

soporte para CSS, eventos y AJAX

– jQuery define una función global: jQuery()

• $() es un alias de jQuery()

16 ©GSyC



Función global jQuery(),$()– jQuery / $() es una función sobregarcada

(overloaded ). Dependiendo de los argumentos que se lepasan hace una cosa u otra

1. Pasándole un selector de CSS (un string) :

– Devuelve los elementos del DOM correspondientes al selector CSS que sepasa como argumento, o null si no hay ninguno

– Si se le pasa en un 2º argumento un elemento, sólo devuelve losdescendientes de éste

– Si devuelve varios elementos, se itera luego sobre ellos con .each paraacceder a cada elemento de la colección devuelta

2. Pasándole HTML (un string): – Crea el elemento correspondiente al argumento (que ha de tener

etiquetas HTML para no confundirse con un selector CSS del casoanterior) y lo devuelve recubierto/envuelto en un objeto jQuery, pero no lo

inserta en el DOM (hay funciones para hacerlo) 3. Pasándole un/unos elemento JSAPI del DOM (ej. document o window):

– Devuelve un objeto jQuery que recubre el elemento del argumento

4. Pasándole una función como argumento – Ejecuta la función una vez se ha cargado todo documento y el DOM está

preparado para ser manipulado. Equivalente a $(document).ready(f) 17 ©GSyC



Selección de elementos con

$('selector-CSS ')

Ejemplos de selectores CSS: selector qué seleccionah1 cualquier elemento h1

div#message *el* elemento div cuyo ID es message

.red cualquier elemento de clase red

div.red, h1 los elementos div de clase red o cualquier h1

div#message h1 los elementos h1 dentro de los div de clase messagea.lnk elementos de clase lnk

a.lnk:hover elementos a con clase lnk, cuando se pasa por

encima de ellos (hover )

http://www.w3.org/TR/selectors/#selectors

Ejemplos de llamadas a $('selector-CSS'):

jQuery('#movies')

$('#movies')

$('h1.title')

18 ©GSyC



Propiedades y funciones de

elementos DOM recubiertos

por jQuery()/$() – Hay 3 tipos de acciones que se pueden realizar sobre

un elemento o un conjunto de elementos devueltos por

jQuery('selector-CSS ')/$('selector-CSS'):

1. Cambiar su aspecto visual modificando la clase CSS del/de

los elementos

2. Cambiar su contenido modificando el html del/de los

elementos o el texto plano del elemento

3. Animar el/los elementos (mostrar/ocultar, desvanecerse/

reaparecer, …)

– Consulta http://api.jquery.com/

– A continuación presentamos algunas funciones

19 ©GSyC



Funciones para elementos

seleccionados por jQuery()Notación e.func(args) es una función que se aplica a un elemento e devuelto por jQuery().

Ej: $('h1.title').func(args). Si no se indica otra cosa, devuelve el elemento tras

aplicársele la función, por lo que se pueden llamar en cascada

– .is(’:cond') Comprueba si el elemento está ':checked', ':selected', ':enabled',

':disabled'

– .addClass('cssClass'), .removeClass('cssClass'), .hasClass()

– .insertBefore(elem ), .insertAfter(elem ), .remove(),

.replaceWith(elem ), .appendTo(elem )

– .clone() Devuelve copia recursiva de los descencientes

– .html(['htmlString']) Devuelve (o pone si hay argumento) el html

– .text([’texto']) Devuelve (o pone si hay argumento) el texto sin etiquetas html

(p.ej. a un <h1> texto </h1>

– .val([val]) Devuelve o pone el valor del elemento: para textboxes el contenido, para

botones la etiqueta, para menús el texto de la opción seleccionada

– .attr('attr' [,nuevoValor]). Ej: $('img').attr('src'), 'http://google.com') – .find('selector-CSS') Devuelve elementos hijos seleccionados por selector-CSS. Ej:

$('#movies tr') == $('#movies').find('tr')

20 ©GSyC



Funciones para elementos

seleccionados por jQuery()

– .css('propiedad') Devuelve propiedad CSS del elemento

– .css({'propiedad':'valor',…}) Pone propiedades CSS al elemento

Animaciones:

– .hide([duracion][,callback]), .show([duracion][,callback])Muestra/oculta el elemento, tardando duracion ('fast', 'slow' o

milisegundos), y cuando termina llama a callback

– .slideUp([duracion][,callback]), Desaparece como persiana

.slideDown([duracion][,callback]),

.slideToggle([duracion][,callback])

–

.fadeOut([duracion][,callback]),Desaparece haciendo transparente

.fadeIn([duracion][,callback])

– .fadeTo(duracion, target, callback )Target es un valor de transparencia entre 0.0 y 1.0

21 ©GSyC



Ejemplos – Carga la página de rottenpotatoes en Firefox

– Activa firebug. Si no lo tienes aún instlado, hazlo: https:// www.getfirebug.com/

– Selecciona el menú Scripts de Firebug

– Selecciona el enlace Reload to see all sources

– Prueba ahora en la consola de Firebug las siguientes llamadas:

22

this==window;this.document;this.document.getElementById('movies'); // Ejemplo de uso de API JSAPI$('#movies'); // Selecciona toda la tabla con id CSS #movies usando jQueryjQuery('tr'); // Selecciona todas las filas (<tr>) del documento$('tr').hide() // En cada tr pone: <tr style="display: none;">. Puedes verlo en el menú

// Herramientas->Web Developer Extension->View Source->View Generated Source $('tr').show() // Cambia de nuevo el style para que aparezcan pintadash=$('h1.title') // Selecciona el elemento <h1> de clase CSS .title

h.slideUp('slow') // Y ahora lo anima ocultándolo lentamenteh.slideDown('slow') // Y ahora lo anima haciéndolo aparecer lentamenteh.slideToggle(2500) // Si estaba oculto lo hace aparecer, y viceversatheaders=$('#movies th') // los <th> dentro del elemento con id #moviestheaders.fadeTo(2000, 0.25) // los vuelve transparentes$('tr').fadeTo(2000,0.25) // y lo mismo con todos los <tr>

©GSyC



Registro de manejadores de

eventos sobre elementos del

DOM



Registro de manejadores para

eventos con jQueryCómo registrar eventos – elemento.tipo-evento (func([event]){…})

Asocia a elemento func como un manejador/callback para tipo-evento. Cuandoocurra tipo-evento sobre elemento, el browser llamará a func(event) pasandoen event el evento

Tipos de Eventos

– Tipos de eventos aplicables a cualquier elemento:

o click, dblclick, mousedown/mouseup, mouseenter/mouseleave

o keypress (event.which devuelve el código ASCII dentro del manejador)

o focus/blur (el elemento obtiene/pierde el foco)

o focusin/focusout (el padre del elemento obtiene/pierde el foco)

– Eventos aplicables a elementos accionables por el usuario (forms,

checkboxes, radio buttons, text box, text field, menús):

o change

o select (event.which devuelve el texto seleccionado dentro del manejador)

o submit (disparado cuando se envía un formulario)

25



Ejecución de callbacks

– El browser llama a un manejador de eventos/ callback cuando se produce el evento sobre el

elemento con el que se asoció el manejador

– Si hay registrado un manejador para el

elemento, o para alguno de sus elementosancestros, se ejecutan en cadena antes del

comportamiento predefinido (si existe): • La cadena comienza en el elemento en el que se produce el

evento y termina en el objeto global (window)

• Si un manejador devuelve true, se ejecuta el siguiente en lacadena

• Si el manejador devuelve false, se interrumpe la ejecución en

cadena, y la del comportamiento predefinido, que es el último

26 ©GSyC



Ejemplo – A continuación añadimos a la página principal de

rottenpotatoes un botón para seleccionar películas aptas

para menores, sin interacción con el servidor

27 ©GSyC





para menores, sin interacción con el servidorapp/assets/javascripts/rp.js

28 ©GSyC

RP = {setup: function() {

// construct new DOM elements$('<label for="filter" class="explanation">' +

'Restrict to movies suitable for children' +'</label>' +'<input type="checkbox" id="filter"/>'

).insertBefore('#movies').change(RP.filter_adult);},

filter_adult: function () {// 'this' is JSAPI element that received event (checkbox)if ($(this).is(':checked')) {

$('#movies tbody tr').each(RP.hide_if_adult_row);} else {

$('#movies tbody tr').show();};

},

hide_if_adult_row: function() {if (! /^G|PG$/i.test($(this).find('td:nth-child(2)').text())) {

$(this).hide();}

}

}$(RP.setup); // when document ready, run setup code

http://pastebin.com/85fZTe4J






29 ©GSyC








},


$(this).hide();}

}


Al cargar la página, y

por tanto este fichero,pedimos que seejecute RP.setupuna vez esté todo elDOM generado






30 ©GSyC








},


$(this).hide();}

}


Inserta el código HTMLque interaccionará conJavaScript






31 ©GSyC








},


$(this).hide();}

}


Registra callback para elevento change dela checkbox. Mejor change

que click: change se activatambién cuando se seleccionapor teclado la checkbox.

En la callback

this es la checkbox JSAPI,que envolvemos con $(this)






32 ©GSyC








},


$(this).hide();}

}


Itera sobre cada tr, y lopasa como this a la funcióndel argumento






33 ©GSyC








},


$(this).hide();}

}


Muestra todos los tr






34 ©GSyC








},


$(this).hide();}

}


2º td del tr pasado en this



Comentarios sobre el Ejemplo – La checkbox se añade desde la función setup(), y ésta

sólo se ejecuta si el browser tiene JavaScript

• Si la hubiéramos puesto en el HTML, los browsers sin JavaScript lamostrarían pero no podrían interactuar con ella

– Sólo se ha añadido un objeto al ámbito global, RP, que

define su propio ámbito. Por eso todas las funciones setienen que llamar por su nombre: RP.fname

– Implementación alternativa menos intrusiva de laocultación de pelis para mayores: • Si en el servidor marcamos las filas de películas para adultos:

%tr{:class => ('adult' unless movie.rating =~ /^G|PG$/)}

• Entonces podríamos eliminar RP.hide_if_adult_row()

• Y substituir $('#movies tbody tr').each(RP.hide_if_adult_row);

por $('#movies tr.adult').hide();• De esta forma el código JavaScript no se apoya en detalles de la

presentación (Dependemos de que la calificación esté en la 2ª columna

de la tabla)

35 ©GSyC



Eventos definidos y disparados

por el usuario – Se pueden definir nuevos eventos utilizando esta otra

forma de registrar callbacks para un evento:

elemento.bind('nuevo-evento', func(event){…})

– Y luego se puede llamar a estos eventos explícitamente

con trigger

– Ejemplo que puedes probar en firebug, en la página derottenpotatoes p.ej.:

$('#movies').bind('miEvento',

function(event, param1, param2){

alert(param1 + "\n" + param2);});

$('#movies').trigger('miEvento',['Custom', 'Event']);

36 ©GSyC



AJAX



Introducción

• En 1998 Microsoft añade el objetoXmlHttpRequest o xhr a su navegador

Internet Explorer 5 (IE5)

• En 2005 Google Maps es una de lasprimeras aplicaciones que demuestra la

potencia de AJAX

38 ©GSyC



Objeto XmlHttpRequest(xhr)

– El objeto JavaScript XmlHttpRequest, o xhr, que proporcionanmuchos browsers permite realizar RPCs asíncronas: la llamada

retorna antes de obtenerse la respuesta del servidor

– Envía un mensaje de petición HTTP desde JavaScript sin que sea

necesario redibujar toda una página al obtener el mensaje derespuesta

• Genera un mensaje de petición HTTP normal, al que le añade la cabeceraX-Requested-With: XMLHttpRequest

– Cuando llega la respuesta se llama a una callback que utiliza la

respuesta obtenida (p.ej. una vista parcial HTML, o XML, o JSON,

texto, o nada) para modificar el DOM de la misma página desde laque se hace la petición

– Al no recargar toda la página se tarda menos en mostrar larespuesta y la interfaz ofrece una interacción más dinámica

– En jQuery se utiliza $.ajax para usar el objeto xhr

39



Programación basada en

eventos, también para xhr –

La programación en JavaScript para interactuar con la interfaz gráfica esbasada en eventos (event driven): registras callback asociada a un objeto ya un evento, que es llamada por el runtime

– JavaScript tiene un único thread que va ejecutando los manejadoresregistrados según van ocurriendo los eventos que los disparan

• Pseudocódigo del runtime de JavaScript:

while (true) {

var event = waitForEvent();event.callback();

redrawDOM();

} – Por tanto, la llamada para realizar la petición xhr no puede ser bloqueante y

quedarse esperando a recibir la respuesta: de hacerlo, bloquearía el bucle deejecución de callbacks, congelando la interacción con la interfaz

– Por ello la RPC que generamos con xhr retorna inmediatamente, antes deobtener la respuesta

• Se le pasa una función como callback que es llamada por el browser cuando llega la respuesta

• La callback puede reemplazar, cambiar, animar,… ya que re se redibuja el DOM en función de

los cambios de las callbacks que se van llamando 40 ©GSyC



xhr en jQuery: $.ajax

• Con $.ajax realiza en jQuery una llamada XHR

• Es no bloqueante: retorna inmediatamente, y después, cuando

llegue la respuesta HTTP al browser, el runtime de JavaScriptllama a la callback registrada

• Ejemplo:

41 ©GSyC

$.ajax({type : 'GET', // método HTTPurl : 'http://…',timeout: milisegundos, // si tarda más se llama a errorsuccess: fn_success, // función a la que llamar cuando

// llegue la respuestaerror : fn_error // función a la que

// llamar si hay errores, p.ej.// timeout, servidor no arrancado…

});



Ejemplo de uso de $.ajax()

– Vamos a modificar rottenpotatoes para que los detalles de una

película se pidan a nuestro servidor Rails desde JavaScript,usando AJAX, y se muestren en una ventana flotante, sin

abandonar la página index

42 ©GSyC




– Vamos a modificar rottenpotatoes para que los detalles de una

película se pidan a nuestro servidor Rails desde JavaScript,usando AJAX, y se muestren en una ventana flotante, sin

abandonar la página index

– Desde una función JavaScript se usará xhr para realizar una

petición HTTP a la URL de la acción MoviesController#show

• Podríamos crear otra acción pero reaprovecharemos ésta acción del

controlador – Esta acción devolverá una vista parcial cuando detecte que la

petición se hace usando xhr, o la vista normal en caso contrario

– Añadiremos un manejador de eventos a los enlaces que hay

ahora en la página index para ver más detalles de cada

película, y desde el manejador realizaremos la llamada xhr

– Añadiremos un nuevo div a la página index para rellenarlocon los datos devueltos por la llamada xhr y le pondremos

propiedades CSS que hagan que aparezca en el centro de la

pantalla, "flotando"

43 ©GSyC




– Vista parcial app/movies/_movie.html.haml que

devolverá la acción MoviesController#show cuandosea llamada usando xhr

– Acción del controlador

44 ©GSyC

%p= movie.description

= link_to 'Edit Movie', edit_movie_path(movie)= link_to 'Close', '', {:id => 'closeLink'}

class MoviesController < ApplicationController…

def showid = params[:id] # retrieve movie ID from URI route

@movie = Movie.find(id) # look up movie by unique ID

render :partial => 'movie', :object => @movie and return if request.xhr?# will render app/views/movies/show.<extension> by default

end…

end

http://pastebin.com/dW04wY9F

http://pastebin.com/CxxPBQpy







45 ©GSyC







end…

end

El método xhr? del objeto request delcontrolador devuelve true si en elmensaje de petición HTTP se haincluído la cabeceraX-Requested-With: XMLHttpRequest

$ j ()







46 ©GSyC







end…

end

Alternativas que podría esperar el cliente JavaScript: render :json => @movies and return if request.xhr // Llama a @movies.to_json

render :xml => @movies and return if request.xhr // Llama a @movies.to_xml

render :text => @movie.title and return if request.xhr

render :nothing => true and return if request.xhr

$ j ()



Ejemplo de uso de $.ajax() – Nuevo fichero JavaScript app/assets/javascripts/rpajax.js

48

RPAjax = {setup: function() {

// add invisible 'div' to end of page:

$('<div id="movieInfo"></div>').hide().appendTo($('body'));

$('#movies a').click(RPAjax.getMovieInfo);},

getMovieInfo: function() {$.ajax({type: 'GET',

url: $(this).attr('href'),timeout: 5000,success: RPAjax.showMovieInfo,

error: function() { alert('Error!'); }

});return(false);

},showMovieInfo: function(data) {

// center a floater 1/2 as wide and 1/4 as tall as screenvar oneFourth = Math.ceil($(window).width() / 4);$('#movieInfo').

html(data).css({'left': oneFourth, 'width': 2*oneFourth, 'top': 150}).

show();// make the Close link in the hidden element work

$('#closeLink').click(RPAjax.hideMovieInfo);return(false);},

hideMovieInfo: function() {$('#movieInfo').hide();return(false);

},}

$(RPAjax.setup);http://pastebin.com/yhmPC4Ki

Ej l d d $ j ()




49








});return(false);







},}

$(RPAjax.setup);

Asociamos callback paracuando se haga click en cada uno de los elementos<a> de la tabla #movies

Añadimos nuevo <div>al final de la página, con idpara poderle poner CSS

Ej l d d $ j ()




50








});return(false);







},}

$(RPAjax.setup);

La url la sacamos del actual enlaceen el HTML: <a href="url">

this es el elemento sobre elque se ha disparado el evento: un'#movies a' == <a href="url">

Paramos la cadena de ejecución de callbacks: no queremos quese ejecute la acción por defectodel link: pedir la url (¡otra vez!)

Ej l d d $ j ()




51








});return(false);







},}

$(RPAjax.setup);

Ponemos el HTML en el<div id="movieInfo">

HTML devuelto en la vistaparcial _movie.html.haml

Modificamos sus propiedades CSSdándole dimensiones relativas

al tamaño de la ventana, y mostramosel <div id="movieInfo">

Asociamos callback al enlace close de la ventana

Ej l d d $ j ()




– El resultado

– Añadimos coordenadas absolutas, color, borde,…:

– Y el resultadomejora visualmente

(ahora parece flotante):

52 ©GSyC

#movieInfo {padding: 2ex;position: absolute;border: 2px double grey;background: wheat;

}

app/assets/stylesheets/app

http://pastebin.com/0WdxM2vp

D ió d li i



Depuración de aplicaciones #

AJAX/Rails

–

Puedes arrancar firebug y poner puntosde parada (breakpoints ) en el código

JavaScript • click en el número de línea en la que quieras poner/

quitar un breakpoint – Y en el depurador de rails puedes poner

puntos de parada en el código Rails.• Recuerda: 1. Arrancar rails server –debug

2. Insertar llamada a debugger en la línea en la que quierasinterrumpir la ejecución

53 ©GSyC



Otros usos de JavaScript



Usos de JavaScript

1.

Client-side JavaScript : – Código JavaScript que corre en el browser, asociado a la página Web


– Se combina JavaScrpt con HTML y CSS



2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs

– Pueden operar offline – El código JavaScript en el browser usa un servidor delgado, sólo para almacenar





55 ©GSyC



Usos de JavaScript

1.

Client-side JavaScript : – Código JavaScript que corre en el browser, asociado a la página Web









3.

Aplicaciones SaaS pero con JavaScript en el servidor


57 ©GSyC



Ejemplo:

– Biblioteca JavaScript para programar servidores – En lugar de lanzar un nuevo proceso en el servidor para cada petición como

hacen por omisión Rails/Django, las peticiones se encolan y son atendidas por unsolo thread

– Ventaja: mayor rendimiento (peticiones/s) al no haber coste en tiempo deejecución para crear procesos ni para cambiar de contexto entre ellos

– Inconveniente: más difícil de programar, pues las llamadas han de ser nobloqueantes, teniendo que registrar callbacks …

– Ejemplo de servidor HTTP programado con node.js:

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello World\n');

}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

– Hay frameworks sobre node.js: meteor, express,…

– Yahoo Mojito es un framework híbrido: permite elegir entre generar HTML en elservidor (node.js) o en el browser (recibe JSON y convierte a HTML en elbrowser)

58 ©GSyC



Usos de JavaScript1. Client-side JavaScript :

– Código JavaScript que corre en el browser, asociado a la página Web











59 ©GSyC

Y aún hay más usos de JavaScript:

• En los móviles y tabletas, para desarrollar una sóla vez (en JavaScript)y desplegar/ejecutar sobre diversas plataformas móviles como Android, iPhone, BlackBerry,…

Frameworks:

! Phonegap + jQuery Mobile! Titanium

! …

• En los móviles y tabletas, como plataforma alternativa aGoogle/Android, Apple/iOS:

! Firefox OS (Firefox)! Open WebOS (HP)



Precauciones

Rendimiento de



Rendimiento de

JavaScript/AJAX

– Aparentemente JavaScript+AJAX hace interfaces másinteractivas, más dinámicas…

– Pero cuidado:

• Hay que descargar jQuery y los ficheros .js, lo que puede hacer que elusuario perciba que la página tarda más en cargar inicialmente

• Sobre todo en móviles

•

El rendimiento de JavaScript puede no ser alto – ¿Por qué no programar casi todo en el cliente y dejar para el

servidor el acceso a la BD y poco más, como hacen Ember,Backbone,…?

• No es evidente cuál es la mejor solución

• Hay mucha actividad en la actualidad

•

El código JavaScript en el cliente podría hacer queries demasiado complejas,lo que puede evitarse con APIs bien pensadas

• Por otro lado, el rendimiento de la aplicación pasa a depender de laplataforma en la que corre el browser, lo que ocurre menos si la funcionalidadestá sobre todo implementada en el servidor

61 ©GSyC



Referencias

• Capítulo 11 de Engineering Long-Lasting Software .

Armando Fox, David Patterson, beta edition, agosto 2012.

• API de jQuery: http://api.jquery.com/

• Selectores CSS3: http://www.w3.org/TR/selectors/#selectors

• How JavaScript works: introduction to JavaScript and

Browser DOM. Mi$ko Hevery.http://misko.hevery.com/2010/07/14/how-javascript-works/

• jQuery: Novice to Ninja. Earle Castledine, Craig Sharkie.

2nd ed. Site Point 2012 (Disponible en Safari)

• JavaScript. The Definitive Guide: Activate Your Web Pages

6 th

ed .. David Flanagan. O'Reilly 2011. (Disponible enSafari).

16 dom ajax con jquery rails

Documents