con Input type="button" SI va, con enlace NO... Por qué ?

yoguuu · #1 (**permalink**) 15/07/2006, 03:20

Buenas :)

Bueno esta mañana he estado probando cosillas con Ajax... soy nuevo en esto de Ajax... De momento me ha salido hacer un request con responseText correctamente y mostrarlo....

Pero tengo un dilema :S Por qué me sale con input que llama a la funcion, pero en cambio no sale si esto lo hago desde un enlace ? :S Me explico...

Uso estos 2...

Código:

<input type="button" value="mostrar" onclick="q(this.value)" />
y este otro
<a href="index.php?q=mostrar" onclick="q(this.value)">mostrar</a>

La questión es que a pesar de que de las dos formas se pasa exactamente el mismo valor... con el boton funciona y con el enlace en cambio, no.

No comprendo... estoy mirando ejemplos, a ver si encuentro caso de estudio... pero hasta entonces agradeceria una ayudita.

caricatos · #2 (**permalink**) 15/07/2006, 20:12

Hola:

Simplemente los enlaces no tienen atributo value (al menos de forma convencional)

Saludos

joaquin_win · #3 (**permalink**) 15/07/2006, 20:17

Cuando ejecutas un evento sobre un enlace, no se deshabilita el comportamiento por defecto (en el caso de un enlace es, claro está, ir a esa página), por lo que tu código:

Código:

<a href="index.php?q=mostrar" onclick="q(this.value)">mostrar</a>

realiza la acción del onclick pero también te envía al enlace.

Para deshabilitar el comportamiento por defecto del enlace debes devolver false en la acción del onclick, es decir:

Código HTML:

<a href="index.php?q=mostrar" onclick="q(this.value);return false;">mostrar</a>

también puedes lograrlo haciendo:

Código HTML:

<a href="index.php?q=mostrar" onclick="return q(this.value);">mostrar</a>

Y modificas tu función "q" para que quede así:

Código:

function q(...) {
//.... todo el código
return false;
}

joaquin_win · #4 (**permalink**) 15/07/2006, 20:19

Eso que dijo caricatos también es cierto, no me di cuenta

joaquin_win · #5 (**permalink**) 15/07/2006, 20:21

Por cierto, esto es un tema más adecuado para el foro de javascript que para este ;)

yoguuu · #6 (**permalink**) 16/07/2006, 00:44

Wow... Gracias por la colaboración :)

Antes de entrar aqui de nuevo... me di cuenta que haciendolo así también rula...

Código:

<a href="#" value="personal" onclick="q(this.value)">Personal</a>

Pero me gusta mas con el q(this.value);return false;

De nuevo muchas gracias a los dos...

yoguuu · #7 (**permalink**) 16/07/2006, 02:04

Ufffff.... los 3 metodos funcionan. Pero solo me funciona en Internet Explorer.

Me pregunto si será del XmlHttpRequest o de como interpreta firefox y internet explorer esos enlaces.... :S

los enlaces los teneis arriba...

El objeto XmlHttpRequest os lo pego ahora:

Código:

// Declaramos el objeto XmlHttpRequest
function XmlHttpRequest() {
	try {
		XmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    	try {
        	XmlHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");
            } catch (e) {
            	XmlHttpRequest = false;
            }
        }
    if (! XmlHttpRequest && typeof XMLHttpRequest != 'undefined') {
  		XmlHttpRequest = new XMLHttpRequest();
    }
    return XmlHttpRequest;
}

La questión es que cualquier enlace que haga la peticion al servidor de foma correcta funciona, el problema viene cuando ya le he dado a uno y le doy al otro... al primer click desaparecen los datos y al segundo click se muestran los datos del segundo enlace... no entiendo por que hace esto... pero lo hace...

Que opinais ?

joaquin_win · #8 (**permalink**) 16/07/2006, 07:27

Estás usando el mismo objeto XmlHttpRequest? si es así entonces cuando se hace click en dos links la primera petición se pierde, pero no se porque no continúa la otra.

Podrías mostrarnos el código completo para ver.

yoguuu · #9 (**permalink**) 16/07/2006, 15:59

Si que puedo ;) Ahora mismo.

Primero el XHTML (index.php)
#SC_b = Los enlaces
#SC_c = Donde se mostrarán los datos mediante ajax !

Código:

<!-- cargo el ajax.js en el head -->
<script src="ajax.js" type="text/javascript"></script> 
<!-- cargo el ajax.js en el head -->

<ul id="SC_b">
	<li></li>
	<li><a href="index.php?q=personal" onclick="return q(this.value);">Personal</a></li>
	<li><a href="index.php?q=weblog" onclick="return q(this.value);">Weblog</a></li>
	<li><a href="index.php?q=fotoblog" onclick="return q(this.value);">Fotoblog</a></li>
	<li><a href="index.php?q=tutoriales" onclick="return q(this.value);">Tutoriales</a></li>
	<li><a href="index.php?q=enlaces" onclick="return q(this.value);">Enlaces</a></li>
	<li><a href="index.php?q=contacto" onclick="return q(this.value);">Contacto</a></li>
	<li></li>
</ul>
<div id="SC_c"></div>

Bueno aqui el codigo que implementa el ajax y xmlhttprequest (ajax.js)
Si... uso para todo el mismo objeto XmlHttpRequest... está mal ?

Código:

// Funcion de prueba con nombre cutre, ok ? :P
function q(str) {
	_ajax = XmlHttpRequest();
	if (_ajax == null) {
		alert ("Tu navegador no soporta XmlHttpRequest");
		return
	}
	var url = "index2.php";
	url = url + "?q=" + str;
	_ajax.onreadystatechange = stateChanged;
	_ajax.open("GET",url,true);
	_ajax.send(null);
	
	return false;
}

// Comprobamos que la conexion se haya hecho con exito y mostramos los valores con responseText
function stateChanged() {
	if (_ajax.readyState == 4 || _ajax.readyState == "complete") {
		document.getElementById("SC_c").innerHTML = _ajax.responseText;
	}
}

// Declaramos el objeto XmlHttpRequest
function XmlHttpRequest() {
	try {
		XmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    	try {
        	XmlHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");
            } catch (e) {
            	XmlHttpRequest = false;
            }
        }
    if (! XmlHttpRequest && typeof XMLHttpRequest != 'undefined') {
  		XmlHttpRequest = new XMLHttpRequest();
    }
    return XmlHttpRequest;
}

Proceso de PHP desde el servidor (index2.php)
Este codigo.... muestra contenido generico.... pero bueno seria suficiente para hacer funcionar los 3 primeros enlaces.... despues seria suma y sigue

Código:

<?php
$q = $_GET[q];
if ($q == "personal") {
	$personal = 'contenido xhtml generico 1';
	echo $personal;
} else if ($q == "weblog") {
	$weblog = 'contenido xhtml generico 2';
	echo $weblog;
} else if ($q == "fotoblog") {
	$fotoblog = 'contenido xhtml generico 3';
	echo $fotoblog;
}
?>

Graciasssss !!!! Espero respu.... ;) Thx !!!
De mientras.... seguiré intentandolo por mi parte a ratos... de deskizio a deskizio xD

caricatos · #10 (**permalink**) 17/07/2006, 03:33

Hola:

Recuerda que no tienen values los enlaces... además el onclick que devuelve false se cancela, pero de otra forma se realiza el enlace... y se pierde la consulta ajax.

Una línea que podría funcionar:

<span style="cursor: pointer" onclick="return q('weblog')">Weblog</span>

Saludos

yoguuu · #11 (**permalink**) 17/07/2006, 09:55

Respecto a que el tag <a> no tenga value... no estaria yo del todo seguro... Cierto es que al menos en XHTML 1.1 no existe este "Atributo"... Pero entonces... por que me funcionaba ? esta funcion sin un valor no funciona... yo diria que el this.value si lo acepta... ( otra cosa es que posiblemente este metodo este deprecado y sea mejor ir dejandolo... )

Por el momento... lo haré tal como dijiste Caricatos... solo que seguiré usando el tag <a> para hacer enlaces como creo que es apropiado hacerlo... Muchas gracias... así funciona en ie, mozilla, firefox y ¡¡Opera!! jijiji...

Código:

<a onclick="q('personal');">Personal</a>

(El estilo "cursor: pointer;" se lo doy por desde un archivo...)

Pero sigue habiendo un problema !!!

en ninguno de los cuatro navegadores recarga los datos una si ya has pulsado alguna vez sobre cualquiera de los enlaces con ajax... Joaquin_win me preguntó si usaba el mismo objeto xmlhttprequest... tienen que usarse objetos diferentes

? :S

De nuevo gracias :) me tais ayudando un webo :)

caricatos · #12 (**permalink**) 17/07/2006, 10:14

Cita:

Iniciado por yoguuu

Respecto a que el tag <a> no tenga value... no estaria yo del todo seguro... Cierto es que al menos en XHTML 1.1 no existe este "Atributo"... Pero entonces... por que me funcionaba ? esta funcion sin un valor no funciona... yo diria que el this.value si lo acepta... ( otra cosa es que posiblemente este metodo este deprecado y sea mejor ir dejandolo... )

...

Espero que no lo tomes mal, pero estamos tratando de ayudarte, y esa afirmación que hice desde el principio te puedo asegurar que es cierta... y maquillé la afirmación (al menos de forma convencional), porque a todos los tags se le pueden añadir atributos "inventados"...

Si pones: <a value="enlace" >puedes consultar el atributo value del tag, y en algunos navegadores te devolverá el valor que se ve, pero en otros tendrás que usar el método getAttribute, ya que esa es la forma de leer cualquier atributo que no tenga una forma convencional de lectura (href, title, className, id, NAME, offetTop...)

Pero es posible que solo se pueda leer ese atributo siempre que se haya creado con la otra forma convencional de creación: setAttribute.

He leído y trabajado mucho con el DOM como para poder afirmar algunas cosas como el primer mensaje... pero si lo pones en duda será muy difícil ayudarte (en principio no da gana ayudar a quien desconfía de tus respuestas)

Lo de usar el tag a porque dices que es un enlace... bueno, la respuesta sería simplemente una especie de copia de lo que puse anteriormente.

Saludos

yoguuu · #13 (**permalink**) 17/07/2006, 13:37

Omggg no lo decia con ninguna mala intención de verdad... solo que, me preguntaba como funcionaba si no habia ningun valor... (ya que si no se le pasa un valor... es totalmente imposible que funcione esa función)

En serio, mi intención era mas la de aprender que la de desconfiar, ni estár a la defensiva ni esas cosas, de verdad.
Ahh y Es verdad que lo maquillaste, sorry...

Bueno, espero que aclaradas las discrepancias :( también venia a aportar algo mas, a ver si alguno entiende que pasa en esto que intento hacer...

Es que me he dado cuenta, que el internet explorer despues de haber hecho un click en alguno de los enlaces en la barra de estado salta un error de "js"

Supongo será un error generico muy tipico del ms windows :P... pero... dice que es en la linea 4 del archivo index.php... donde está nada mas y nada menos que esto...

Código:

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

El error dice así "El objeto no acepta esta propiedad o metodo"

No sé... pero a mi no me dice nada... he estado revisando el ajax.js (lo teneis en un reply mas arriba) pero no veo nada erroneo... no sé por donde cogerlo ya...

Bueno lo dicho de nuevo... sorry y dejar bien claro que mi intención es solo aprender... no meterme con nadie... ni ofender ni ofenderme...

Saludos

caricatos · #14 (**permalink**) 17/07/2006, 19:19

Hola:

No te preocupes por la regañina (a veces nos puede pasar)

Te recomiendo que te acostumbres a probar tus códigos con mozilla (firefox, por ejemplo) o también podría servirte opera...

Ambos tienen una "consola javascript" que indica mucho mejor cuál es el error.

Saludos

yoguuu · #15 (**permalink**) 18/07/2006, 02:25

Ok Caricatos... ;)

Lo he probado con firefox, mozilla y con opera, con los dos primeros dice lo siguiente...

Código:

Error: syntax error
Archivo de origen: javascript: http://127.0.0.1/sitios/sitio4/html/index.php
Línea: 1, columna: 45
Código fuente:
 http://127.0.0.1/sitios/sitio4/html/index.php

Este error no comprendo de donde lo saca... dice la linea 1 del index.php y
esa linea es el doctype ( y el xhtml 1.1 me lo valida ), otra cosa alomejor es 
que se refiere a la primera linea del archivo javascript que hay linkado... (ajax.js) que es esta linea:

function q(str) {

El error con opera es este... es un poco mas claro... recalcar que este error sucede cuando ya le has dado a un enlace..... en el instante que pulsas sobre cualquier otro...

Código:

YoGuuu //
http://127.0.0.1/sitios/sitio4/html/index.php
Event thread: click
Error:
name: TypeError
message: Statement on line 2: The Object does not implement [[Call]]
Backtrace:
  Line 2 of linked script http://127.0.0.1/sitios/sitio4/html/ajax.js
    _ajax = XmlHttpRequest();
  Line 1 of  script 
    q("weblog");
  At unknown location
    [statement source code not available]

Lo miraré luego... ahora no tengo mas tiempo... por si os interesa... el ajax.js es el que hay en un reply por arriba.... ;)

Saludos

yoguuu · #16 (**permalink**) 18/07/2006, 11:01

Siiiiiiiiiiiiiiiiiiiiiiiiiiiiii Ya lo he conseguido !!!!!!!!!!
Muchisimas graciass !!!
Valida XHTML 1.1, CSS, y funciona tanto en IE, Mozilla, Firefox y Opera :)

El error estaba en el objeto XmlHttpRequest que tenia hecho(joder, ya es mala suerte... me falla el trozo generico del codigo :P )... la solucion... declarar una variable con "var variable;"... y usarla cada vez que se inicializa la condicion de crear el objeto para cada navegador !!! ( cosa que si javascript te obligase a hacer... no pasaria... )

Código:

function nuevoAjax() {
	var xmlhttp=false; 
	try { 
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); // Creacion del objeto AJAX para navegadores no IE
	} catch(e) { 
		try { 
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // Creacion del objeto AJAX para IE
		} catch(E) {
			xmlhttp=false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp=new XMLHttpRequest();
	} 
	return xmlhttp; 
}

Lo dicho... MUCHISIMAS GRACIAS :D no me veia muy capaz de terminarlo... :( pero ya ta...

Postearé un mini tuto de como switchar datos mediante links... un mini tuto para newbies como yo... :)