JavaScript - JavaScript no intrusivo

JavaScript no intrusivo

Publicado por Armando (3 intervenciones) el 10/02/2015 06:52:28

Buenas noches tengan todos ustedes antes que nada.

Bueno mi pregunta es acerca de JavaScript no intrusivo, como todos sabemos es tener el fichero "JS" y agregarlo al archivo "HTML" e inicia la magia!!! pero yo tengo la siguiente duda, e buscado ya bastantes horas he incluso en libros de javascript que están en inglés, pero no encuentro lo que busco, espero alguien pueda darme una respuesta...

Supongamos que tenemos una página php por ejemplo "usuarios.php", donde extraemos de una base de datos, almenos 20 usuarios con la siguiente información:

'nombre', 'telefono', 'mail'

Ahora si quisiera editar algún usuario por medio de su ID y utilizando El conjunto de tecnologías que es AJAX para evitar

refrescar la página, anteriormente donde incluíamos en el archivo HTML algún evento, por ejemplo:
onclick, onmouseover y pasándole desde php como argumento el ID del usuario (esto se resolvía muy sencillo...)

Pero con javascript no intrusivo se complica, leí en alguno sitios web, ciertas soluciones ya que al no

disponer de un evento como onclick o mouseover directamente en el HTML no se pueden pasar parámetros, pero al ser un ID numérico, puede existir una lógica y trabajar desde javascript, pero aquí es donde se me complica.

¿Qué sucede si en vez de usar un ID de números, se desea usar otro valor? no se podriá ser el mismo nombre del usuario o su correo, entonces si sería necesario pasar este parámetro con php ya sea, me vea obligado a ingresar en el
HTML algun evento o hacerlo en mismo <script></script> pero ya sería intrusivo...

¿Alguien tiene alguna opinión o respuesta de esto?

De antemano agradezco el tiempo que se puedan tomar leyendo esto...

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

JavaScript no intrusivo

Publicado por xve (2100 intervenciones) el 10/02/2015 15:57:04

Hola Armando, entiendo lo que es javascript intrusivo, lo he tenido que utilizar alguna vez, lo que no entiendo es tu pregunta con el tema del id, o el nombre o correo del usuarios.

Desde el archivo js, tu puedes generar los eventos que desees al igual que lo harías en el código html con onclick o onmouse...,etc...

Si por ejemplo, con el javascript intrusivo pones un onclick() desde el javascript no intrusivo, tienes que crear dicho evento según la estructura de tu código HTML (DOM)

Este tipo de programación es mas limpia, pero mas complicada... yo únicamente la utilizo si el cliente lo solicita.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

JavaScript no intrusivo

Publicado por Armando (3 intervenciones) el 10/02/2015 19:46:54

Hola xve, muchas gracias por tomarte el tiempo de responderme y mira planteando mejor mi pregunta, si yo tuviera el siguiente código:

Aquí cree un tabla con los datos Nombre Correo Eliminar, y trayendo de manera dinámica de mi base de datos, la información correspondiente a la tabla quedando de esta manera:

Nombre . . . . .Correo . . . . . . . . . . . Eliminar
Fernando . . . [email protected] . . . . . . .Elminar->referencia al id = 1
Mirian . . . . . . [email protected] . . . Elminar->referencia al id = 2
Jimena . . . . . . [email protected] . . . . . . Elminar->referencia al id = 3

y el código asi:

<html>

	<head>

		<title>usuarios</title>

		<script type="text/javascript" src="script/ajax.js"></script>

	</head>

	<body>

		<div id="datos">

			<table>

				<tr>

					<td>Nombre</td>

					<td>Correo</td>

					<td>Eliminar</td>

				</tr>

				<tr>

					<td>Fernando</td>

					<td>fer@etc.com</td>

					<td><a href="eliminar.php?id=1" onclick="eliminar('1', 'eliminar.php', 'datos'); return false;">Elminar</a></td>

				</tr>

				<tr>

					<td>Mirian</td>

					<td>mirian@etc.com</td>

					<td><a href="eliminar.php?id=2" onclick="eliminar('2', 'eliminar.php', 'datos'); return false;">Elminar</a></td>

				</tr>

				<tr>

					<td>Jimena</td>

					<td>jim@etc.com</td>

					<td><a href="eliminar.php?id=3" onclick="eliminar('3', 'eliminar.php', 'datos'); return false;">Elminar</a></td>

				</tr>

			</table>

		</div>

	</body>

</html>

El evento onclick recibe 3 parámetros:
El primer parámetro lo paso por php que es el ID.
El segundo es el nombre del archivo php (eliminar.php)
El tercero es el id del div (datos) donde recargare la información.

Esta función de javascript con el objeto xmlhttprequest, procesa y devuelve la información ya sea en formato texto o xml en el div datos

De esta manera es como lo vengo haciendo...!!!

¿Mi pregunta es como le podría pasar parámetros a una función javascript si lo manejo de manera no intrusiva?
He leído un método donde se pueden crear algunos input de tipo hidden y ahí almacenar los datos con php y desde javascript por medio de algún atributo o id recuperarlos... Es buena idea pero siento que de esta manera se crearía mas código en el HTML que simplemente añadiendo un evento al HTML.

Otra idea que leí, es que podemos generar una variable en javascript de tipo entero, donde hacemos referencia al id, como si pasáramos el parámetro por php... También es buena idea, pero esta lógica se rompe si en lugar de manejar los parametros de php por id los manejamos por nombre o correo, entonces cambiaria...

DE ANTE MANO MUCHAS POR SUS POSIBLES RESPUESTAS...
ATENTAMENTE : ARMANDO

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

JavaScript no intrusivo

Publicado por xve (2100 intervenciones) el 11/02/2015 08:18:56

Hola Armando, aqui te he preparado un simple ejemplo para solucionar el problema que tu tienes con jquery.... haber que te parece.

En este ejemplo, llamo a la función eliminar() que no existe, por lo que te dará error en la consola...

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="utf-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

    <script>

    $(document).ready(function(){

        $("#datos .onclick").click(function(){

            var id=$(this).attr("class").split(' ');

            eliminar(id,"eliminar.php","datos");

});

});

    </script>

</head>

<body>

    <div id="datos">

        <table>

            <tr>

                <td>Nombre</td>

                <td>Correo</td>

                <td>Eliminar</td>

            </tr>

            <tr>

                <td>Fernando</td>

                <td>fer@etc.com</td>

                <td class="onclick 1">Elminar</td>

            </tr>

            <tr>

                <td>Mirian</td>

                <td>mirian@etc.com</td>

                <td class="onclick 2">Elminar</td>

            </tr>

            <tr>

                <td>Jimena</td>

                <td>jim@etc.com</td>

                <td class="onclick 3">Elminar</td>

            </tr>

        </table>

    </div>

</body>

</html>

Esta es una de las muchas maneras que se puede hacer...

Coméntanos que te parece, ok?

Valora esta respuesta

Comentar

JavaScript no intrusivo

Publicado por Armando (3 intervenciones) el 11/02/2015 19:02:58

Muchas gracias nuevamente por tu respuesta xve,.

Si mal no analice, el cogido código me propone crear una tributo de tipo class, donde se puede almacenar de manera dinámica con php el id o en su defecto lo que desee, luego recuperarlo y almacenarlo en una variable para pasarlo como parámetro a la función eliminar() (eliminar es una función propia, no pertenece a javascript, por si a alguien mas a parte de mi, le es de mucha ayuda esta respuesta) del archivo js.

La verdad me parece muy práctico y así evitaría quizá crear input de tipo hidden o algúna otra forma de hacerlo...
Te agradezco por esta solución, me parece muy limpia comparada con otras, y tambien decir que es una lástima que en algunos libros donde se manejan títulos como "php y javascript", los ejemplos son muy sencillos(quizá unos más practicos que otros), pero cuando se presenta un problema como este, salen muchas dudas...

Saludos...
Atentamente: Armando

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

JavaScript no intrusivo

Publicado por xve (2100 intervenciones) el 11/02/2015 20:24:30

Me alegro que te haya servido...

Gracias por comentarlo!!!!

Valora esta respuesta

Comentar

Cálculos con javascript

swipe en una tabla