Javascript no me funciona cuando coloco el Doctype.

saymon · #1 (**permalink**) 05/03/2010, 15:03

Hola amigos,

Yo tengo un codigo javascript que lo tenia funcionando bien en una pagina de testeo, pero cuando lo implemento en el sitio enlinea no me funciona, me di cuenta que cuando quito el doctype del sitio el codigo me funciona bien, pero cuando este esta, me manda un error en lineas que incluso solamente es html.

Este es el Doctype que uso:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Y este es el codigo javascrip que quiero correr:

Código Javascript:

Ver originalfunction ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var comment = document.getElementById('comment').value;
    var idx = document.getElementById('idx').value;
    var usernamex = document.getElementById('usernamex').value;
    var queryString = "?comment=" + comment + "&idx=" + idx + "&usernamex=" + usernamex;
    ajaxRequest.open("GET", "c_action.php" + queryString, true);
    ajaxRequest.send(null); 
}

y aqui esta el html con el que funciona:

Código HTML:

<div id="ajaxDiv">
<form name="myForm">
  <textarea name="comment" id="comment" cols="45" rows="5"></textarea>
  <br /><br />
<input type="hidden" name="idx" value="1111" />
<input type="hidden" name="usernamex" value="maria" />
<input type="button" onclick="ajaxFunction()" value="Send Comment" />
</form>
</div>

Les agradeceria alguna ayuda o decirme que doctype puedo utilizar con javascrip.

Saludos de antemano.
AD

zerokilled · #2 (**permalink**) 05/03/2010, 15:21

en realidad javascript funciona en cualquier DOCTYPE. lo que si cambia es que cuando el documento tiene DOCTYPE ciertas propiedades no devuelven el valor que devolveria sin DOCTYPE. por ejemplo, la propiedad scrollTop se tiene que leer desde el elemento documentElement y no desde body.

ahora bien, lo que si veo es que estas intentando obtener la referencia de algunos elementos con getElementById pero el elemento no tiene ID. es decir, no confundas el atributo name con id.

saymon · #3 (**permalink**) 05/03/2010, 15:30

A pesar de que no soy experto en javascript, si creo que esta alli el problema en alguna incompatibilidad de javascript con el tipo de doctype, porque tambien pense que podria ser algun tipo de conflicto entre el demas codigo, y fui limpiando y limpiando el codigo hasta que quedé solamente con unas cuantas lineas que solo contiene este javascrip y el form del HTML, a continuacion coloco todo el codigo de la pagina: (en donde me funciona bien solamente quitando la primera linea del doctype)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var comment = document.getElementById('comment').value;
	var idx = document.getElementById('idx').value;
	var usernamex = document.getElementById('usernamex').value;
	var queryString = "?comment=" + comment + "&idx=" + idx + "&usernamex=" + usernamex;
	ajaxRequest.open("GET", "c_action.php" + queryString, true);
	ajaxRequest.send(null); 
}

</script>
</head>
<body>

<div id="ajaxDiv">
<form name="myForm">
<textarea name="comment" id="comment" cols="45" rows="5"></textarea><br /><br />
<input type="hidden" name="idx" value="1111" />
<input type="hidden" name="usernamex" value="maria" />
<input type="button" onclick="ajaxFunction()" value="Send Comment" />
</form>
</div>

</body>
</html>

zerokilled · #4 (**permalink**) 05/03/2010, 15:48

la verdad no puedo hacer la prueba porque ahora mismo no poseo un servidor con php, lo que si te sigo recordando es que estas intentando leer un elemento que no tiene ID. al no tener ID, getElementById te devuelve null, seguido intentas leer la propiedad value, y como null no tiene dicha propiedad, entonces te genera error. quizas sin DOCTYPE getElementById tambien lee los elementos por atributo name pero no es lo correcto.

saymon · #5 (**permalink**) 05/03/2010, 15:59

Muchas gracias ZeroKilled,

Era eso, no habia colocado los ids a los input.